jquery Form Verification Plug-in Formvalidator use method

jquery Form Verification Plug-in Formvalidator use method _jquery

Last Update:2017-01-19 Source: Internet

Author: User

Tags lowercase rar

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Use steps:

1. First in the project to add the necessary JS and CSS

2. Add a reference to the code (prerequisite reference)

  <script src= "Scripts/jquery-1.4.1.min.js" type= "Text/javascript" ></script> <!--jquery must be library-->
  <script src= "formvalidator1/formvalidator-4.0.1.min.js" type= "Text/javascript" ></script> <!-- Form validation must be library-->
  <script src= "formvalidator1/formvalidatorregex.js" type= "Text/javascript" ></script > <!--form validation extension library-->
  <link href= "formvalidator1/style/validator.css" rel= "stylesheet" type= "Text/css"/ ><!--Form Validation style sheet-->

tags to validate in 3.<body> (do some common demos)

<table border= "0px" style= "font-size:12px" > <tr> <td colpan= "3" ><input type= "Submit" name= "Butt" 
   On "id=" button "value=" Submit "/></td> </tr> <tr> <td align=" right "> ID (Regular expression library):</td> <td><input name= "SFZ" type= "text" id= "SFZ"/></td> <td><div "id=" Sfztip "style=" width:300 PX "></div></td> <!--must note that this prompts for the ID value of the div in the validation information, with a tip for the ID value in the control to be validated, as follows. Must be a lot of tip, also must be more. --> </tr> <tr> <td align= "right" > ID (external function):</td> <td><input type= "text" id= "Sfz1" style= "width:120px"/></td> <td><div id= "Sfz1tip" style= "width:300px" ></div></ td> </tr> <tr> <td align= "right" > Integer:</td> <td><input type= "text" id= "ZS" St Yle= "width:120px"/></td> <td><div id= "Zstip" style= "width:300px" ></div></td> < /tr> <tr> <td align= "right" >Integer:</td> <td><input type= "text" id= "Zzs" style= "width:120px"/></td> "<td><div id=" Z Zstip "style=" width:300px "></div></td> </tr> <tr> <td align=" right "> Negative integer: &LT;/TD&G
   T <td><input type= "text" id= "Fzs" style= "width:120px"/></td> <td><div id= "FzsTip" style= " width:300px "></div></td> </tr> <tr> <td align=" right "> Digital:</td> <td&gt ; <input type= "text" id= "sz" style= "width:120px"/></td> <td><div id= "Sztip" style= "width:300px" & gt;</div></td> </tr> <tr> <td align= "right" > Positive number (positive integer + 0):</td> <td>&lt ; input type= "text" id= "Zs1" style= "width:120px"/></td> <td><div id= "Zs1tip" style= "width:300px" ></div></td> </tr> <tr> <td align= "right" > Negative number (Negative integer + 0):</td> &LT;TD&GT;&L T;input type= "text" id= "FS" sTyle= "width:120px"/></td> <td><div id= "Fstip" style= "width:300px" ></div></td> </tr> <tr> <td align= "Right" > floating-point number:</td> <td><input type= "text" id= "FDS" style= "wi dth:120px "/></td> <td><div id= fdstip" style= "width:300px" ></div></td> </tr > <tr> <td align= "right" > Positive floating-point number:</td> <td><input type= "text" id= "Zfds" style= "Width:1" 20px "/></td> <td><div id=" Zfdstip style= "width:300px" ></div></td> </tr> &L t;tr> <td align= "right" > Negative floating-point number:</td> <td><input type= "text" id= "Ffds" style= "width:120px"/&G 
   t;</td> <td><div id= "Ffdstip" style= "width:300px" ></div></td> </tr> <tr> &LT;TD align= "Right" > nonnegative floating-point number (positive floating-point number + 0):</td> <td><input type= "text" id= "Fffds" style= "width:120px" /></td> <td><Div id= "Fffdstip" style= "width:300px" ></div></td> </tr> <tr> <td align= "right" > Non-positive Floating-point number (negative floating-point number + 0):</td> <td><input type= "text" id= "Fzfds" style= "width:120px"/></td> <td> <div id= "Fzfdstip" style= "width:300px" ></div></td> </tr> <tr> <td align= "right" &G t; color:</td> <td><input type= "text" id= "ys" style= "width:120px"/></td> <td><div "id=" Ystip "style=" width:300px "></div></td> </tr> <tr> <td align=" Right "> Your email:</ td> <td><input type= "text" id= "E-mail" style= "width:120px"/></td> <td><div id= "EmailTi"
   P "style=" width:300px "></div></td> </tr> <tr> <td align=" right "> Mobile:</td> <td><input type= "text" id= "SJ" style= "width:120px"/></td> <td><div id= "SjTip" style= "Widt" h:300px "></div></td> </tr> <tr> <td align= "right" > Zip code:</td> <td><input type= "text" id= "YB "Style=" width:120px "/></td> <td><div id=" Ybtip "style=" width:300px "></div></td> & lt;/tr> <tr> <td align= "right" > Non-empty:</td> <td><input type= "text" id= "FK" style= "width : 120px "/></td> <td><div id=" Fktip "style=" width:300px "></div></td> </tr> &L t;tr> <td align= "right" > Picture:</td> <td><input type= "text" id= "TP" style= "width:120px"/&GT;&L t;/td> <td><div id= "Tptip" style= "width:300px" ></div></td> </tr> <tr> &L
   T;TD align= "Right" > Compressed file:</td> <td><input type= "text" id= "rar" style= "width:120px"/></td> <td><div id= "Rartip" style= "width:300px" ></div></td> </tr> <tr> <td Align = "Right" >ip4:</td> <td><input type= "text" id= "IP4" style= "width:120px"/></td> <td><div id= "Ip4Tip" style= " width:300px "></div></td> </tr> <tr> <td align=" right ">qq number:</td> <td& Gt;<input type= "text" id= "QQ" style= "width:120px"/></td> <td><div id= "Qqtip" style= "width:300px" "></div></td> </tr> <tr> <td align=" right "> Domestic telephone:</td> <td><inpu T type= "text" id= "dh" style= "width:120px"/></td> <td><div id= "Dhtip" style= "width:300px" ></ div></td> </tr> <tr> <td align= "right" > User name:</td> <td><input type= "Tex T "id=" YHM "style=" width:120px "/></td> <td><div id=" Yhmtip "style=" width:300px "></div> </td> </tr> <tr> <td align= "right" > Letter:</td> <td><input type= "text" id= "Z M "style=" width:120px "/></td> <td><div id= "Zmtip" style= "width:300px" ></div></td> </tr> <tr> <t D align= "Right" > Capital letter:</td> <td><input type= "text" id= "Dxzm" style= "width:120px"/></td> & Lt;td><div id= "Dxzmtip" style= "width:300px" ></div></td> </tr> <tr> <td align= " Right > Lowercase letter:</td> <td><input type= "text" id= "Xxzm" style= "width:120px"/></td> <td> <div id= "Xxzmtip" style= "width:300px" ></div></td> </tr> <tr> <td align= "right" ; ID:</td> <td><input type= "text" id= "SFZ" style= "width:120px"/></td> <td><div id=
 "Sfztip" style= "width:300px" ></div></td> </tr> </table>

Code in the

4.<script>

<script type= "Text/javascript" > $ (document). Ready (function () {$.formvalidator.initconfig ({formid: "Form1",
   Onerror:function () {alert ("checksum does not pass, see Error Prompt")}}); $ ("#sfz"). Formvalidator ({onshow: "Please enter a 15 or 18 ID card", onfocus: "Enter a 15 or 18-bit identity card", Oncorrect: "Enter the correct"}). Regexvalidator ({
   REGEXP: "Idcard", DataType: "Enum", OnError: "You entered the ID card format is not correct"}; $ ("#sfz1"). Formvalidator ({onshow: "Please enter a 15 or 18 ID card", onfocus: "Enter a 15 or 18-bit identity card", Oncorrect: "Enter the correct"}). Functionvalidator ({

   Fun:iscardid}); $ ("#zs"). Formvalidator ({onshow: "Please enter an integer", Oncorrect: "Thank you for your cooperation, your whole number is correct"}). Regexvalidator ({regExp: "Intege", DataType: "
   Enum ", OnError:" Incorrect integer Format "}); $ ("#zzs"). Formvalidator ({onshow: "Please enter a positive integer", Oncorrect: "Thank you for your cooperation, your positive integer is correct"}). Regexvalidator ({regExp: "Intege1",
   DataType: "Enum", OnError: "Incorrect integer Format"}); $ ("#fzs"). Formvalidator ({onshow: "Please enter a negative integer", Oncorrect: "Thank you for your cooperation, your negative integer is correct"}). Regexvalidator ({regExp: "Intege2",
   DataType: "Enum", OnError: "Negative integer format Incorrect"}); $ ("#sz"). Formvalidator ({onshow:"Please enter a number", Oncorrect: "Thank you for your cooperation, your number is correct"}. Regexvalidator ({regExp: "num", DataType: "Enum", OnError: "Incorrect number format"}); $ ("#zs1"). Formvalidator ({onshow: "Please enter a positive number", Oncorrect: "Thank you for your cooperation, your positive number is correct"}). Regexvalidator ({regExp: "Num1", DataType: "
   Enum ", OnError:" Positive format Incorrect "}); $ ("#fs"). Formvalidator ({onshow: "Please enter negative numbers", Oncorrect: "Thank you for your cooperation, your negative numbers are correct"}). Regexvalidator ({regExp: "num2", DataType: "

   Enum ", OnError:" Negative format incorrect "}); $ ("#sj"). Formvalidator ({onshow: "Please enter your mobile number", onfocus: "must be 13 or 15 to the beginning of Oh", Oncorrect: "Thank you for your cooperation, your mobile phone number is correct"}). Regexvalidator (
   {regExp: "mobile", DataType: "Enum", OnError: "Cell phone number format is not correct"}); $ ("#"). Formvalidator ({onshow: "", onfocus: "Please enter", Oncorrect: "Thank you for your cooperation, you are correct"}). Regexvalidator ({regExp: "", DataType: "
   Enum ", OnError:" Incorrect Format "}); $ ("#email"). Formvalidator ({onshow: "Please enter your email", onfocus: "Please note the email format you entered, for example: wzmaodong@126.com", Oncorrect: "Thank you for your cooperation.
   , your email is correct "}). Regexvalidator ({regExp:" email ", DataType:" Enum ", OnError:" Incorrect email format "}); $ ("#fds"). Formvalidator ({onshow: "Please enter a floating-point number", OncorrecT: "Thank you for your cooperation, your floating-point number is correct"}). Regexvalidator ({regExp: "Decmal", DataType: "Enum", OnError: "Floating-point number format is incorrect"}); $ ("#zfds"). Formvalidator ({onshow: "Please enter a positive floating-point number", Oncorrect: "Thank you for your cooperation, your positive floating-point number is correct"}). Regexvalidator ({regExp: "Decmal1",
   DataType: "Enum", OnError: "Positive floating-point number format is incorrect"}); $ ("#ffds"). Formvalidator ({onshow: "Please enter negative floating-point number", Oncorrect: "Thank you for your cooperation, your negative floating-point number is correct"}). Regexvalidator ({regExp: "Decmal2",
   DataType: "Enum", OnError: "Negative floating-point number format is not correct"}; $ ("#fffds"). Formvalidator ({onshow: "Please enter a non-negative floating-point number", Oncorrect: "Thank you for your cooperation, your nonnegative floating-point number is correct"}). Regexvalidator ({regExp: "Decmal4",
   DataType: "Enum", OnError: "nonnegative floating-point number format incorrect"}); $ ("#fzfds"). Formvalidator ({onshow: "Please enter a non-positive floating-point number", Oncorrect: "Thank you for your cooperation, your non-positive floating-point number is correct"}). Regexvalidator ({regExp: "DECMAL5",
   DataType: "Enum", OnError: "Non-positive floating-point number format is incorrect"}); $ ("#ys"). Formvalidator ({onshow: "Please enter 16 color", Oncorrect: "Thank you for your cooperation, your 16 color is correct"}). Regexvalidator ({regExp: "Color",
   DataType: "Enum", OnError: "16 Color format Incorrect"}); $ ("#yb"). Formvalidator ({onshow: "Please enter ZIP code", onfocus: "6 digits of the composition of Oh", Oncorrect: "Thank you for your cooperation, your postcode isTrue "}). Regexvalidator ({regExp:" ZipCode ", DataType:" Enum ", OnError:" Postcode format is incorrect "}); $ ("#ip4"). Formvalidator ({onshow: "Please enter IP4", onfocus: "For example: 172.16.201.18", Oncorrect: "Thank you for your cooperation, your IP4 is correct"}).
   Regexvalidator ({regExp: "IP4", DataType: "Enum", OnError: "IP4 format is incorrect"}); $ ("#fk"). Formvalidator ({onshow: "Please enter a non-empty character", Oncorrect: "Thank you for your cooperation, your non-null characters are correct"}). Regexvalidator ({regExp: "Notempty",
   DataType: "Enum", OnError: "Non-null character format incorrect"}); $ ("#tp"). Formvalidator ({onshow: "Please enter picture name", Oncorrect: "Thank you for your cooperation, your picture name is correct"}). Regexvalidator ({regExp: "Pictures", DataType
   : "Enum", OnError: "Incorrect format of picture name"}); $ ("#rar"). Formvalidator ({onshow: "Please enter a compressed filename", Oncorrect: "Thank you for your cooperation, your compressed filename is correct"}). Regexvalidator ({regExp: "rar",
   DataType: "Enum", OnError: "Compressed file name format is incorrect"}); $ ("#qq"). Formvalidator ({onshow: "Please enter QQ number", Oncorrect: "Thank you for your cooperation, your QQ number is correct"}). Regexvalidator ({regExp: "QQ", DataType: "
   Enum ", OnError:" QQ number format is not correct "}); $ ("#dh"). Formvalidator ({onshow: "Please enter domestic phone", onfocus: "For example: 0577-88888888 or omit area code 88888888", Oncorrect: "Thank you for your cooperation, your countryInternal telephone Correct "}). Regexvalidator ({regExp:" tel ", DataType:" Enum ", OnError:" Domestic telephone format is not correct "}); $ ("#yhm"). Formvalidator ({onshow: "Please enter username", Oncorrect: "Thank you for your cooperation, your username is correct"}). Regexvalidator ({regExp: "username",
   DataType: "Enum", OnError: "Incorrect username format"}); $ ("#zm"). Formvalidator ({onshow: "Please enter the letter", Oncorrect: "Thank you for your cooperation, your letters are correct"}). Regexvalidator ({regExp: "letter", DataType: "
   Enum ", OnError:" Incorrect Letter Format "}); $ ("#dxzm"). Formvalidator ({onshow: "Please enter a capital letter", Oncorrect: "Thank you for your cooperation, your capital letter is correct"}). Regexvalidator ({regExp: "Letter_u",
   DataType: "Enum", OnError: "Uppercase format Incorrect"}); $ ("#xxzm"). Formvalidator ({onshow: "Please enter a lowercase letter", Oncorrect: "Thank you for your cooperation, your lowercase letter is correct"}). Regexvalidator ({regExp: "letter_l",
   DataType: "Enum", OnError: "Lowercase letter format not correct"}); $ ("#sfz"). Formvalidator ({onshow: "Please enter your ID card", oncorrect: "Thank you for your cooperation, your ID card is correct"}). Regexvalidator ({regExp: "Idcard", DataType
  : "Enum", OnError: "Incorrect ID card format"});
});

 </script>

5. Effect Chart:

6. Add Change Note:

 $.formvalidator.reloadautotip ();  Reload Form Validation Style if (!$.formvalidator.pageisvalid (' 1 ')) return false; If not passed then the $ (document) is not submitted. Ready (function () {$.formvalidator.initconfig ({formid: "Form1", Onerror:function
      () {alert ("checksum does not pass, please see error Prompt")}); $ ("#name"). Formvalidator ({onshow: "Enter your name!") ", onfocus:" Enter one to 10 characters, Oncorrect: "Input correct, thank you for your cooperation!" "}". Inputvalidator ({min:1, max:20, onError: "Input length, no!")
      " }); $ ("#timelong"). Formvalidator ({onshow: "Please input the length of the roadshow!") ", onfocus:" Input format is a positive integer! ", Oncorrect:" Input correct, thank you for your cooperation! "}). Regexvalidator ({regExp:" Intege1 ", DataType:" Enum ", OnError:" The length of time you entered is not in the correct format! ")
      " }); $ ("#address"). Formvalidator ({onshow: "Please enter the name of the Roadshow platform!") ", onfocus:" Enter one to 50 characters, Oncorrect: "Input correct, thank you for your cooperation!" "}". Inputvalidator ({min:1, max:50, onError: "Input length, no!")
      " }); $ ("#urladdress"). Formvalidator ({onshow: "Please enter the Roadshow link address!") ", onfocus:" Input format: http://www.baidu.com ", oncorrect:" Input correct, thank you for your cooperation! "}). Regexvalidator ({regExp:" ^ (http|https|ftp) \://([a-za-z0-9\.\-]+-]+) *@) * (25[0-5]|2[0-4][0-9]| [0-1] {1} [0-9] {2}| [1-9] {1} [0-9] {1}| [1-9]) \. (25[0-5]|2[0-4][0-9]| [0-1] {1} [0-9] {2}| [1-9] {1} [0-9] {1}| [1-9]|0) \. (25[0-5]|2[0-4][0-9]| [0-1] {1} [0-9] {2}| [1-9] {1} [0-9] {1}| [1-9]|0) \. (25[0-5]|2[0-4][0-9]| [0-1] {1} [0-9] {2}| [1-9] {1} [0-9] {1}| [0-9]) | Localhost| ([a-za-z0-9\-]+\.) *[a-za-z0-9\-]+\. (com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum| [A-za-z] {2})) (\:[0-9]+) * (/($|[ A-za-z0-9\.\,\?\ ' \\\+&%\$#\=~_\-]+) *$ ", OnError:" The input format is not correct!
      " }); $ ("#time"). Formvalidator ({oncorrect: "well-formed"}). Functionvalidator ({fun:isdatetime, OnError: "Input format, no!").
      " }); $ ("#txtcontent"). Formvalidator ({onshow: "Please enter the Expert profile!") ", onfocus:" Enter one to 100 characters, Oncorrect: "Input correct, thank you for your cooperation!" "}". Inputvalidator ({min:1, max:100, onError: "Input length, no!")
    " });

 });

Ajax verifies if a user exists

JS code (you must set the name value in HTML, otherwise the dynamic is not get the value)

$ ("#userID"). Formvalidator ({ajax:true,onshow: "Please enter account", onfocus: "It is better to start with a letter, only alphanumeric, not less than 6 characters.") ", Oncorrect:" User name can be used, please refine the following information. "}". Regexvalidator ({regExp: "username", DataType: "Enum", OnError: "You entered the wrong format!") "}). Inputvalidator ({min:6, max:16, OnError:" The input length is incorrect!) "})
       . Ajaxvalidator ({
         dataType:" Text ",
         async:true,
         URL:" Tool/adduser.ashx ",
         success: function (data) {
           if (data = = "0") {return true;}
           else if (data = = "Null") {return] Note: The username must not be less than 6 characters. "; }
           else if (data = = "false") {return "The user name has been registered, please change the username." ";}
         },
         buttons: $ (" #button "),
         error:function (JQXHR, Textstatus, Errorthrown) {alert (" Server does not return data, The server may be busy, please try again "+ Errorthrown";
         onError: "This username is not available, please replace the username",
         onwait: "Verify the user name in legality, please wait ..."
       }. defaultpassed ();  If you add defaultpassed () here, the default validation passes.

Generic handler Code

public void ProcessRequest (HttpContext context)
    {context
      . Response.ContentType = "Text/plain";
      #region Determine whether the user has been registered as a
      string returnstr = "";
      This is actually the context. Request.QueryString the value obtained by name must set the space's name value
      if (context). request["UserName"]!= null && context. request["UserName"]. ToString (). Length > 0)
      {
        if (isexist) (context. request["UserName"]. ToString ()))
        {
          returnstr = ' false ';
        }
        else
        {
          returnstr = ' 0 ';
        }        
      }
      else
      {
        returnstr = "null";
      }
      Context. Response.Write (RETURNSTR);
      Context. Response.End ();
      #endregion
    }

    #region Determine if the user has been registered as public
    bool Isexist (string userName)
    {
      Snet.BLL.UserAccount BLL = new BLL. UserAccount ();
      Return BLL. Exists (UserName);
    }
    #endregion

The above is the entire content of this article, I hope to help you learn.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More