利用正则表达来进行表单验证

利用正则表达来进行表单验证

步骤

根据用户输入的信息，对结果进行校验。
如果用户输入的长度有问题，提示用户：请输入6-12位字符。
如果用户输入的长度没问题，但是不是字母开头，提示用户：用户名必须以字母开头。
如果用户输入的有非字母、数字、下划线的，提示用户：用户名必须由字母数字下划线组成。

弱：纯数字，纯小写，纯大写
强：三者都有+下划线
中：两两混合。

【注意】.用户名校验最好是输入框失去焦点的时候

css案例：

<style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 250px;
      height: 250px;
      border: 1px solid;
      padding: 50px;
      text-align: center;
      background-color: #1abc9c;
      margin: 100px auto;
    }
    .box input{
      width: 250px;
      height: 30px;
      font-size: 18px;
      margin-top: 20px;
    }
    #message{
      margin-top: 5px;
      font-size: 20px;
      color: #fff;
    }
    .strongLevel{
      width: 70px;
      height: 30px;
      line-height: 30px;
      background-color: #95a5a6;
      color: #fff;
      float: left;
      margin-left: 12px;
      margin-top: 10px;
    }
   
  </style>

html代码：

<div class="box">
   <input type="text" id="userName" placeholder="请输入用户名">
   <span id="message">6~12位字符，可使用字母、数字、下划线。需以字母开头。</span>
   <input type="text" id="password" placeholder="请输入密码">
   <div class="strongLevel active">弱</div>
   <div class="strongLevel">中</div>
   <div class="strongLevel">强</div>
 </div>

js区域：

<script>
    // 用户名输入框
    let userName = document.getElementById("userName");
    // 提示信息区域
    let message = document.getElementById("message");
    userName.onblur = function(){
      // 1.获取用户输入的信息
      let value = userName.value;
      //2.判断用户名长度。
      if (value.length<6||value.length>12) {
        message.innerHTML = "请输入6-12位字符!";
        message.style.color = "red";
      } else if(!/^[a-zA-Z]/.test(value)){
        // 3.判断用户名是否以字母开头
        message.innerHTML = "用户名必须以字母开头!";
        message.style.color = "red";
      }else if(/\W/.test(value)){
        // 4. 只能由字母数字下划线组成
        message.innerHTML = "用户名必须由字母数字下划线组成!";
        message.style.color = "red";
      }else{
        message.innerHTML = "该用户名可以注册!";
        message.style.color = "green";
      }
    }

    // 密码框的校验是在用户输入的时候。
    var password = document.querySelector("#password");
    var level = document.querySelectorAll(".strongLevel");
    password.onkeyup = function(){
      // 先把所有的其他颜色清除
      for (var i = 0; i < level.length; i++) {
         level[i].style.backgroundColor = "#95a5a6"
         level[i].style.color = "#fff";
      }
      // 1。获取用户输入的内容
      var psw = password.value;
      // 2.弱：纯数字，纯小写，纯大写
      if (/^\d+$/.test(psw)||/^[a-z]+$/.test(psw)||/^[A-Z]+$/.test(psw)) {
        level[0].style.backgroundColor = "red";
      } else if(/\d/.test(psw)&&/[a-z]+/.test(psw)&&/[A-Z]+/.test(psw)&&/_/.test(psw)){
        level[2].style.backgroundColor = "green";
      }else{
        level[1].style.backgroundColor = "yellow";
        level[1].style.color = "black";
      }
    }
  </script>

效果图：