简单的表单验证

2023-10-04 08:54:58
1.用户名不能为空
2.用户名必须在6-14位之间
3.用户名只能有数字字母组成，不能含有特殊符号（正则表达式）
4.密码和确认密码一致，邮箱地址合法。
5.统一失去焦点验证
6.文本框再次获取焦点后，清空错误提示信息，如果文本框内容不合法，清空value
7.全部合法才可提交
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单验证</title>
    <style type="text/css">
      span {
        color: red;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <script>
      window.onload = function () {
        var usernameEltSpan = document.getElementById("usernameError");
        //给用户名文本框绑定blur事件
        var usernameElt = document.getElementById("username");
        usernameElt.onblur = function () {
          //获取用户名
          var username = usernameElt.value;
          //去除前后空白
          username = username.trim();
          //判断用户名是否为空
          var usernameEltSpan = document.getElementById("usernameError");
          if (username === "") {
            usernameEltSpan.innerText = "用户名不能为空";
          } else {
            if (username.length < 6 || username.length > 14) {
              //用户名长度非法
              usernameEltSpan.innerText = "用户名长度必须在【6-14之间】";
            } else {
              //用户名长度合法，继续判断是否有特殊符号
              var regExp = /^[A-Za-z0-9]+$/;
              var ok = regExp.test(username);
              if (ok) {
                //用户合法
              } else {
                //用户名中含有特殊符号
                usernameEltSpan.innerText = "用户名只能由数字和字母组成";
              }
            }
          }
          usernameElt.onfocus = function () {
            //清空非法value
            if (usernameEltSpan.innerText != "") {
              usernameElt.value = "";
            }
            //清空span
            usernameEltSpan.innerText = "";
          };
        };

        //获取密码错误的span标签
        var paswordErrorSpan = document.getElementById("paswordError");
        //获取确认密码框对象
        var pwordElt = document.getElementById("pword");
        //绑定blur事件
        pwordElt.onblur = function () {
          var passwordElt = document.getElementById("password");
          //获取密码
          var password = passwordElt.value;
          //获取确认密码
          var pword = pwordElt.value;
          if (password != pword) {
            //密码不同
            paswordErrorSpan.innerText = "密码不相同";
          } else {
            //密码相同
          }
        };

        //给确认密码绑定focus事件
        pwordElt.onfocus = function () {
          if (paswordErrorSpan.innerText != "") {
            pwordElt.value = "";
          }
          paswordErrorSpan.innerText = "";
        };

        //邮箱
        var emailSpan = document.getElementById("emailError");
        var emailElt = document.getElementById("email");
        //给Email绑定blur事件
        emailElt.onblur = function () {
          //获取email
          var email = emailElt.value;
          var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
          var ok = emailRegExp.test(email);
          if (ok) {
            //合法
          } else {
            //不合法
            emailSpan.innerText = "邮箱地址不合法";
          }
        };

        //给邮箱绑定focus
        emailElt.onfocus = function () {
          if (emailSpan.innerText != "") {
            emailElt.value = "";
          }
          emailSpan.innerText = "";
        };

        //给提交按钮绑定点击事件
        var submitBtnElt = document.getElementById("btn");
        submitBtnElt.onclick = function () {
          usernameElt.focus();
          usernameElt.blur();

          pwordElt.focus();
          pwordElt.blur();

          emailElt.focus();
          emailElt.blur();
          if (
            usernameEltSpan.innerText == "" &&
            paswordErrorSpan.innerText == "" &&
            emailSpan.innerText == ""
          ) {
            //获取表单对象
            var userFormElt = document.getElementById("userForm");
            userFormElt.submit();
          }
        };
      };
    </script>

    <form id="userForm" action="save" method="POST">
      用户名<input type="text" name="username" id="username" /><span
        id="usernameError"
      ></span
      ><br />
      密码<input type="text" name="password" id="password" /><br />
      确认密码<input type="test" v id="pword" /><span id="paswordError"></span
      ><br />
      邮箱<input type="text" name="email" id="email" /><span
        id="emailError"
      ></span
      ><br />
      <input type="button" value="提交" id="btn" />
      <input type="submit" value="重置" />
    </form>
  </body>
</html>
码农公寓

相关文章
