Jquery verification control jquery. Validate. js + jquery. Validate. unobtrusive. js usage

ArticleDirectory

• Jquery Verification

Jquery. Validate. unobtrusive. js usage:

Jquery. Validate. unobtrusive. JS is simple to use. You can use the following attributes of a tag!

 
Reference JavaScript <SCRIPT src = "http://code.jquery.com/jquery-1.6.2.min.js"> </SCRIPT> <SCRIPT src = "http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"> </SCRIPT>
<SCRIPT src = "http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"> </SCRIPT>
 

 
The latest cdn js reference can be viewed, http://www.asp.net/ajaxLibrary/CDN.ashx
 

<Label for = "TID"> domain account: <Label data-valmsg-for = "TID"> </label>
<Input type = "text" id = "TID" runat = "server" data-val = "true" data-Val-required = "enter an account"/> <label = "tpwd"> password: <Label data-valmsg-for = "tpwd"> </label>
<Input type = "text" id = "tpwd" runat = "server" runat = "server" data-val = "true" data-Val-required = "enter the password" />
 

 
<Asp: button id = "btnsignin" runat = "server" text = "sign in" onclick = "btnsignin_click"/>
 

 
Jquery verification control jquery. Validate. JS:
 

Jquery Verification

Address: http://bassistance.de/jquery-plugins/jquery-plugin-validation

1. Import the JS Library

<SCRIPT src = "../JS/jquery. js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "../JS/jquery. Validate. js" type = "text/JavaScript"> </SCRIPT>

Ii. Default verification rules

(1) required: required field for true
(2) Remote: "check. php" uses ajax to call check. php to verify the input value.
(3) Email: true: You must enter an email in the correct format.
(4) URL: True must enter the URL in the correct format
(5) Date: true: You must enter a date in the correct format to verify IE6. Use it with caution.
(6) dateiso: true: the date (ISO) in the correct format must be entered. For example, 2009-06-23,1998/01/22: only the format is verified and the validity is not verified.
(7) number: true: a valid number (negative number, decimal number) must be entered)
(8) digits: True must be an integer.
(9) creditcard: a valid credit card number must be entered.
(10) must to: "# field" the input value must be the same as # Field
(11) accept: enter a string with a valid suffix (the suffix of the uploaded file)
(12) maxlength: A string with a maximum length of 5 characters)
(13) minlength: 10 string with a minimum input length of 10 (one character for Chinese characters)
(14) rangelength: [5, 10] The input length must be a string between 5 and 10. ") (a Chinese character is a single character)
(15) range: [5, 10] The input value must be between 5 and 10.
(16) max: 5 input value cannot be greater than 5
(17) min: 10 input value cannot be less than 10

3. default prompt

Messages :{
Required: "This field is required .",
Remote: "Please fix this field .",
Email: "Please enter a valid email address .",
URL: "Please enter a valid URL .",
Date: "Please enter a valid date .",
Dateiso: "Please enter a valid date (ISO ).",
Datede: "bitte geben Sie ein g eyebrow ltiges datum ein .",
Number: "Please enter a valid number .",
Numberde: "bitte geben Sie eine nummer ein .",
Digits: "Please enter only digits ",
Creditcard: "Please enter a valid credit card number .",
Failed to: "Please enter the same value again .",
Accept: "Please enter a value with a valid extension .",
Maxlength: $. validator. Format ("Please enter no more than {0} characters ."),
Minlength: $. validator. Format ("Please enter at least {0} characters ."),
Rangelength: $. validator. Format ("Please enter a value between {0} and {1} characters long ."),
Range: $. validator. Format ("Please enter a value between {0} and {1 }."),
MAX: $. validator. Format ("Please enter a value less than or equal to {0 }."),
Min: $. validator. Format ("Please enter a value greater than or equal to {0 }.")
},

If you need to modify it, you canCodeAdd:

Jquery. Extend (jquery. validator. Messages ,{
Required: "required fields ",
Remote: "Please correct this field ",
Email: "Please enter an email in the correct format ",
URL: "enter a valid URL ",
Date: "enter a valid date ",
Dateiso: "enter a valid date (ISO ).",
Number: "enter a valid number ",
Digits: "Only integers can be entered ",
Creditcard: "enter a valid credit card number ",
Similar to: "Please enter the same value again ",
Accept: "enter a string with a valid suffix ",
Maxlength: jquery. validator. Format ("enter a string with a maximum length of {0 "),
Minlength: jquery. validator. Format ("enter a string with at least {0} length "),
Rangelength: jquery. validator. Format ("enter a string between {0} and {1 "),
Range: jquery. validator. Format ("enter a value between {0} and {1 "),
MAX: jquery. validator. Format ("enter a maximum value of {0 "),
Min: jquery. validator. Format ("enter a minimum value of {0 ")
});

We recommend that you add this file to messages_cn.js and introduce it on the page.
<SCRIPT src = "../JS/messages_cn.js" type = "text/JavaScript"> </SCRIPT>

Iv. usage method 1. Write the validation rule to the control

<SCRIPT src = "../JS/jquery. js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "../JS/jquery. Validate. js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "./JS/jquery. Metadata. js" type = "text/JavaScript"> </SCRIPT>

$ (). Ready (function (){
$ ("# Signupform"). Validate ();
});

<Form ID = "signupform" method = "get" Action = "">
<P>
<Label for = "firstname"> firstname </label>
<Input id = "firstname" name = "firstname" class = "required"/>
</P>
<P>
<Label for = "email"> email </label>
<Input id = "email" name = "email" class = "required email"/>
</P>
<P>
<Label for = "password"> password </label>
<Input id = "password" name = "password" type = "password" class = "{required: True, minlength: 5}"/>
</P>
<P>
<Label for = "confirm_password"> Confirm Password </label>
<Input id = "confirm_password" name = "confirm_password" type = "password" class = "{required: True, minlength: 5, failed to: '# password'}"/>
</P>
<P>
<Input class = "Submit" type = "Submit" value = "Submit"/>
</P>
</Form>

To use class = "{}", you must introduce the package: jquery. Metadata. js.

You can use the following method to modify the prompt content:
Class = "{required: True, minlength: 5, messages: {required: 'Enter the content '}}"

When using the sort to keyword, the following content must be enclosed in quotation marks, as shown in the following code:
Class = "{required: True, minlength: 5, failed to: '# password '}"

2. Write validation rules to JS Code

$ (). Ready (function (){
$ ("# Signupform"). Validate ({
Rules :{
Firstname: "required ",
Email :{
Required: True,
Email: True
},
Password :{
Required: True,
Minlength: 5
},
Confirm_password :{
Required: True,
Minlength: 5,
Failed to: "# password"
}
},
Messages :{
Firstname: "enter your name ",
Email :{
Required: "Enter the email address ",
Email: "enter the correct email address"
},
Password :{
Required: "enter the password ",
Minlength: jquery. Format ("the password cannot be less than {0} characters ")
},
Confirm_password :{
Required: "enter the password ",
Minlength: "The password cannot be less than five characters ",
Similar to: "inconsistent passwords entered twice"
}
}
});
});

// If a control does not have a message, the default message is called.

<Form ID = "signupform" method = "get" Action = "">
<P>
<Label for = "firstname"> firstname </label>
<Input id = "firstname" name = "firstname"/>
</P>
<P>
<Label for = "email"> email </label>
<Input id = "email" name = "email"/>
</P>
<P>
<Label for = "password"> password </label>
<Input id = "password" name = "password" type = "password"/>
</P>
<P>
<Label for = "confirm_password"> Confirm Password </label>
<Input id = "confirm_password" name = "confirm_password" type = "password"/>
</P>
<P>
<Input class = "Submit" type = "Submit" value = "Submit"/>
</P>
</Form>

Required: True must have a value
If the value of the required: "# Aa: checked" expression is true, you need to verify
Required: function () {} returns true, which must be verified during table verification.
The following two types of elements are commonly used: elements that need to be filled in or out of the form