前端开发——利用js验证用户注册信息

最新推荐文章于 2024-05-10 11:31:41 发布
不如不熬夜
最新推荐文章于 2024-05-10 11:31:41 发布
阅读量1.2k
点赞数 2
分类专栏：前端文章标签： javascript html html5
本文链接：https://blog.csdn.net/Chen_Sir____/article/details/105517918
版权
前端专栏收录该内容
7 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册界面</title>
    <style type="text/css">
      span{
          font-size: 16spx;
          color: red;
      }
      p{
          font-size: 16px;
          color: red;
      }
      fieldset{
          width: 500px;
          background-color: paleturquoise;
      }
    </style>

    <script type="text/javascript">
    
    //用户名不为空验证

      //事件在整个html页面完全加载之后发生
      window.onload = function(){
          //获得填写用户名的文本框
          var usernameElt = document.getElementById("username");
          //获得用户名的值
          var username = usernameElt.value;
          //去除前后空白
          username = username.trim();
          //获取错误提示的span标签
          var usernameErrorSpan = document.getElementById("usernameError")

          //给用户名绑定blur事件，用于输出用户名不为空的提示信息
          usernameElt.onblur = function(){
             //判断用户名是否为空，若是空，则给出警告
          if(username){
                //用户名在6~14位之间
                if(username.length<6 ||username.length>14){
                    usernameErrorSpan.innerText = "用户名长度必须在6~14位之间"
                }
                else{
                    var regExp = /^[A-Za-z0-9]+$/;
                    var ok = regExp.test(username)
                    if(ok){
                        //合法
                    }else{
                        //不合法
                        usernameErrorSpan.innerText = "用户名只能由数字和字母组成，不能含有其他符号"
                    }
                }
            }else{
                usernameErrorSpan.innerText = "用户名不能为空"
            }
           
          }
          //给用户名绑定focus事件，用于清空提示信息和错误信息
         usernameElt.onfocus = function(){
            if(usernameErrorSpan.innerText != ""){
                usernameElt.value = ""
            } 
            usernameErrorSpan.innerText = ""
            
           
          }
      



    
          //失去焦点验证
          //获得填写密码的文本框
          var passwordElt = document.getElementById("password");
          //获得填写的密码值
          var password = passwordElt.value;
          //获得错误提示的span标签
          var passwordErrorSpan = document.getElementById("passwordError")
          //失去焦点验证
          passwordElt.onblur = function(){
               //判断密码框是否为空
                if(password){
                    //判断是否在6-24位之间
                    if(password.length<6 ||password.length>24){
                        passwordErrorSpan.innerText = "密码必须在6~24位之间"
                    }
                 }else{
                      passwordErrorSpan.innerText = "密码不能为空"
                }
          }
          //获得焦点验证
          passwordElt.onfocus = function(){
              if( passwordErrorSpan.innerText != ""){
                  passwordElt.value = ""
              }
              passwordErrorSpan.innerText = ""
          }     
         
      

        //确认密码和密码一致
          //获得密码的值
          var passwordElt = document.getElementById("password");
          var password = passwordElt.value;
          //获得确认密码的值
          var pwdElt = document.getElementById("pwd");
          var pwd = pwdElt.value;
          //获取错误提示的span标签
          var pwdErrorSpan = document.getElementById("pwdError")
          //为确认密码框注册blur事件
          pwdElt.onblur = function(){
              if(pwd){
                  if(password != pwd){
                   pwdErrorSpan.innerText = "确认密码和密码不一致"
                    }
              }else{
                pwdErrorSpan.innerText = "确认密码不能为空"
              }
               
          }

          //为确认密码框注册focus事件
          pwdElt.onfocus = function(){
              if(pwdErrorSpan.innerText !=""){
                  pwdElt.value = ""
              }
              pwdErrorSpan.innerText = ""
          }
         
      




    //手机号验证
   
          //获得填写手机号的文本框
          var phoneNumberElt = document.getElementById("phoneNumber");
          //获得用户名的值
          var phoneNumber = phoneNumberElt.value;
          //获取错误提示的span标签
          var phoneNumberErrorSpan = document.getElementById("phoneNumberError")
          //给手机号文本框绑定blur事件，用于输出手机号不为空的提示信息
          phoneNumberElt.onblur = function(){
             //判断手机号是否为空，若是空，则给出警告
          if(phoneNumber){
                var regExp = /^0?(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[89])[0-9]{8}$/;
                var ok = regExp.test(phoneNumber)
                if(ok){
                    //合法
                }else{
                    //不合法
                phoneNumberErrorSpan.innerText = "请输入正确的手机号"
                }
         }else{
               phoneNumberErrorSpan.innerText = "手机号不能为空"
         }
           
          }
          //给用户名绑定focus事件，用于清空提示信息和错误信息
        phoneNumberElt.onfocus = function(){
            if(phoneNumberErrorSpan.innerText != ""){
                phoneNumberElt.value = ""
            } 
            phoneNumberErrorSpan.innerText = "" 
          }
      


      //验证正确的邮箱地址
      //事件在整个html页面完全加载之后发生
  
          //获得填写e-mail的文本框
          var emailElt = document.getElementById("email");
          //获得e-mail的值
          var email = emailElt.value;
          //获取错误提示的span标签
          var emailErrorSpan = document.getElementById("emailError")
          //给e-mail文本框绑定blur事件，用于输出邮箱为空的提示信息
          emailElt.onblur = function(){
             //判段e-mail是否为空，若是空，则给出警告
          if(email){
                var regExp = /^([a-zA-Z0-9]*[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                var ok = regExp.test(email)
                if(ok){
                    //合法
                }else{
                    //不合法
                emailErrorSpan.innerText = "请输入正确的邮箱"
                }
         }else{
               emailErrorSpan.innerText = "邮箱不能为空"
         }
           
          }
          //给邮箱文本框绑定focus事件，用于清空提示信息和错误信息
        emailElt.onfocus = function(){
            if(emailErrorSpan.innerText != ""){
                emailElt.value = ""
            } 
            emailErrorSpan.innerText = "" 
          }




          //验证身份证
         //获得填写身份证的文本框
          var IDcardElt = document.getElementById("IDcard");
          //获得身份证的值
          var IDcard = IDcardElt.value;
          //获取错误提示的span标签
          var IDcardErrorSpan = document.getElementById("IDcardError")
          //给身份证文本框绑定blur事件，用于输出身份证为空格的提示信息
          IDcardElt.onblur = function(){
             //判段身份证是否为空，若是空，则给出警告
          if(IDcard){
                var regExp = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
                var ok = regExp.test(IDcard)
                if(ok){
                    //合法
                }else{
                    //不合法
                IDcardErrorSpan.innerText = "请输入正确的身份证号"
                }
         }else{
               IDcardErrorSpan.innerText = "身份证号不能为空"
         }
           
          }
          //给身份证文本框绑定focus事件，用于清空提示信息和错误信息
            IDcardElt.onfocus = function(){
            if(IDcardErrorSpan.innerText != ""){
                IDcardElt.value = ""
            } 
            IDcardElt.innerText = "" 
          }




          //当所有内容都合法的时候允许提交
          //获得提交按钮的对象
          var submitBtnElt = document.getElementById("submitBtn");
          submitBtnElt.onclick = function(){
              //触发username、password、pwd、e-mail、phoneNumber、IDcard
              usernameElt.focus();
              usernameElt.blur();
              
              passwordElt.focus();
              passwordElt.blur();

              pwdElt.focus();
              pwdElt.blur();

              emailElt.focus();
              emailElt.blur();

              phoneNumberElt.focus();
              phoneNumberElt.blur();

              IDcardElt.focus();
              IDcardElt.blur();

              if(usernameErrorSpan.innerText =="" && passwordErrorSpan.innerText == "" &&pwdErrorSpan.innerText =="" && emailErrorSpan.innerText =="" && phoneNumberErrorSpan.innerText =="" && IDcardErrorSpan.innerText == ""){
                    //获取表单对象
                    var userFormElt = document.getElementById("userForm")
                    //提交表单
                    userFormElt.submit();
              }
          }







      }





    </script>
</head>
<body>
    <div align="center">
        <form action="" method="GET" id="userForm">
            <fieldset>
                <legend align="center">注册</legend><br/>
                <table>
                    <tr>
                        <th>用户名：</th>
                        <td>
                            <input type="text" name="username" id="username"/>
                        </td>
                        <td>
                            <span id="usernameError"></span>
                        </td>
                    </tr>
                    <tr>
                        <th>密码：</th>
                        <td>
                            <input type="password" name="password" id="password"/>
                        </td>
                        <td>
                            <span id="passwordError"></span>
                        </td>
                    </tr>
                    <tr>
                        <th>确认密码：</th>
                        <td>
                            <input type="password" id="pwd"/>
                        </td>
                        <td>
                            <span id="pwdError"></span>
                        </td>
                    </tr>
                    <tr>
                        <th>手机号：</th>
                        <td>
                            <input type="text" name="phoneNumber" id="phoneNumber"/>
                        </td>
                        <td>
                            <span id="phoneNumberError"></span>
                        </td>
                    </tr>
                    <tr>
                        <th> e-mail:</th>
                        <td>
                            <input type="text" name="e-mail" id="email"/>
                        </td>
                        <td>
                            <span id="emailError"></span>
                        </td>
                    </tr>
                    <tr>
                        <th>性别</th>
                        <td>
                            <input type="radio" name="sex" value="male" /> 男
                            <input type="radio" name="sex" value="female" /> 女
                        </td>
                        <td>
                        
                        </td>
                    </tr>
                    <tr>
                        <th>爱好</th>
                        <td>
                            <input type="checkbox" name="hobby" value="cy" /> 抽烟
                            <input type="checkbox" name="hobby" value="hj" />喝酒
                            <input type="checkbox" name="hobby" value="tt" /> 烫头
                        </td>
                        <td>

                        </td>
                    </tr>
                    <tr>
                        <th> 身份证号：</th>
                        <td>
                            <input type="text" name="IDcard" id="IDcard"/>
                        </td>
                        <td>
                            <span id="IDcardError"></span>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input type="button" value="提交" name="submit" id="submitBtn"/>
                            <input type="reset" value="重置" name="reset" id="reset"/>
                        </td>
                        <td>

                        </td>
                    </tr>
                </table>
                <p>*出现错误提示后，改正后手动刷新即可消失*</p>
            </fieldset>
        </form>
    </div>
</body>
</html>
不如不熬夜
关注
2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
前端开发——利用js验证用户注册信息

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用户注册界面</title> <style type="text/css"> span{ font-size: 16sp...
复制链接

扫一扫
专栏目录