使用正则判断表单提交（用户名，密码，确认密码，手机号和onsubmit）

闰土老哥
306 阅读2分钟

1.png

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .pAll {
        font-family: "黑体";
        margin: 50px auto;
      }
      #titles {
        font-weight: bold;
        font-size: 18px;
        height: 50px;
        line-height: 50px;
        background: #fff9f3;
        text-align: center;
        border: 1px solid #ccc;
      }
      #contents {
        margin-top: 20px;
        background: #fff9f3;
        border: 1px solid #ccc;
      }
      #form-itemGroup {
        padding: 10px;
      }
      #form-itemGroup label {
        display: inline-block;
        width: 100px;
        height: 32px;
        line-height: 32px;
        color: #666;
        text-align: right;
      }
      #form-itemGroup .userName {
        width: 200px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #ccc;
      }
      #form-itemGroup .default {
        width: 200px;
        height: 32px;
        line-height: 32px;
        color: #999;
      }
      #form-itemGroup .error {
        height: 32px;
        line-height: 32px;
        color: #f00;
      }
      #form-itemGroup input.error {
        outline-color: #f00;
        border-color: #f00;
      }
      #form-itemGroup .success {
        height: 32px;
        line-height: 32px;
        color: #096;
      }
      #form-itemGroup input.success {
        outline-color: #096;
        border-color: #096;
      }
      .pBtn {
        margin-top: 20px;
        margin-left: 200px;
        width: 100px;
        height: 32px;
        line-height: 32px;
        background-color: #f93;
        margin-bottom: 10px;
        color: #ffffff;
        font-weight: bold;
        border: none;
      }
      form {
        margin-left: 500px;
      }
    </style>
  </head>
  <body>
    <div class="pAll">
      <div id="titles">新用户注册</div>
      <div id="contents">
        <form action="#" onSubmit="">
          <p id="form-itemGroup">
            <label for="userName">用户名：</label>
            <input type="text" id="userName" class="userName" />
            <span class="default" id="nameErr">请输入真实姓名</span>
          </p>
          <p id="form-itemGroup">
            <label for="userPasword">密码：</label>
            <input type="password" id="userPasword" class="userName" />
            <span class="default" id="passwordErr"
              >6到20个字符，至少包含一位数字，一个大写字母，一个小写字母和一个特殊符号（@＃$％）</span
            >
          </p>
          <p id="form-itemGroup">
            <label for="userConfirmPasword">确认密码：</label>
            <input type="password" id="userConfirmPasword" class="userName" />
            <span class="default" id="conPasswordErr"
              >请再输入一遍密码, 必须和原密码保持一致</span
            >
          </p>
          <p id="form-itemGroup">
            <label for="userPhone">手机号码：</label>
            <input type="text" id="userPhone" class="userName" />
            <span class="default" id="phoneErr">请输入11位手机号码</span>
          </p>
          <p>
            <button type="submit" class="pBtn" id="pBtn">注册</button>
          </p>
        </form>
      </div>
    </div>
  </body>
  <script>
    // 要操作输入中文名的那个input框
    var userName = document.getElementById("userName");

    var nameError = document.getElementById("nameErr");

    // 把检测都放到一个函数里面，鼠标聚焦的时候就执行这个函数
    // 检测用户名的函数
    var checkUserName = function () {
      // 看看输入的是不是符合中文名的正则表达式
      // 正则的书写是以什么开始以什么结束，要几位
      // 中文名的正则网上有，百度
      var userNameRegx = /^[\u4e00-\u9fa5]{2,4}$/;
      // 如果还没有输入
      if (!this.value) {
        // 就把变红的类加在原有的类后面(用空格和原有的类分开)
        this.className = "userName error";
        // 输入框后面的文字也变成红色
        nameError.className = "error";
        // 并且文字改成“此项必填”
        nameError.innerHTML = "此项必填";
        // return结束 不往下走
        return false;
      }
      // 如果往下能走到这一步，就判断输入是不是符合正则
      if (!userNameRegx.test(this.value)) {
        // 如果不符合，继续加上错误的类
        this.className = "userName error";
        // 输入框后面的文字也改
        nameError.className = "error";
        nameError.innerHTML = "格式不正确";
        // return 结束
        return false;
      }
      // 输入了，也符合正则，那么加上css里面定义好的类
      this.className = "userName success";
      nameError.innerHTML = "用户名正确";
    };

    // 失去焦点的时候，执行定义好的函数
    // 这里不要在函数后面加括号，不然就是进来就执行了，要点了才调用函数
    // 不是调用函数的结果
    userName.onblur = checkUserName;

    // 下面开始写密码部分
    // 输入密码输入框
    var userPasword = document.getElementById("userPasword");
    // 输入框后面的文字
    var passwordErr = document.getElementById("passwordErr");

    var checkpassword = function () {
      // 看看输入的是不是符合密码的正则
      // 必须包含字母、数字和特殊字符的，
      // 正则表达式为 "^(?![0-9]+$)(?![a-zA-Z]+$)(?![0-9a-zA-Z]+$)(?![0-9\\W]+$)(?![a-zA-Z\\W]+$)[0-9A-Za-z\\W]{6,18}$"
      var userPaswordRegx = /^(?=.*\d)(?=.*[A-Z])(?=.*[a-z]).{6,20}$/;
      // /^(?![0-9]+$)(?![a-zA-Z]+$)(?![0-9a-zA-Z]+$)(?![0-9\\W]+$)(?![a-zA-Z\\W]+$)[0-9A-Za-z\\W]{6,20}$/;
      // 如果还没有输入
      if (!this.value) {
        // 就把变红的类加在原有的类后面(用空格和原有的类分开)
        this.className = "userPasword error";
        // 输入框后面的文字也变成红色
        passwordErr.className = "error";
        // 并且文字改成“此项必填”
        passwordErr.innerHTML = "此项必填";
        // return结束 不往下走
        return false;
      }
      // 如果往下能走到这一步，就判断输入是不是符合正则
      if (!userPaswordRegx.test(this.value)) {
        // 如果不符合，继续加上错误的类
        this.className = "userName error";
        // 输入框后面的文字也改
        passwordErr.className = "error";
        passwordErr.innerHTML = "格式不正确";
        // return 结束
        return false;
      }
      // 输入了，也符合正则，那么加上css里面定义好的类
      this.className = "userPasword success";
      passwordErr.innerHTML = "密码正确";
    };
    // 鼠标聚焦开始执行函数

    userPasword.onblur = checkpassword;

    // 确认密码部分
    // 确认密码输入框和后面的文字
    var userConfirmPasword = document.getElementById("userConfirmPasword");

    var conPasswordErr = document.getElementById("conPasswordErr");
    // 定义一个确认密码函数
    var checkConfirmPasword = function () {
      // 确认密码框里面如果没输入
      if (!userConfirmPasword.value) {
        // 就把他的css里面的类改成错误的类
        this.className = "userConfirmPasword error";
        // 确认密码后面的文字也要改
        conPasswordErr.innerHTML = "请再次输入密码";
        return false;
      }
      // 如果不为空，就判断确认密码的value 和原来输入密码框的value是否相等
      if (userConfirmPasword.value !== userPasword.value) {
        // 继续把错误的类加上，并且文字改成‘两次密码不一致’
        this.className = "userConfirmPasword error";
        // 确认密码后面的文字也要改
        conPasswordErr.innerHTML = "两次密码不一致";
      }
      // 输入了，也一致了，就加上正确的类
      this.className = "userConfirmPasword success";
      conPasswordErr.innerHTML = "密码一致";
    };
    // 输入框失去焦点的时候，就执行确认密码函数

    userConfirmPasword.onblur = checkConfirmPasword;

    // 检测手机号
    // 找到手机号输入框和后面的文字部分

    var userPhone = document.getElementById("userPhone");

    var phoneErr = document.getElementById("phoneErr");
    // 定义一个检测手机号的函数，checkUserPhone 当输入框失去焦点的时候，执行函数

    var checkPhoneNumber = function () {
      if (!this.value) {
        this.className = "userPhone error";
        phoneErr.innerHTML = "此项必填";
        return false;
      }
      // 如果有内容，判断是否符合正则
      var userPhoneRegx =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      // 用正则去检测
      if (!userPhoneRegx.test(this.value)) {
        this.className = "userPhone error";
        phoneErr.innerHTML = "格式不正确";
        return false;
      }
      // 输入了，也符合正则了，就把正确的类和文字加上去
      this.className = "userPhone success";
      phoneErr.innerHTML = "输入正确";
    };
    userPhone.onblur = checkPhoneNumber;

    // 最后是注册按钮的点击事件
    // 点击最后的注册按钮button会自动触发form的提交事件onsubmit
    // onsubmit执行的时候，网页里面加入了所有已经输入的内容，显示表单已提交
    // 所以每一次表单提交.onsubmit，都执行上面的所有内容
    var formObj = document.querySelector("form");
    formObj.onsubmit = function () {
      var result =
        checkUserName.call(userName) &&
        checkpassword.call(userPasword) &&
        checkConfirmPasword.call(userConfirmPasword) &&
        checkPhoneNumber.call(userPhone);
      if (!result) {
        return false;
      }
      alert("正常提交");
    };
  </script>
</html>
avatar
文章
阅读
粉丝