Home > Developer > JavaScript
Jquery Form Verification plug-in formValidator usage, jqueryform Verification
Procedure:
1. First add necessary js and css to the Project
2. add reference to the code (mandatory reference)
<Script src = "Scripts/jquery-1.4.1.min.js" type = "text/javascript"> </script> <! -- Jquery must library --> <script src = "formValidator1/formValidator-4.0.1.min.js" type = "text/javascript"> </script> <! -- The Form Verification library is required --> <script src = "formValidator1/formValidatorRegex. js" type = "text/javascript"> </script> <! -- Form verification extension library --> <link href = "formValidator1/style/validator.css" rel = "stylesheet" type = "text/css"/> <! -- Form Verification style sheet -->
3. The tag to be verified in <body> (for some common DEMOS)
<Table border = "0px" style = "font-size: 12px "> <tr> <td colpan =" 3 "> <input type =" submit "name =" button "id =" button "value =" submit "/> </ td> </tr> <td align = "right"> ID card (Regular Expression Library): </td> <input name = "sfz" type = "text" id = "sfz"/> </td> <div id = "sfzTip" style = "width: 300px "> </div> </td> <! -- Note that the id value of the div in the verification information is displayed here, which is the same as that of the id value in the verification control. Tip is required and Tip is required. --> </Tr> <td align = "right"> ID card (external function ): </td> <input type = "text" id = "sfz1" style = "width: 120px "/> </td> <div id =" sfz1Tip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> INTEGER: </td> <input type = "text" id = "zs" style = "width: 120px "/> </td> <div id =" zsTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> positive integer: </td> <input type = "text" id = "zzs" style = "width: 120px "/> </td> <div id =" zzsTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> negative integer: </td> <input type = "text" id = "fzs" style = "width: 120px "/> </td> <div id =" fzsTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> Number: </td> <input type = "text" id = "sz" style = "width: 120px "/> </td> <div id =" szTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> positive number (positive integer + 0 ): </td> <input type = "text" id = "zs1" style = "width: 120px "/> </td> <div id =" zs1Tip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> negative (negative integer + 0 ): </td> <input type = "text" id = "fs" style = "width: 120px "/> </td> <div id =" fsTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> floating point: </td> <input type = "text" id = "fds" style = "width: 120px "/> </td> <div id =" fdsTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> Floating Point Number: </td> <input type = "text" id = "zfds" style = "width: 120px "/> </td> <div id =" zfdsTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> negative Floating Point Number: </td> <input type = "text" id = "ffds" style = "width: 120px "/> </td> <div id =" ffdsTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> non-negative floating point number (Positive floating point number + 0 ): </td> <input type = "text" id = "fffds" style = "width: 120px "/> </td> <div id =" fffdsTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> non-Positive floating point number (negative floating point number + 0 ): </td> <input type = "text" id = "fzfds" style = "width: 120px "/> </td> <div id =" fzfdsTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> color: </td> <input type = "text" id = "ys" style = "width: 120px "/> </td> <div id =" ysTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> your EMAIL: </td> <input type = "text" id = "email" style = "width: 120px "/> </td> <div id =" emailTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> mobile phone: </td> <input type = "text" id = "sj" style = "width: 120px "/> </td> <div id =" sjTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> zip code: </td> <input type = "text" id = "yb" style = "width: 120px "/> </td> <div id =" ybTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> not empty: </td> <input type = "text" id = "fk" style = "width: 120px "/> </td> <div id =" fkTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> image: </td> <input type = "text" id = "tp" style = "width: 120px "/> </td> <div id =" tpTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> compressed file: </td> <input type = "text" id = "rar" style = "width: 120px "/> </td> <div id =" rarTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> ip4: </td> <input type = "text" id = "ip4" style = "width: 120px "/> </td> <div id =" ip4Tip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> QQ number: </td> <input type = "text" id = "qq" style = "width: 120px "/> </td> <div id =" qqTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> domestic phone number: </td> <input type = "text" id = "dh" style = "width: 120px "/> </td> <div id =" dhTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> User Name: </td> <input type = "text" id = "yhm" style = "width: 120px "/> </td> <div id =" yhmTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> letter: </td> <input type = "text" id = "zm" style = "width: 120px "/> </td> <div id =" zmTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> uppercase letters: </td> <input type = "text" id = "dxzm" style = "width: 120px "/> </td> <div id =" dxzmTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> lowercase letters: </td> <input type = "text" id = "xxzm" style = "width: 120px "/> </td> <div id =" xxzmTip "style =" width: 300px "> </div> </td> </tr> <td align =" right "> ID card: </td> <input type = "text" id = "sfz" style = "width: 120px "/> </td> <div id =" sfzTip "style =" width: 300px "> </div> </td> </tr> </table>
4. Code in <script>
<Script type = "text/javascript"> $ (document ). ready (function () {$. formValidator. initConfig ({formID: "form1", onError: function () {alert ("Verification Failed. For details about the error, see the error prompt ")}}); $ ("# sfz "). formValidator ({onShow: "enter a 15-or 18-digit ID card", onfocus: "enter a 15-or 18-digit ID card", onCorrect: "enter correct "}). regexValidator ({regExp: "idcard", dataType: "enum", onError: "Incorrect ID card format"}); $ ("# sfz1 "). formValidator ({onShow: "enter a 15-or 18-digit ID card", onfocus: "enter a 15-or 18-digit ID card", onCorrect: "enter correct "}). functionValidator ({fun: isCardID}); $ ("# zs "). formValidator ({onShow: "enter an integer", onCorrect: "Thank you for your cooperation. Your integer is correct "}). regexValidator ({regExp: "intege", dataType: "enum", onError: "Incorrect integer format"}); $ ("# zzs "). formValidator ({onShow: "enter a positive integer", onCorrect: "Thank you for your cooperation. Your positive integer is correct "}). regexValidator ({regExp: "intege1", dataType: "enum", onError: "Incorrect positive integer format"}); $ ("# fzs "). formValidator ({onShow: "enter a negative integer", onCorrect: "Thank you for your cooperation. Your negative integer is correct "}). regexValidator ({regExp: "intege2", dataType: "enum", onError: "Incorrect negative integer format"}); $ ("# sz "). formValidator ({onShow: "Enter the number", onCorrect: "Thank you for your cooperation. Your number is correct "}). regexValidator ({regExp: "num", dataType: "enum", onError: "incorrect number format"}); $ ("# zs1 "). formValidator ({onShow: "enter a positive number", onCorrect: "Thank you for your cooperation. Your positive number is correct "}). regexValidator ({regExp: "num1", dataType: "enum", onError: "Incorrect positive number format"}); $ ("# fs "). formValidator ({onShow: "enter a negative number", onCorrect: "Thank you for your cooperation. Your negative number is correct "}). regexValidator ({regExp: "num2", dataType: "enum", onError: "Incorrect negative number format"}); $ ("# sj "). formValidator ({onShow: "Enter your mobile phone number", onfocus: "It must start at 13 or 15.", onCorrect: "Thank you for your cooperation, your mobile phone number is correct "}). regexValidator ({regExp: "mobile", dataType: "enum", onError: "Incorrect mobile Phone Number Format"}); // $ ("#"). formValidator ({onShow: "", onfocus: "enter", onCorrect: "Thank you for your cooperation "}). regexValidator ({regExp: "", dataType: "enum", onError: "Incorrect format"}); $ ("# email "). formValidator ({onShow: "Please input 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: "enter a floating point number", onCorrect: "Thank you for your cooperation. Your floating point number is correct "}). regexValidator ({regExp: "decmal", dataType: "enum", onError: "Incorrect floating point format"}); $ ("# zfds "). formValidator ({onShow: "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: "Incorrect Positive floating point format"}); $ ("# ffds "). formValidator ({onShow: "enter a negative floating point number", onCorrect: "Thank you for your cooperation. Your negative floating point number is correct "}). regexValidator ({regExp: "decmal", dataType: "enum", onError: "Incorrect negative floating point format"}); $ ("# fffds "). formValidator ({onShow: "enter a non-negative floating point number", onCorrect: "Thank you for your cooperation. Your non-negative floating point number is correct "}). regexValidator ({regExp: "decmal4", dataType: "enum", onError: "The non-negative floating point format is incorrect"}); $ ("# fzfds "). formValidator ({onShow: "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: "incorrect non-Positive floating point format"}); $ ("# ys "). formValidator ({onShow: "Please input hexadecimal color", onCorrect: "Thank you for your cooperation. Your hexadecimal color is correct "}). regexValidator ({regExp: "color", dataType: "enum", onError: "The hexadecimal color format is incorrect"}); $ ("# yb "). formValidator ({onShow: "Enter the zip code", onfocus: "composed of six digits", onCorrect: "Thank you for your cooperation. your zip code is correct "}). regexValidator ({regExp: "zipcode", dataType: "enum", onError: "Incorrect zip code format"}); $ ("# ip4 "). formValidator ({onShow: "Enter ip4", onfocus: "Example: 172.16..201.18", onCorrect: "Thank you for your cooperation. Your ip4 is correct "}). regexValidator ({regExp: "ip4", dataType: "enum", onError: "Incorrect ip4 format"}); $ ("# fk "). formValidator ({onShow: "enter a non-empty character", onCorrect: "Thank you for your cooperation. Your non-empty characters are correct "}). regexValidator ({regExp: "notempty", dataType: "enum", onError: "invalid non-empty character format"}); $ ("# tp "). formValidator ({onShow: "Enter the image name", onCorrect: "Thank you for your cooperation. Your image name is correct "}). regexValidator ({regExp: "picture", dataType: "enum", onError: "incorrect image name format"}); $ ("# rar "). formValidator ({onShow: "Enter the compressed file name", onCorrect: "Thank you for your cooperation. Your compressed file name is correct "}). regexValidator ({regExp: "rar", dataType: "enum", onError: "The compressed file name format is incorrect"}); $ ("# qq "). formValidator ({onShow: "Enter the QQ number", onCorrect: "Thank you for your cooperation. Your QQ number is correct "}). regexValidator ({regExp: "qq", dataType: "enum", onError: "Incorrect qq number format"}); $ ("# dh "). formValidator ({onShow: "Enter your domestic phone number", onfocus: "For example: 0577-888888 or omit area code 88888888", onCorrect: "Thank you for your cooperation. Your domestic phone number is correct "}). regexValidator ({regExp: "tel", dataType: "enum", onError: "Incorrect domestic phone format"}); $ ("# yhm "). formValidator ({onShow: "Enter your username", onCorrect: "Thank you for your cooperation. Your username is correct "}). regexValidator ({regExp: "username", dataType: "enum", onError: "Incorrect username format"}); $ ("# zm "). formValidator ({onShow: "Enter the letter", onCorrect: "Thank you for your cooperation. Your letter is correct "}). regexValidator ({regExp: "letter", dataType: "enum", onError: "Incorrect letter format"}); $ ("# dxzm "). formValidator ({onShow: "Please input uppercase letters", onCorrect: "Thank you for your cooperation. Your capital letters are correct "}). regexValidator ({regExp: "letter_u", dataType: "enum", onError: "Incorrect uppercase letter format"}); $ ("# xxzm "). formValidator ({onShow: "Enter lowercase letters", onCorrect: "Thank you for your cooperation. Your lowercase letter is correct "}). regexValidator ({regExp: "letter_l", dataType: "enum", onError: "invalid lowercase letter format"}); $ ("# sfz "). formValidator ({onShow: "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 .:
6. Add modification instructions:
$. FormValidator. reloadAutoTip (); // reload the Form validation style if (! $. FormValidator. pageIsValid ('1') return false; // if not passed, do not submit $ (document ). ready (function () {$. formValidator. initConfig ({formID: "form1", onError: function () {alert ("Verification Failed. For details about the error, see the error prompt ")}}); $ ("# name "). formValidator ({onShow: "enter your name! ", OnFocus:" Enter one to ten characters ", onCorrect:" The input is correct. Thank you for your cooperation! "}). InputValidator ({min: 1, max: 20, onError:" input length, no! "}); $ (" # Timelong "). formValidator ({onShow:" Enter the road show duration! ", OnFocus:" The input format is a positive integer! ", OnCorrect:" The input is correct. Thank you for your cooperation! "}). RegexValidator ({regExp:" intege1 ", dataType:" enum ", onError:" The time format you entered is incorrect! "}); $ (" # Address "). formValidator ({onShow:" enter the name of the road show platform! ", OnFocus:" Enter one to fifty characters ", onCorrect:" The input is correct. Thank you for your cooperation! "}). InputValidator ({min: 1, max: 50, onError:" input length, no! "}); $ (" # Urladdress "). formValidator ({onShow:" Enter the road show link address! ", OnFocus:" input format: http://www.baidu.com ", onCorrect:" correct input, thank you for your cooperation! "}). RegexValidator ({regExp: "^ (http | https | ftp) \: // ([a-zA-Z0-9 \. \-] + (\: [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 incorrect! "}); $ (" # Time "). formValidator ({onCorrect:" correct format "}). functionValidator ({fun: isDateTime, onError:" incorrect input format! "}); $ (" # Txtcontent "). formValidator ({onShow:" enter an expert profile! ", OnFocus:" Enter one to one hundred characters ", onCorrect:" The input is correct. Thank you for your cooperation! "}). InputValidator ({min: 1, max: 100, onError:" input length, no! "});});
Verify the existence of a user using ajax
Js Code (the name value must be set in html; otherwise, the value cannot be obtained dynamically)
$ ("# UserID "). formValidator ({ajax: true, onShow: "enter an account", onfocus: "it is best to start with a letter, which can only consist of letters and numbers and cannot be less than 6 characters. ", OnCorrect:" The user name can be used. Please complete the following information. "}). RegexValidator ({regExp:" username ", dataType:" enum ", onError:" the format you entered is incorrect! "}). 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 user name cannot be less than 6 characters long. ";} Else if (data =" false ") {return" the user name has been registered. Change the user name. ";}}, Buttons: $ (" # button "), error: function (jqXHR, textStatus, errorThrown) {alert (" the server does not return data, and the server may be busy, please try again "+ errorThrown) ;}, onError:" This user name is unavailable, please change the user name ", onWait:" the validity of the user name is being verified. Please wait... "}). defaultPassed (); // If defapaspassed () is added here, it is verified by default.
General handler code
Public void ProcessRequest (HttpContext context) {context. response. contentType = "text/plain"; # region determines whether the user has been registered string returnStr = ""; // The context is used. request. queryString must set the name value of the space 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 determines whether the user has been registered with public bool isExist (string userName) {Snet. BLL. userAccount bll = new BLL. userAccount (); return bll. exists (userName) ;}# endregion
The above is all the content of this article, hoping to help you learn.
Articles you may be interested in:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
