Common JavaScript Form validation Rollup _javascript tips

Example: Verify that the input is a number, whether to meet the number of digits, if the error, and a friendly reminder.

Effect Chart:

<! DOCTYPE html>
 
 

This example above contains many commonly used forms validation code, which is shared below:

1, verify the form

2. Verify Nickname

3. Calculate Nickname length

4. Verify that the nickname is present

5, verify the mobile phone number

6, verify the password

7, verify the mailbox

8. Verify the verification code

9, determine whether selected

Registration validation as an example:

<script language= "JavaScript" src= "Js/jquery-1.9.1.min.js" type= "Text/javascript" ></script>//Validate form Func
       tion Vailform () {var form = JQuery ("#editForm");
       if (!vailnickname ()) return;
       if (!vailphone ()) return;
       if (!vailpwd ()) return;
       if (!vailconfirmpwd ()) return;
       if (!vailemail ()) return;
       if (!vailcode ()) return;
       if (!vailagree ()) return;
     Form.submit ();
       }//Verify nickname function Vailnickname () {var nickname = JQuery ("#nickName"). Val ();
       var flag = false;
       var message = "";
       var patrn=/^\d+$/;
       var length = Getnicknamelength (); if (nickname = = ") {message =" nickname cannot be empty!)
       "; }else if (length<4| | LENGTH&GT;16) {message = ' nickname is 4-16 characters!
       "; "Else if (checknicknameisexist ()) {message =" The nickname already exists, please re-enter!)
       ";
       }else{flag = true;
        } if (!flag) {jQuery ("#nickNameDiv"). Removeclass (). addclass ("Ui-form-item has-error"); JQuery ("#nickNameP"). HTML ("");
         JQuery ("#nickNameP"). HTML ("<i class=\" Icon-error ui-margin-right10\ "> <\/i>" +message);
       JQuery ("#nickName"). focus ();
         }else{jQuery ("#nickNameDiv"). Removeclass (). addclass ("Ui-form-item has-success");
         JQuery ("#nickNameP"). HTML ("");
       JQuery ("#nickNameP"). HTML ("<i class=\" icon-success ui-margin-right10\ "> <\/i> nickname available");
     return flag;
       //Count Nickname length function getnicknamelength () {var nickname = JQuery ("#nickName"). Val ();
      var len = 0;

　　　　　　for (var i = 0; i < nickname.length i++) {var a = Nickname.charat (i); function format: Stringobj.match (rgexp) stringobj for string required rgexp is a regular expression Required option//return value: If you can match, return an array of results, if you cannot match the return NULL if (A.match (/[
        ^\X00-\XFF]/IG)!= null) {len + + 2;
        }else{Len + + 1;
     } return len; }//Verify that the nickname exists a function checknicknameisexist () {var nickname = JQuery ("#nickName"). Val ();
       var flag = false; Jquery.ajax ({url: "checknickname?t=" + (new Date ()). GetTime (), data:{nickname:nickname}, DAT Atype: "JSON", type: "Get", Async:false, Success:function (data) {VAR St
             ATUs = Data.status;
             if (Status = = "1") {flag = true;
      }
           }
      });
     return flag;
       //Verify mobile number function Vailphone () {var phone = jQuery ("#phone"). Val ();
       var flag = false;
       var message = "";
       var Myreg =/^ ((13[0-9]{1}) |159|153) +\d{8}) $/; var Myreg =/^ ((13[0-9]{1}) | ( 14[0-9]{1}) | (17[0-9]{1}) | (15[0-3]{1}) | (15[5-9]{1}) | (18[0-3]{1}) | (18[5-9]{1}))
       +\D{8}) $/; if (phone = = ") {message =" cell phone number cannot be empty!)
       "; }else if (phone.length!=11) {message = "Please enter a valid mobile phone number!"
       "; }else if (!myreg.test (phone)) {message = "Please enter a valid mobile phone number!"
       ";
      }else if (checkphoneisexist ()) {   Message = "The phone number has been bound!"
       ";
       }else{flag = true;
         } if (!flag) {jQuery ("#phoneDiv"). Removeclass (). addclass ("Ui-form-item has-error");
         JQuery ("#phoneP"). HTML ("");
         JQuery ("#phoneP"). HTML ("<i class=\" Icon-error ui-margin-right10\ "> <\/i>" +message);
       JQuery ("#phone"). focus ();
         }else{jQuery ("#phoneDiv"). Removeclass (). addclass ("Ui-form-item has-success");
         JQuery ("#phoneP"). HTML ("");
       JQuery ("#phoneP"). HTML ("<i class=\" icon-success ui-margin-right10\ "> <\/i> the mobile number available");
     return flag;
         //Verify that the phone number exists function checkphoneisexist () {var phone = jQuery ("#phone"). Val ();
         var flag = true; Jquery.ajax ({url: "checkphone?t=" + (new Date ()). GetTime (), data:{phone:phone}, Dataty
         PE: "JSON", type: "Get", Async:false, Success:function (data) {      var status = Data.status;
               if (status = = "0") {flag = false;
        }
             }
        });
       return flag;
       //Verify Password function vailpwd () {var password = jQuery ("#password"). Val ();
       var flag = false;
       var message = "";
       var patrn=/^\d+$/; if (password = = "") {message = password cannot be empty!
       "; }else if (password.length<6 | | password.length>16) {message = password 6-16 bits!
       "; }else if (patrn.test (password)) {message = "Password cannot be all numbers!"
       ";
       }else{flag = true;
         } if (!flag) {jQuery ("#passwordDiv"). Removeclass (). addclass ("Ui-form-item has-error");
         JQuery ("#passwordP"). HTML ("");
         JQuery ("#passwordP"). HTML ("<i class=\" Icon-error ui-margin-right10\ "> <\/i>" +message);
       JQuery ("#password"). focus ();
         }else{jQuery ("#passwordDiv"). Removeclass (). addclass ("Ui-form-item has-success"); Jquery ("#passwordP"). HTML ("");
       JQuery ("#passwordP"). HTML ("<i class=\" icon-success ui-margin-right10\ "> <\/i> This password is available");
     return flag;
       //Verify Confirm Password function vailconfirmpwd () {var confirmpassword = jQuery ("#confirm_password"). Val ();
       var patrn=/^\d+$/;
       var password = jQuery ("#password"). Val ();
       var flag = false;
       var message = ""; if (ConfirmPassword = = "") {message = "Please enter a confirmation password!")
       "; }else if (confirmpassword!= password) {message = two times password input is inconsistent, please re-enter!
       "; }else if (patrn.test (password)) {message = "Password cannot be all numbers!"
       ";
       }else {flag = true;
         } if (!flag) {jQuery ("#confirmPasswordDiv"). Removeclass (). addclass ("Ui-form-item has-error");
         JQuery ("#confirmPasswordP"). HTML ("");
         JQuery ("#confirmPasswordP"). HTML ("<i class=\" Icon-error ui-margin-right10\ "> <\/i>" +message);
    JQuery ("#confirm_password"). focus ();   }else{jQuery ("#confirmPasswordDiv"). Removeclass (). addclass ("Ui-form-item has-success");
         JQuery ("#confirmPasswordP"). HTML ("");
       JQuery ("#confirmPasswordP"). HTML ("<i class=\" icon-success ui-margin-right10\ "> <\/i> password correct");
     return flag;
       //Verify Mailbox Function Vailemail () {var email = jQuery ("#email"). Val ();
       var flag = false;
       var message = ""; var myreg =/^ ([\.a-za-z0-9_-]) +@ ([a-za-z0-9_-]) + (\.[ 
       A-za-z0-9_-]) +/; if (email = = ') {message = Mailbox cannot be empty!
       "; }else if (!myreg.test (email)) {message = "Please enter a valid email address!"
       "; }else if (checkemailisexist ()) {message = "This email address has already been registered!"
       ";
       }else{flag = true;
         } if (!flag) {jQuery ("#emailDiv"). Removeclass (). addclass ("Ui-form-item has-error");
         JQuery ("#emailP"). HTML ("");
       JQuery ("#emailP"). HTML ("<i class=\" Icon-error ui-margin-right10\ "> <\/i>" +message);  JQuery ("#email"). focus ();
         }else{jQuery ("#emailDiv"). Removeclass (). addclass ("Ui-form-item has-success");
         JQuery ("#emailP"). HTML ("");
       JQuery ("#emailP"). HTML ("<i class=\" icon-success ui-margin-right10\ "> <\/i> This mailbox is available");
     return flag;
       //Verify that the mailbox exists a function checkemailisexist () {var email = jQuery ("#email"). Val ();
       var flag = false; Jquery.ajax ({url: "checkemail?t=" + (new Date ()). GetTime (), Data:{email:email}, DataType: "JS On ', type: ' Get ', Async:false, success:function (data) {var status = Da
             Ta.status;
             if (Status = = "1") {flag = true;
      }
           }
      });
     return flag;
       //Verify Authentication code function Vailcode () {var randcode = jQuery ("#randCode"). Val ();
       var flag = false;
       var message = ""; if (Randcode = = "") {message = "Please enter the verification code!"
    ";   }else if (!checkcode ()) {message = "Verify code is incorrect!
       ";
       }else{flag = true;
         } if (!flag) {jQuery ("#randCodeDiv"). Removeclass (). addclass ("Ui-form-item has-error");
         JQuery ("#randCodeP"). HTML ("");
         JQuery ("#randCodeP"). HTML ("<i class=\" Icon-error ui-margin-right10\ "> <\/i>" +message);
       JQuery ("#randCode"). focus ();
         }else{jQuery ("#randCodeDiv"). Removeclass (). addclass ("Ui-form-item has-success");
         JQuery ("#randCodeP"). HTML ("");
       JQuery ("#randCodeP"). HTML ("<i class=\" icon-success ui-margin-right10\ "> <\/i>");
     return flag;
       //Check that the random Captcha is correct function checkcode () {var randcode = jQuery ("#randCode"). Val ();
       var flag = false; Jquery.ajax ({url: "checkrandcode?t=" + (new Date ()). GetTime (), data:{randcode:randcode}, DAT Atype: "JSON", type: "Get", Async:false, SUccess:function (data) {var status = Data.status;
             if (Status = = "1") {flag = true;
      }
           }
      });
     return flag;
       //Determine if the function Vailagree () {if (JQuery ("#agree") is selected. Is (": Checked")) {return true;
       }else{alert ("Please confirm that you read and agree to the XX agreement");
     return false; function Delhtmltag (str) {var str=str.replace (/<\/?[ ^>]*>/gim, "");//Remove all HTML tags var result=str.replace (^\s+) | (

 \s+$)/g, "")//remove before and after the space return Result.replace (/\s/g, "");//Remove the middle space of the article}

The above is the practical JavaScript form verification, I hope you like.