【JS】正则验证用户名，密码，重复密码，密码强度

要求：
1.用户名 用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符
2.密码的规则 数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强,6-20个字符
3.重复密码 跟第一次输入 密码一致
4.提交按钮的时候，判断所有输入数据是否符合。符合跳转，否，不跳

HTML

    用户名：<input type="text" name="" id="user" value="" /><span></span><br />
    密码：<input type="text" name="" id="pass" value="" /><span></span><br />
    重复密码：<input type="text" name="" id="pass2" value="" /><span></span
    ><br />
    <input type="button" name="btn" id="btn" value="提交" /><span></span>

JS

<script>
      //		1.用户名           用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符
      //		3.重复密码            跟第一次输入 密码一致
      //		6.提交按钮的时候，判断所有输入数据是否符合。符合跳转，否，不跳

      var userObj = document.getElementById("user"); //用户
      var pwdObj = document.getElementById("pass"); //密码
      var rePwdObj = document.getElementById("pass2"); //重复密码
      var input = document.querySelector("#btn"); //提交按钮
      //用户正则
      var userReg = /^[\u4e00-\u9fa5\w-]{4,20}$/;

      var flag = 1;

      //验证用户名
      userObj.onblur = function () {
        var state = userReg.test(this.value);
        if (state) {
          flag = 1;
          userObj.nextElementSibling.innerHTML = "输入正确";
          userObj.nextElementSibling.style.color = "green";
        } else {
          flag = 0;
          userObj.nextElementSibling.innerHTML = "输入错误";
          userObj.nextElementSibling.style.color = "red";
        }
      };
      //2.密码的规则  数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强,6-20个字符
      pwdObj.onblur = function () {
        if (this.value.length >= 6 && this.value.length <= 20) {
          var a = 0;
          var b = 0;
          var c = 0;
          var pwdReg1 = /\d+/;//密码正则1
          var pwdReg2 = /[a-z]+/i;//密码正则2
          var pwdReg3 = /\W+/;//密码正则3
          if (pwdReg1.test(this.value)) {
            a = 1;
          }
          if (pwdReg2.test(this.value)) {
            b = 1;
          }
          if (pwdReg3.test(this.value)) {
            c = 1;
          }
          switch (a + b + c) {
            case 0:
              flag = 0;
              pwdObj.nextElementSibling.innerHTML = "输入格式错误";
              pwdObj.nextElementSibling.style.color = "red";
              break;
            case 1:
              flag = 1;
              pwdObj.nextElementSibling.innerHTML = "密码强度：弱";
              pwdObj.nextElementSibling.style.color = "green";
              break;
            case 2:
              flag = 1;
              pwdObj.nextElementSibling.innerHTML = "密码强度：中";
              pwdObj.nextElementSibling.style.color = "green";
              break;
            case 3:
              flag = 1;
              pwdObj.nextElementSibling.innerHTML = "密码强度：强";
              pwdObj.nextElementSibling.style.color = "green";
          }
        } else {
          flag = 0;
          pwdObj.nextElementSibling.innerHTML = "长度错误";
          pwdObj.nextElementSibling.style.color = "red";
        }
      };

      rePwdObj.onblur = function () {
        var pwdValue = pwdObj.value;
        if (rePwdObj.value != pwdObj.value) {
          flag = 0;
          rePwdObj.nextElementSibling.innerHTML = "与输入密码不同";
          rePwdObj.nextElementSibling.style.color = "red";
        } else {
          flag = 1;
          rePwdObj.nextElementSibling.innerHTML = "输入无误";
          rePwdObj.nextElementSibling.style.color = "green";
        }
      };

      // console.log(Boolean(1));
      input.onclick = function () {
        if (!flag) {
          input.nextElementSibling.innerHTML = "输入内容有误，请重新填写后提交";
          input.nextElementSibling.style.color = "red";
          return false;
        } else {
          input.nextElementSibling.innerHTML = "输入正确，已进行提交";
          input.nextElementSibling.style.color = "green";
        }
      };
    </script>