Two Implementation Methods of JavaScript Form Verification

  • 2021-07-18 07:03:08
  • OfStack

In this paper, we share the implementation method of js form verification for your reference. The specific contents are as follows

Type 1: js form validation


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Registration - Individual users </title>
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
  <style>
    body {
      font-family: Arial, " Song Style ", Lucida, Verdana, Helvetica, sans-serif;
      font-size: 12px;
      color: #333;
      line-height: 150%;
      background: #f2f2f2;
    }

    .hide{display:none;}

    .focus,.error {
      color: #e4393c;
      line-height: 36px;
      height: 36px;
      position: absolute;
      top: 0px;

      width: 260px;
      padding: 0 5px;
      background: #FFEBEB;
      border: 1px solid #ffbdbe;
    }

    .error span,.focus span {
      padding: 5px 0;
      line-height: 13px;
      display: block;
    }

    .focus {
      color: #666;
      width: 260px;;
      line-height: 36px;
      background: #f7f7f7;
      border: 1px solid #dddddd;
    }

    .regist {
      width: 990px;
      padding: 0;
      margin: 0 auto;
      zoom: 1;
    }


    .mc {
      padding: 30px 0 20px;
      border: solid #dddddd; border-width : 0px 1px 1px;
      background: #FFF;
      overflow: hidden;
      zoom: 1;
      border-width: 0px 1px 1px;
    }

    .form {
      float: left;
      width: 750px;
      font-size: 12px;
    }

    .form label,.form input,.form select,.form textarea,.form button,.form .label {
      float: left;
      font-size: 12px;
    }

    .item {
      padding-top: 9px;
      height: 60px;
      line-height: 34px;
      position: relative;
      z-index: 1;
    }

    .label {
      float: left;
      width: 190px;
      text-align: right;
      font-size: 14px;
      color: #999;
      padding-right: 10px;
    }

    .input {
      float: left;
      position: relative;
      width: 270px;
      overflow: visible;
    }

    .text {
      float: none;
      width: 275px;
      height: 37px;
      line-height: 32px;
      border: 1px solid #cccccc;
      font-size: 14px;
      font-family: arial, " Song Style ";
      overflow: hidden;
    }

  </style>
</head>
<body>
  <div class="regist"> 
    <div class="mc">
      <form id="personRegForm" class="form" action="login.html" method="POST" onsubmit="return validateForm();">
        <div class="item">
          <span class="label"> User name: </span>
          <div class="input">
            <input type="text" id="username" name="username" class="text">

            <label id="username_msg" class="hide"></label>
          </div>
        </div>
        <div class="item">
          <span class="label"> Please set the password: </span>
          <div class="input">
            <input type="password" id="password" name="password" class="text">

            <label id="pwd_msg" class="hide"></label>
          </div>
        </div>
        <div class="item">
          <span class="label"> Please confirm the password: </span>
          <div class="input">
            <input type="password" id="pwdRepeat" name="pwdRepeat" class="text">

            <label id="pwdRepeat_msg" class="hide"></label>
          </div>
        </div>
        <div class="item">
          <span class="label"> Verify mailbox: </span>
          <div class="input">
            <input type="text" id="mail" name="mail" class="text">

            <label id="mail_msg" class="hide"></label>
          </div>
        </div>
        <div class="item">
          <span class="label">&nbsp;</span>
          <input type="submit" class="btn-img" id="registsubmit" value=" Register now " />
        </div>
      </form>
    </div>  
  </div>


   <script>
    window.onload = function(){
      // 1.  User name 
      $("#username").focus(function(){
        /*  Get the focus 
        var username_msg = $("#username_msg");
        username_msg.text("4-20 Bit characters, English, numeric and '-' , '_' Combination ");
        username_msg.attr("class","focus");
        */
        elemFocus("username_msg","4-20 Bit characters, English, numeric and '-' , '_' Combination ");

      }).blur(userValidator);
      // 2.  Password 
      $("#password").focus(function(){
        elemFocus("pwd_msg","6-20 Bit characters, which can use a combination of letters and numbers ");
      }).blur(pwdValidator);
      // 3.  Confirm password 
      $("#pwdRepeat").focus(function(){
        elemFocus("pwdRepeat_msg","6-20 Bit characters, which can use a combination of letters and numbers ");
      }).blur(pwdRepeatValidator);
      // 4. Email
      $("#mail").focus(function(){
        elemFocus("mail_msg"," After authentication, you can use this mailbox to log in and retrieve your password ");
      }).blur(emailValidator);
    }

    //  Definition function  -  General information prompt 
    function elemFocus(eleId,text){
      var ele_msg = $("#"+eleId);
      ele_msg.text(text);
      ele_msg.attr("class","focus");
    }

    //  Define functions to validate user names 
    function userValidator(){
      //  Gets the value entered for the user name 
      var value = $("#username").val();
      //  Gets the element used to display prompt information 
      var username_msg = $("#username_msg");
      //  Verification logic 
      if(value==""||value==null){
        username_msg.text(" User name cannot be empty ");
        username_msg.attr("class","error");
        return false;
      }else if(value.length<4||value.length>20){
        username_msg.text(" The length of the user name is incorrect ");
        username_msg.attr("class","error");
        return false;
      }else if(!/^[a-zA-Z0-9-_]{4,20}$/.test(value)){
        username_msg.text(" Incorrect user name input ");
        username_msg.attr("class","error");
        return false;
      }
      //  Verify that by modifying the correct style, 
      if(!username_msg.hasClass("hide")){
        username_msg.text("");
        username_msg.attr("class","hide");
      }
      return true;
    }
    //  Define functions to verify passwords 
    function pwdValidator(){
      var value = $("#password").val();
      var pwd_msg = $("#pwd_msg");
      if(value==""||value==null){
        pwd_msg.text(" Password cannot be empty ");
        pwd_msg.attr("class","error");
        return false;
      }else if(value.length<6||value.length>20){
        pwd_msg.text(" The length of the password is incorrect ");
        pwd_msg.attr("class","error");
        return false;
      }else if(!/^[a-zA-Z0-9]{6,20}$/.test(value)){
        pwd_msg.text(" Incorrect password input ");
        pwd_msg.attr("class","error");
        return false;
      }
      if(!pwd_msg.hasClass("hide")){
        pwd_msg.text("");
        pwd_msg.attr("class","hide");
      }
      return true;
    }
    //  Define functions that confirm password authentication 
    function pwdRepeatValidator(){
      var value = $("#pwdRepeat").val();
      var pwdRepeat_msg = $("#pwdRepeat_msg");
      var pwd = $("#password").val();
      if(value==""||value==null){
        pwdRepeat_msg.text(" Password cannot be empty ");
        pwdRepeat_msg.attr("class","error");
        return false;
      }else if(value.length<6||value.length>20){
        pwdRepeat_msg.text(" The length of the password is incorrect ");
        pwdRepeat_msg.attr("class","error");
        return false;
      }else if(!/^[a-zA-Z0-9]{6,20}$/.test(value)){
        pwdRepeat_msg.text(" Incorrect password input ");
        pwdRepeat_msg.attr("class","error");
        return false;
      }else if(value != pwd){
        pwdRepeat_msg.text(" Enter the password twice. No 1 To ");
        pwdRepeat_msg.attr("class","error");
        return false;
      }
      if(!pwdRepeat_msg.hasClass("hide")){
        pwdRepeat_msg.text("");
        pwdRepeat_msg.attr("class","hide");
      }
      return true;
    }
    //  Definition Email Validated function 
    function emailValidator(){
      var value = $("#mail").val();
      var email_msg = $("#mail_msg");
      if(value==""||value==null){
        email_msg.text("Email Cannot be empty ");
        email_msg.attr("class","error");
        return false;
      }else if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)){
        email_msg.text("Email Incorrect format ");
        email_msg.attr("class","error");
        return false;
      }
      if(!email_msg.hasClass("hide")){
        email_msg.text("");
        email_msg.attr("class","hide");
      }
      return true;
    }
    function validateForm(){
      if(!userValidator()||!pwdValidator()||!pwdRepeatValidator()||!emailValidator()){
        return false;
      }
      return true;
    }
  </script>
</body>
</html>

Type 2:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      form {
        width: 570px;
        height: 300px;
        margin: 100px auto;
      }

      label {
        width: 64px;
        float: left;
        clear: left;
        height: 36px;
        line-height: 36px;
        margin-top: 10px;
      }

      input {
        width: 300px;
        height: 36px;
        line-height: 36px;
        margin-top: 10px;
        text-indent: 8px;
        font-size: 16px;
        font-family: " Microsoft Yahei ";
        border: 1px solid #ccc;
        float: left;
      }

      #sub {
        width: 302px;
        height: 40px;
        border: 1px solid #ccc;
        background: #888;
        color: #fff;
        font-size: 18px;
        text-indent: 0;
      }

      .spa {
        height: 36px;
        line-height: 36px;
        width: 204px;
        display: inline-block;
        float: left;
        font-size: 12px;
        color: #BD362F;
        text-indent: 10px;
        margin-top: 10px;
      }
    </style>
  </head>

  <body>
    <form action="" method="post">
      <label id="name"> Last name &nbsp; Name: </label><input type="text" name="username" id="username" value="" placeholder=" Please enter a name " /><span class="spa spa1"></span><br />
      <label id="phone"> Mobile phone number: </label><input type="text" name="userphone" id="userphone" value="" placeholder=" Please enter your mobile phone number " /><span class="spa spa2"></span><br />
      <label id="address"> Ground &nbsp; Address: </label><input type="text" name="useraddress" id="useraddress" value="" placeholder=" Please enter the address " /><span class="spa spa3"></span><br />
      <label>&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="submit" value=" Registration " id="sub" />
    </form>
    <script src="http://code.jquery.com/jquery-1.4.1.js"></script>
    <script type="text/javascript">
      window.onload = function() {
          $("#username").focus()
        }
        /************************  Defocus judgment  **********************************/
      $("input").blur(function() {
          $(".spa").css("color", "#BD362F")
          if($(this).is("#username")) { // Name judgment 
            var na = /^[\u4E00-\u9FA5]{2,4}$/
            if($("#username").val() != "") {
              if(!(na.test($("#username").val()))) {
                $(".spa1").text(" Please enter 2-4 Chinese characters ");
                $(this).css("border", "1px solid #BD362F")
                return false;
              } else if(na) {
                $(".spa1").text("");
                return true;
              }
            } else {
              $(".spa1").text("");
            }
          }
          if($(this).is("#userphone")) { // Mobile phone number judgment 
            var ph = /^1[3|5|7|8|][0-9]{9}$/
            if($("#userphone").val() != "") {
              if(!(ph.test($("#userphone").val()))) {
                $(".spa2").text(" Please enter the correct mobile phone number ");
                $(this).css("border", "1px solid #BD362F")
                return false;
              } else if(ph) {
                $(".spa2").text("");
                return true;
              }
            } else {
              $(".spa2").text("");
            }
          }

          if($(this).is("#useraddress")) { // Address determination 
            var ad = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/;
            if($("#useraddress").val() != "") {
              if(!(ad.test($("#useraddress").val()))) {
                $(".spa3").text(" Please enter the correct address ");
                $(this).css("border", "1px solid #BD362F")
                return false;
              } else if(ad) {
                $(".spa3").text("");
                return true;
              }
            } else {
              $(".spa3").text("");
            }
          }
        })
        /**********************  Focus hint  ************************/
      $("input").focus(function() {
          if($(this).is("#username")) {
            $(".spa1").text("4 Chinese characters ").css("color", "#aaa")
            $(this).css("border", "1px solid #aaa")
          }
          if($(this).is("#userphone")) {
            $(".spa2").text("11 Bit mobile phone number ").css("color", "#aaa")
            $(this).css("border", "1px solid #aaa")
          }
          if($(this).is("#useraddress")) {
            $(".spa3").text(" Minimum 8 Characters (Chinese characters, letters and numbers) ").css("color", "#aaa")
            $(this).css("border", "1px solid #aaa")
          }
        })
        /***********************  Submit validation  ***************************/
      $("#sub").click(function() {
        var na = /^[\u4E00-\u9FA5]{2,4}$/; // Name regularity 
        var ph = /^1[3|5|7|8|][0-9]{9}$/; // Regular mobile phone number 
        var ad = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/; // Address regularity 
        if(na.test($("#username").val()) && ph.test($("#userphone").val()) && ad.test($("#useraddress").val())) {
          return true;
        } else {
          if($("#username").val() == "") {
            $(".spa1").text(' Please fill in the user name ')
          }
          if($("#userphone").val() == "") {
            $(".spa2").text(' Please fill in your mobile phone number ')
          }
          if($("#useraddress").val() == "") {
            $(".spa3").text(' Please fill in the address ')
          }
          return false;
        }
      })
    </script>
  </body>
</html>

Related articles: