javascript笔记——登录表单验证

1.创建登录界面

https://www.cnblogs.com/YorkZhangYang/p/12538576.html

 

2.表单验证（使用正则表达式）

（1）验证用户名：2-12位，字母开头，不能有_$之外的特殊字符,非空

（2）验证密码:6-12位非空，字母开头，非空

（3）验证码不为空

3.代码

 <script>
        //获取要验证的表单对象
        let username = document.getElementById("username");
        let password = document.getElementById("password");
        let validatecode = document.getElementById("validateCode");
        let span = document.getElementById("tip");
        
          username.onblur=function()
          {
            vailidateUserName();
          }

          password.onblur=function()
          {
            validatePassword();
          }

          validatecode.onblur=function()
          {
            validateCode();
          }
        //验证用户名
        function vailidateUserName() {
          //2-12位，字母开头，不能有_$之外的特殊字符
          let reg = /^[a-zA-Z][\w$]{1,11}$/;
          let value= username.value;
          if(!value)
          {
            span.innerHTML = "用户名不能为空";
            return false;
          }
          else if(!reg.test(value))
          {
            span.innerHTML = "用户名2-12位，字母开头，不能有_$之外的特殊字符";
            return false;
          }
          else
          {
            span.innerHTML = "";
            return true;
          }
          
        }

        //验证密码
        function validatePassword()
        {
          let value = password.value;
          //字母正则表达式
          let reg = /^[a-zA-Z]$/;
          let firstWord = value.charAt(0);
          if(!value)
          {
            span.innerHTML = "密码不能为空";
            return false;
          }
          else if(!reg.test(firstWord))
          {
            span.innerHTML = "密码首位应该是字母";
            return false;
          }
          else if(value.length>12||value.length<6)
          {
            span.innerHTML = "密码的长度为6-12位";
            return false;
          }
          else
          {
            span.innerHTML = "";
            return true;
          }

        }

        //验证码不能为空
        function validateCode()
        {
          let value  = validatecode.value;
          if(!value)
          {
            span.innerHTML = "验证码不能为空";
            return false;
          }
          else
          {
            span.innerHTML = "";
            return true;
          }
        }

         $("#submitBtn").click(function(){
              if(vailidateUserName()&&validatePassword()&&validateCode())
              {
                document.getElementById("loginForm").submit();
              }
              else
              {
                span.innerHTML = "表单未正确填写";
                return false;
              }
         });
          
          
        </script>

 

参考文章

https://www.cnblogs.com/lpzpp/p/11502838.html