黑马程序员技术交流社区

标题: 一个学习中遇到的的问题 [打印本页]

作者: 时国虎    时间: 2013-5-16 17:06
标题: 一个学习中遇到的的问题
编写HTML注册表单, 需要字段: 用户名, 密码, 确认密码, 性别(单选), 城市(下拉列表), 兴趣爱好(多选), 个人简介(文本域)。

然后使用JavaScript验证这个HTML表单,要求:

        1、 用户名: 必须是字母数字或下划线, 不能以数字开头.

        2、密码: 6-16位字母数字下划线.

        3、确认密码: 和密码一致.

        4、其他项为必填.

作者: 刘学明       时间: 2013-5-16 17:09
看毕向东老师最后一个JS案例
作者: xiewen    时间: 2013-5-27 18:58
看了很久都没人帮你解答这个题,我花了一点时间帮你把它做完了,代码如下
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>用户注册</title>
  6. <script type="text/javascript" language="javascript">
  7. <!--
  8.         function check(name,lable){
  9.                 this.uname=name;
  10.                 this.lable=lable;
  11.         }
  12.         function validate(objform){
  13.                 var regName=/^\D[\d\w_]+$/;// 用户名: 必须是字母数字或下划线, 不能以数字开头.
  14.                 var regPassword=/[\d\w_]{6,16}/;//密码: 6-16位字母数字下划线.
  15.                 var hobby=document.getElementsByName("hobby");//得到所有兴趣爱好
  16.                 var textarea=document.getElementsByTagName("textarea")[0];
  17.                 var arr=new Array(
  18.                         new check("usename","用户名"),new check("password","密码"),new check("rpassword","确认密码")
  19.                 );
  20.                 for(var i=0;i<arr.length;i++){
  21.                     var name=eval("objform."+arr[i].uname);
  22.                         if(name.value==""){
  23.                                 alert(arr[i].lable+"不能为空");
  24.                                 return false;
  25.                         }
  26.                         if(!regName.test(eval("objform."+arr[0].uname).value)){
  27.                                 alert(" 用户名必须是字母数字或下划线, 不能以数字开头.");
  28.                                 return false;
  29.                         }
  30.                         if(!regPassword.test(eval("objform."+arr[1].uname).value)){
  31.                                 alert("密码要求6-16位字母数字下划线.");
  32.                                 return false;
  33.                         }
  34.                         if(eval("objform."+arr[1].uname).value!=eval("objform."+arr[2].uname).value){
  35.                                 alert("两次输入的密码不一致");
  36.                                 return false;
  37.                         }
  38.                 }
  39.                 var flag=false;
  40.                 for(var i=0;i<hobby.length;i++){
  41.                         if(hobby[i].checked==true){
  42.                                 flag=true;
  43.                         }
  44.                 }
  45.                 if(!flag){
  46.                         alert("兴趣爱好不能为空");
  47.                         return false;
  48.                 }
  49.                 if(textarea.value==""){
  50.                         alert("个人简历好不能为空");
  51.                         return false;
  52.                 }
  53.         }
  54.         function sureSubmit(form){
  55.                 return validate(form);
  56.         }
  57. //-->

  58. </script>
  59. </head>

  60. <body>
  61.         <form method="post" action="" onsubmit="return sureSubmit(this)">
  62.             <table>
  63.                 <tr align="right">
  64.                     <td>用户名:</td>
  65.                 <td align="left"><input type="text" name="usename"/></td>
  66.             </tr>
  67.             <tr align="right">
  68.                     <td>密码:</td>
  69.                 <td align="left"><input type="password" name="password"/></td>
  70.             </tr>
  71.             <tr align="right">
  72.                     <td>确认密码:</td>
  73.                 <td align="left"><input type="password" name="rpassword" u/></td>
  74.             </tr>
  75.             <tr align="right">
  76.                     <td>性别:</td>
  77.                 <td align="left">
  78.                         <input type="radio" name="sex" checked="checked"/>男
  79.                     <input type="radio" name="sex"/>女
  80.                 </td>
  81.             </tr>
  82.             <tr align="right">
  83.                     <td>城市:</td>
  84.                 <td align="left">
  85.                         <select>
  86.                              <option value="北京">北京</option>
  87.                             <option value="上海" >上海</option>
  88.                         <option value="南京">南京</option>
  89.                         <option value="天津">天津</option>
  90.                         <option value="江西">江西</option>
  91.                         <option value="湖南">湖南</option>
  92.                         <option value="湖北">湖北</option>
  93.                         <option value="深圳">深圳</option>
  94.                     </select>
  95.                
  96.                 </td>
  97.             </tr>
  98.             <tr align="right">
  99.                     <td>兴趣爱好:</td>
  100.                 <td align="left">
  101.                         <input type="checkbox" value="篮球"  name="hobby"/>篮球
  102.                     <input type="checkbox" value="足球"  name="hobby"/>足球
  103.                     <input type="checkbox" value="排球"  name="hobby"/>排球
  104.                     <input type="checkbox" value="游泳"  name="hobby"/>游泳
  105.                     <input type="checkbox" value="爬山"  name="hobby"/>爬山
  106.                     <input type="checkbox" value="健身"  name="hobby"/>健身
  107.                     <input type="checkbox" value="阅读"  name="hobby"/>阅读
  108.                 </td><span></span>
  109.             </tr>
  110.             <tr align="right">
  111.                     <td>个人简介:</td>
  112.                         <td align="left">
  113.                  <textarea rows="20" cols="20" name="include"></textarea></td>
  114.                                        
  115.             </tr>
  116.             <tr>
  117.                     <td><input type="submit" value="提交"/></td>
  118.             </tr>
  119.         </table>
  120.    
  121.     </form>
  122. </body>
  123. </html>
复制代码
黑马云青年为您解答


作者: 821728010    时间: 2013-5-27 19:37
                      呵呵!
作者: xiewen    时间: 2013-5-27 20:03
821728010 发表于 2013-5-27 19:37
呵呵!

呵呵是啥意思?
作者: 袁梦希    时间: 2013-5-29 16:59
如果问题已经解决,请把帖子的类型改为已经解决,如果不会解决请看我的个性签名。




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2