Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to achieve form verification in validate in jquery". In daily operation, I believe that many people have doubts about how to achieve form verification in validate in jquery. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt of "how to achieve form verification in jquery". Next, please follow the editor to study!

I. purpose

In order to better realize the human-computer interaction, using the validate plug-in in the jQuery wrapper library, when the user fills out the form, the user can quickly verify the data filled in and give feedback.

II. Brief introduction of validate plug-in

Validate () is the core method of the plug-in, defining basic validation rules and some useful configuration items.

Rule: set validation rules for forms

Messages: sets the message that the form does not comply with the validation rules

Debug: if this parameter is true, then the form will also be submitted, only for checking, which is very convenient when debugging.

Required: required

Minlength: minimum length

Maxlength: maximum length

Rangelength: length range, presented as an array [2Jing 10], indicating that the form input length is 2 to 10 digits

Remote: remote authentication can be performed by discovering GET or POST requests, which can be compared with Ajax validation. It is realized through ajax.

{

Url:

Type: defaults to GET request

Data: data sent

}

Example of sending a GET request:

Check: {required:true, remote: {url: "_ _ CONTROLLER__/check?check=" + $("# icode"). Val / / _ CONTROLLER__ represents the current controller}}

Basic verification rules

The ordinal rule describes the fields that 1required:true must enter. 2remote: "check.php" uses the ajax method to call check.php to validate the input value. 3email:true must enter an email in the correct format. 4url:true must enter a URL in the correct format. 5date:true must enter a date in the correct format. Date check ie6 error, use with caution. The 6dateISO:true must enter a date in the correct format (ISO), for example: 2009-06-23, 1998-06-23. Only validate the format, not validate it. 7number:true must enter a legal number (negative, decimal). 8digits:true must enter an integer. 9creditcard: you must enter a valid credit card number. 10equalTo: the input value of "# field" must be the same as # field. 11accept: enter a string with a legal suffix (the suffix of the uploaded file). 12maxlength:5 inputs a string with a maximum length of 5 (Chinese characters are counted as one character). 13minlength:10 inputs a string with a minimum length of 10 (Chinese characters are counted as one character). 14rangelength: [5Jing 10] input must be a string between 5 and 10 in length (Chinese characters are counted as one character). 15range: [5pm 10] the input value must be between 5 and 10. The 16max:5 input value cannot be greater than 5. The 17min:10 input value cannot be less than 10.

Validator object

Validator.form () verifies that the form is valid and returns true or false

Validator.element (element) validates whether an element in the form is valid and returns true or false

Validator.resetForm () restores the form to its original state before validation

Validator.showErrors (error) displays specific error messages for elements

Validator.numberOfInvalids () returns an invalid number of elements

Static methods of validator object

JQuery.validator.addMethod () adds a custom validation method; (that is, $.validator.addMethod ())

JQuery.validator.format () formats the string, replacing {n} in the template with a parameter

JQuery.validator.setDefaults () modify the default design of the plug-in

JQuery.validator.addClassRules () adds a combinatorial validation type to some class that contains the name name.

$.validator.addClassRules ({txt: {required:true, rangelength: [2mer10]}}) / / at this time, the classes of class= "txt" all have these two validation rules.

Get the validation rules for the form element:

("# username") .rules ()

Add a validation rule for the form element:

$("# username"). Rules ('add',rules)

Delete the validation rule for the form element:

$("# username"). Rules ('remove',rules)

III. Regular expressions

Common regular expressions:

Regular expression verification of user name: / ^ [\ w\ u4e00 -\ u9fa5] {2pm 10} / g (including Chinese characters)

User name verification: / ^\ w {2jol 10} $/ (no Chinese characters, only English letters, numbers and underscores are allowed, length is 2-10 digits)

Verification of QQ number: / ^ [1Magi 9] [0JEI 9] {4jue 19} $/ (the first digit is not 0Jing 5-19 digits)

Email verification: / ^ [a-z0-9] + @ ([a-z0-9] +\.) + [a murz] {2pm 4} $/ I (case-insensitive)

Password authentication: / ^\ w {6pm 16} $/ (only 6-16 digits of letters, numbers and underscores are allowed)

Verification of mobile phone number: / ^ 1 [3jue 5je 7je 8]\ d {9} $/

URL verification: / ^ http:\ /\ / [a murz\ d -] + (\ w\ /) +) $/ I

$(document) .ready (function () {$("# table"). Validate ({rules: {admin_name: {required:true, checkName:true,}, name: {required:true,}, admin_pwd: {required:true, checkPwd:true,}, con_pwd: {required:true EqualTo:admin_pwd,}, email: {required:true, checkEmail:true,}, qq: {required:true, checkQQ:true,}, s_page: {url:true,}, check: {/ / required:true / / remote: {/ / url: "_ CONTROLLER__/check?check=" + $("# icode"). Val, / / _ CONTROLLER__ indicates the current controller / / dataType: "json", / /}, messages: {admin_name: {required: "* required!" , rangelength: "* length is 2 to 10 digits!" ,}, name: {required: "* required!" ,}, admin_pwd: {required: "* required!" , rangelength: "* length is 6 to 16 bits!" ,}, con_pwd: {required: "* required!" , equalTo: "* the passwords entered twice are not the same!" }, email: {required: "* required!" , email: "* Please enter the correct mailbox!" ,}, qq: {required: "* required!" ,}, s_page: {url: "* Please enter the correct web address!" ,}, check: {required: "* required!" , remote: "* wrong CAPTCHA!" ,},}, / / whether to verify / / onfocusout:false when getting focus, / / whether to verify / / onkeyup:false when keystroke, / / after submitting the form, (the first) the unvalidated form gets the focus focusInvalid:true, / / remove the error prompt focusCleanup:true when the unvalidated element gets focus,}) / / Custom regular expression shows the verification method $.validator.addMethod ("checkQQ", function (value,element,params) {var checkQQ = / ^ [1-9] [0-9] {4jue 19} $/; return this.optional (element) | | (checkQQ.test (value));}, "* Please enter the correct QQ number!") ; $.validator.addMethod ("checkEmail", function (value,element,params) {var checkEmail = / ^ [a-z0-9] + @ ([a-z0-9] +\.) + [a murz] {2jue 4} $/ I; return this.optional (element) | | (checkEmail.test (value));}, "* Please enter the correct mailbox!") ; $.validator.addMethod ("checkName", function (value,element,params) {var checkName = / ^\ w {2 ^ 10} $/ g; return this.optional (element) | | (checkName.test (value));}, "* only 2-10 letters, numbers or underscores are allowed!") ; $.validator.addMethod ("checkPwd", function (value,element,params) {var checkPwd = / ^\ w {6pm 16} $/ g; return this.optional (element) | | (checkPwd.test (value));}, "* only 6-16 characters are allowed, numbers or underscores!") At this point, the study on "how to implement form validation in validate in jquery" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.