一个注册表单的实现

最新推荐文章于 2023-02-24 23:36:57 发布

335046781

最新推荐文章于 2023-02-24 23:36:57 发布

阅读量128

点赞数

原文链接：http://www.cnblogs.com/xue-xu-hao/p/5985284.html

版权

<html>
<head>
<script>
   //检查用户名
   function checkName(){
       //获取输入框的内容
       var content = document.getElementById("uesrName").value;
       //获取span标签的节点
       var spanNode = document.getElementById("userId");
       //定义用户名的规则:：六位的英文与数字组成。数字不能开头
       var reg = /^[a-z][a-z0-9]{5}$/i;
       //判断是否符合规则
       if(reg.test(content)){
           //符合规则，返回true
           spanNode.innerHTML = "正确".fontcolor("grean");
           return true;
       }else{
           //不符合规则，返回false
           spanNode.innerHTML = "错误".fontcolor("red");
           return false;
       }
   }
   //检查密码
   function checkpwd(){
       //获取密码框的内容
       var password = document.getElementById("password").value;
       //获取span标签的节点
       var spanNode = document.getElementById("pwdId");
       //定义密码的规则
       var reg = /^[a-z]{6,12}$/i
       //判断是否符合规则
       if(reg.test(password)){
           //符合规则，返回true
           spanNode.innerHTML = "正确".fontcolor("grean");
           return true;
       }else{
           //不符合规则，返回false
           spanNode.innerHTML = "错误".fontcolor("red");
           return false;
       }
   }
   //检查确认密码
   function ensurepass(){
       //获取密码框的内容
       var password = document.getElementById("password").value;
       //获取确认密码框的内容
       var ensurepwd = document.getElementById("ensurepwd").value;
       //获取span标签的节点
       var spanNode = document.getElementById("ensureId");
       //判断两个密码是否相等
       if(password != ""){
           if(password == ensurepwd){
               //相等，返回true
               spanNode.innerHTML = "正确".fontcolor("grean");
               return true;
           }
       }else{
           //不相等，返回false
           spanNode.innerHTML = "错误".fontcolor("red");
           return false;
       }
   }
   //检查邮箱
   function checkEmail(){
       var email = document.getElementById("email").value;
       //获取span标签的节点
       var spanNode = document.getElementById("emailId");
       var reg = /^[a-z0-9]\w+@[a-z0-9]+(\.[a-z]{2,3}){1,2}$/i
       //判断是否符合规则
       if(reg.test(email)){
           //符合规则，返回true
           spanNode.innerHTML = "正确".fontcolor("grean");
           return true;
       }else{
           //不符合规则，返回false
           spanNode.innerHTML = "错误".fontcolor("red");
           return false;
       }
   }
   //检查表单是否能提交
   function checkAll(){
       /*获取用户名，密码，确认密码以及邮箱的返回值并判断是否都为真，都为真返回true，否则返回false*/
       var userName = checkName();
       var password = checkpwd();
       var ensurepwd = ensurepass();
       var email =   checkEmail();
       if(userName&&password&&ensurepwd&&email){
           return true;
       }else{
           return false;
       }
   }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

   <form action="success.html" method="get" οnsubmit="return checkAll()">
       <table border="1px" align="center" width="400px" height="400px">
           <tr>
               <td>姓名:</td>
               <td>
                   <input type="text" name="userName" id="uesrName" οnblur="checkName()" /><span id="userId"></span>
               </td>
           </tr>
           <tr>
               <td>密码:</td>
               <td>
                   <input type="password" name="password" id="password" οnblur="checkpwd()" /><span id="pwdId"></span>
               </td>
           </tr>
           <tr>
               <td>确认密码:</td>
               <td>
                   <input type="password" name="ensurepwd" id="ensurepwd" οnblur="ensurepass()" /><span id="ensureId"></span>
                  </td>
           </tr>
              <tr>
               <td>邮箱</td>
               <td>
                   <input type="text" name="email" id="email" οnblur="checkEmail()" /><span id="emailId"></span>
               </td>
           </tr>
           <tr>
               <td>性别</td>
               <td>
                   <input type="radio" checked="true" value="man" name="sex" />男<input type="radio" value="womam" name="sex" />女
               </td>
           </tr>
           <tr>
               <td>爱好:</td>
               <td>
                   <input type="checkbox" name="hobby" value="eat" />eat
                      <input type="checkbox" name="hobby" value="sleep" />sleep
                   <input type="checkbox" name="hobby" value="play" />play
               </td>
           </tr>
              <tr>
               <td>城市</td>
                  <td>
                   <select name="city">
                       <option value="">请选择</option>
                       <option value="BJ">北京</option>
                       <option value="GZ">广州</option>
                       <option value="SH">上海</option>
                   </select>
               </td>
            </tr>
            <tr>
               <td>自我介绍</td>
               <td>
                   <textarea name="intro" cols="15" rows="5"></textarea>
               </td>
            </tr>
            <tr>
               <td colspan="2" align="center">
                   <input type="submit" />
               </td>
            </tr>
    </table>
</form>
</body>
</html>