JavaScript验证相关在线等答案！！！

韩军博

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册页面</title>
<script type="text/javascript">
      function formSubmit(){

      }

</script>
</head>
<body>

      <form action="" method="GET">
            用户名：<input type="text" name="username" id="username"/>

            密  码：<input type="password" name="password" />

            确认密码:<input type="password" name="repass"/>

            性  别：男<input type="radio" name="sex" value="male"/>
                        女<input type="radio" name="sex" value="female"/>

         城  市：<select>
                                       <option value="beijing" selected="selected">北京</option>
                                       <option value="shanghai">上海</option>
                                       <option value="guangzhou">广州</option>
                                       <option value="chongqing">重庆</option>
                              </select>

      兴趣爱好：<input type="checkbox" name="favo"/>编程
                           <input type="checkbox" name="favo"/>游戏
                           <input type="checkbox" name="favo"/>音乐
                           <input type="checkbox" name="favo"/>运动

      个人简介：<textarea rows="10" cols="15" name="intro" ></textarea>

            
            <input type="button" value="注册"/>
            <input type="reset" value="重置"/>

      </form>

</body>
</html>

要求：编写HTML注册表单, 需要字段: 用户名, 密码, 确认密码, 性别(单选), 城市(下拉列表), 兴趣爱好(多选), 个人简介(文本域)。然后使用JavaScript验证这个HTML表单，要求：
      1、用户名: 必须是字母数字或下划线, 不能以数字开头.
      2、密码: 6-16位字母数字下划线.
      3、确认密码: 和密码一致.
      4、其他项为必填.
自己试了很久，总是不成功，求好心人指导

谭立文 · 谭立文

本帖最后由谭立文于 2012-10-15 21:49 编辑

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
      
<head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>注册页面</title>
      <script type="text/javascript">

                     window.onload = function()
                     {

                             /*
                              * 1.当失去焦点时对输入框(username)中的数据进行校验
                              * 校验标准:
                              *    用户名: 必须是字母数字或下划线, 不能以数字开头.
                              */
                              var usernameNode = document.getElementById("username");
                           usernameNode.onblur = function()
                              {
                                      /*
                                       * 1.取出文本框中的数据
                                       */
                                    var text = usernameNode.value;
                                    /*
                                       *2.取出首字母
                                       */
                                    var firstChar = text.charAt(0);
                                       /*
                                       *3.对首字母进行判断，判断前获取显示提示信息的span node
                                       */
                                       var messageSpanNode = document.getElementById("showMessageSpan_1");
                                    if('a'<=firstChar && firstChar <='z' || 'A'<=firstChar && firstChar <='Z' || firstChar=='_'){
                                             messageSpanNode.innerText = "Ok";
                                    }
                                    else{
                                             messageSpanNode.innerText = "用户名: 必须是字母数字或下划线, 不能以数字开头";
                                    }
                              }
                     }
         function formSubmit(){

         }
      </script>
            <style type="text/css">
                     table
                     {
                              width:70%;
                              height:70%;
                              text-align:center;
                              margin-left:100px;
                              border:1px solid blue;
                     }
                     table td{
                              border:1px solid blue;
                     }
            </style>
</head>
<body>
      <form action="" method="GET">
            <table cellspacing="0">
                     <tr>
                              <td>
                                          用户名：
                              </td>
                                    <td>
                                             <input type="text" name="username" id="username"/> <span id="showMessageSpan_1"></span><br/>
                                    </td>
                     </tr>
                              <tr>
                              <td>
                                    密  码：
                              </td>
                                    <td>
                                             <input type="password" name="password" /> <br/>
                                    </td>
                     </tr>
                              <tr>
                              <td>
                                    确认密码:
                              </td>
                                    <td>
                                             <input type="password" name="repass"/> <br/>
                                    </td>
                     </tr>
                              <tr>
                                    <td>
                                             性  别：
                                    </td>
                                    <td>
                                             男<input type="radio" name="sex" value="male"/>
                                             女<input type="radio" name="sex" value="female"/>
                                    </td>
                              </tr>
                              <tr>
                                    <td>
                                             城市：
                                    </td>
                                       <td>
                                                <select>
                                             <option value="beijing" selected="selected">北京</option>
                                             <option value="shanghai">上海</option>
                                             <option value="guangzhou">广州</option>
                                             <option value="chongqing">重庆</option>
                                       </select>
                                       </td>
                              </tr>
                              <tr>
                                    <td>
                                                兴趣爱好：
                                    </td>
                                    <td>
                                             <input type="checkbox" name="favo"/>编程
                                          <input type="checkbox" name="favo"/>游戏
                                             <input type="checkbox" name="favo"/>音乐
                                             <input type="checkbox" name="favo"/>运动
                                    </td>
                              </tr>
                              <tr>
                                    <td>
                                             个人简介：
                                    </td>
                                    <td>
                                             <textarea rows="10" cols="15" name="intro"> </textarea>
                                    </td>
                              </tr>
                              <tr>
                                    <td colspan="2">
                                             <input type="button" value="注册"/><input type="reset" value="重置"/>
                                    </td>
                              </tr>
            </table>
         
      </form>
</body>
</html>
写了一个，其他的几个都类似，虽然有很多开源的框架，像JQuery，别人也是用脚本写出来的，自己也要会点，真正的还是用框架比较多，方便。

刘立波 · 刘立波

谭立文发表于 2012-10-15 21:45
注册页面

谢谢谢谢

帐号		自动登录	找回密码
密码			加入黑马

JavaScript验证相关在线等答案！！！

评分

2 个回复

评分

黑马骑士勋章

JavaScript验证相关 在线等答案！！！

评分

2 个回复

评分

黑马骑士勋章

JavaScript验证相关在线等答案！！！