JS正则验证用户登录和注册

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      ul {
        list-style: none;
      }
    </style>
  </head>
  <body>
    <form action="" mehtods="get">
      <ul>
        <li>
          <lable>电&nbsp;&nbsp;&nbsp;话(Tel)&nbsp;&nbsp;&nbsp;&nbsp;</lable
          ><input type="text" id="ipt" /> <span class=""></span>
        </li>
        <li>
          <lable>QQ&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</lable
          ><input type="text" id="qq" /><span></span>
        </li>
        <li>
          <lable>用户名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</lable
          ><input type="text" id="un" /><span></span>
        </li>
        <li>
          <lable>请您输入验证码</lable><input type="text" id="msg" /><span></span>
        </li>
        <li>
          <lable>请您输入密码</lable><input type="text" id="pwd" /><span></span>
        </li>
        <li>
          <lable>请确认输入密码</lable>
          <input type="text" id="surepwd" /><span></span>
        </li>
        <li><button id="btn">按钮</button></li>
      </ul>
    </form>
    <script>
      // let qq = 2472649786;
      console.log(/^1[3-9]\d{9}$/.test("13000000000")); // 手机号验证码
      console.log(/^[1-9]\d{4,}$/.test("2472649786")); // qq好验证码
      console.log(/^[\u4e00-\u9fa5]{2,8}$/.test("爱你思密达")); // 验证用户名
      console.log(/^\d{6}$/.test("123678")); // 验证6位数的验证码
      console.log(/^[a-zA-Z0-9_-]{6,16}$/.test("bai0000")); // 验证密码
      let tel = /^1[3-9]\d{9}$/; // 手机号码验证
      let qq = /^[1-9]\d{4,}$/; // qq号码验证
      let un = /^[a-zA-Z0-9\u4e00-\u9fa5]{2,8}$/; // 用户名验证
      let msg = /^\d{6}$/; // 6位数验证码
      let pwd = /^[a-zA-Z0-9_-]{6,16}$/; // 密码验证
      let ipt = document.querySelector("#ipt");
      let qqs = document.querySelector("#qq");
      let uns = document.querySelector("#un");
      let mg = document.querySelector("#msg");
      let pd = document.querySelector("#pwd");
      let btn = document.querySelector("#btn");
      let surepwd = document.querySelector("#surepwd");
      regexp(ipt, tel);
      regexp(qqs, qq);
      regexp(uns, un);
      regexp(mg, msg);
      regexp(pd, pwd);
      btn.onclick = () => {
        let i = ipt.value;
        let q = qqs.value;
        let u = uns.value;
        let m = mg.value;
        let p = pd.value;
        console.log(i);
        console.log(q);
        console.log(u);
        console.log(m);
        console.log(p);
        ipt.value = null;
        qqs.value = null;
        uns.value = null;
        mg.value = null;
        pd.value = null;
        let flag = false;
      };
      function regexp(ele, reg) {
        ele.onblur = function () {
          if (reg.test(this.value)) {
            // console.log('正确的');
            this.nextElementSibling.className = "success";
            this.nextElementSibling.innerHTML =
              '<i class="success_icon"></i> 恭喜您输入正确';
          } else {
            // console.log('不正确');
            this.nextElementSibling.className = "error";
            this.nextElementSibling.innerHTML =
              '<i class="error_icon"></i> 格式不正确，请从新输入 ';
          }
        };
      }

      surepwd.onblur = function () {
        if (this.value == pd.value) {
          this.nextElementSibling.className = "success";
          this.nextElementSibling.innerHTML =
            '<i class="success_icon"></i> 恭喜您输入正确';
        } else {
          this.nextElementSibling.className = "error";
          this.nextElementSibling.innerHTML =
            '<i class="error_icon"></i> 两次密码输入不一致';
        }
      };
    </script>
  </body>
</html>
原文链接：https://blog.csdn.net/weixin_46005715/article/details/115495218