Validate Notes of jquery

Default classification 2010-04-04 20:35:01 Read 123 Comments 0 font size: Big Small
Jquery.validate is a validation framework for jquery, and with the advantage of jquery, we can quickly validate some of the common inputs and expand our own validation methods and support internationalization as well.
Description: Requires jquery version: 1.2.6+
Steps:
1, to import the corresponding jquery.js and jquery.validate.js files
<script src= "Jquery.js" type= "Text/javascript" ></script>
<script src= "Jquery.validate.js" type= "Text/javascript" >
2, specify the validation rule on the appropriate field
Name *<input type= "text" name= "LoginName" class= "required" >
where class= "Required" represents this field must be entered data
3, specify that you want to validate the form
<script type= "Text/javascript" >
$ (function () {
$ ("#testForm"). Validate ();
});
</script>

Effects such as:
1. Basic knowledge
1.1. Specify how validation rules are
1.1.1. Writing validation rules to the class attribute of a field element
Cases:
Name * <input type= "text" name= "LoginName" class= "required" ><br>
Secret * <input type= "password" name= "password" class= "required" ><br>
Re-enter <input type= "password" name= "Password2"
Class= "{equalto: ' [Name=password] '} required" ><br>
Birthday <input type= "text" name= "Birthday" class= "Dateiso" ><br>
E-mail *<input type= "text" name= "email" class= "email" ><br>
PAR (Zip) <input type= "file" name= "resource" class= "{accept: ' Zip '} ' >

Description
1, if you use the class= "{}" method, you must introduce the package: Jquery.metadata.js
1.1.2. Validation rules for passing fields when calling the Validate () method
$ (function () {
$ ("#testForm"). Validate ({
Rules: {
loginname:{
Required:true,
Min:2
} ,
Password: {
Required:true
},
Password2: {
Equalto: "Input[name=password]"
}
}
});
});
1.2. Built-in validation rules
Required:true must lose field
Remote: "check.php" using Ajax method call check.php Validate input value
Email:true must enter the correct format of the e-mail
Url:true must enter the URL in the correct format
Date:true must enter a date in the correct format
Dateiso:true must enter the correct format for the date (ISO), for example: 2010-01-01, 2010/01/01 only verify the format, does not validate the validity
Number:true must enter a valid number (negative, fractional)
Digits:true must enter an integer
CreditCard: Must enter a valid credit card number
Equalto: The "#field" input value must be the same as #field
Accept: "Gif|png|jpg" Enter a string with a legal suffix (the suffix of the uploaded file), with the ' | ' between multiple suffixes Separated
Maxlength:5 input string with a maximum length of 5 (Chinese characters are counted as one character)
Minlength:10 enter a string with a minimum length of 10 (Chinese characters are counted as one character)
RANGELENGTH:[5,10] Enter a string that must be between 5 and 10 in length (Chinese characters are counted as one character)
RANGE:[5,10] Input value must be between 5 and 10
Max:5 input value cannot be greater than 5
Min:10 input value cannot be less than 10
Description
1, remote is remotely authenticated: For example, registration verifies that the user name has been registered, the return value can only be true (validation succeeds) or False (validation failed).
2, the quotation marks in some attribute values cannot be omitted, otherwise an error occurs. such as accept, Equalto and so on.
1.3. Custom validation rules
In addition to the built-in validation rules, validation also allows custom validation rules. This is done through the validation addmethod () method, which is:
JQuery.validator.addMethod ("name", Function,message)
which
1, name of the validation rule
2, the function defines the rules for validation. Parameters have?. The return value is?.
3, message is a hint when validation fails.
1.4. Specifying error message Content
1.4.1. Changing the default prompt content
Jquery.extend (JQuery.validator.messages, {
Required: "Required field",
Remote: "Please fix this field",
Email: "Please enter the correct format of e-mail",
URL: "Please enter a valid URL",
Date: "Please enter a valid date",
Dateiso: "Please enter a valid date (ISO).",
Number: "Please enter a valid digit",
Digits: "Can only enter integers",
CreditCard: "Please enter a valid credit card number",
Equalto: "Please enter the same value again",
Accept: "Please enter a string with a valid suffix name",
Maxlength:jQuery.validator.format ("Maximum allowed length is {0} characters"),
Minlength:jQuery.validator.format ("minimum allowable length is {0} characters"),
Rangelength:jQuery.validator.format ("allowed lengths are between {0} and {1}"),
Range:jQuery.validator.format ("Please enter a value between {0} and {1}"),
Max:jQuery.validator.format ("Please enter a value of {0} max"),
Min:jQuery.validator.format ("Please enter a value of minimum {0}")
Extension Tools
StringMinLength:jQuery.validator.format ("Please enter a string less than {0}, a Chinese character length of 2"),
StringMaxLength:jQuery.validator.format ("Please enter a string greater than}, a Chinese character length of 2"),
String: "With special symbols!",
Byterangelength: "Make sure the value entered is between 3-15 bytes (2 bytes in one text)",
STRINGCH: "Can only input Chinese characters, a Chinese character accounted for two bytes",
Stringen: "Only enter letters"

1.4.2. Individual forms change the prompt content (valid only for the current form)
Method One:
<input type= "File" Name= "Parresource"
Class= "{accept: ' Zip ', messages: {accept: ' Please select the correct file '} ' >

Method Two:
$ (function () {
$ ("#testForm"). Validate ({
messages:{
LoginName: {
Required: "Required field 2"
},
Email: {
Required: ' Required field 22 ',
Email: "Please enter the correct format of e-mail 2"
}
}
});
});
1.5. Change the error message display style
You can specify the style of the Label.error, as follows:
<style type= "Text/css" >
label.error{
margin-left:10px;
color:red;
}
</style>

Description: Label.error refers to a LABEL element with class error, such as: <label for= "resource" class= "error" >


This is the soup Sunshine Teacher said, although the teacher is very young, but his technology is very high, before learning a lot of knowledge, so there is a place of confusion, but since the teacher gave us lectures, I feel he has a kind of Java technology spirituality, whatever is in his there can always get the sublimation of the mind! Really admire!

function Diymethod () {
Minimum character length verification (one Chinese characters length is 2)
JQuery.validator.addMethod ("Stringminlength", function (value, element, param) {
var length = Value.length;
for (var i = 0; i < value.length; i++) {
if (Value.charcodeat (i) > 127) {
length++;
}
}
return this.optional (Element) | | (length >= param);
}, $.validator.format ("length cannot be less than {0}!"));

Character Maximum length verification (one Chinese characters length is 2)
JQuery.validator.addMethod ("Stringmaxlength", function (value, element, param) {
var length = Value.length;
for (var i = 0; i < value.length; i++) {
if (Value.charcodeat (i) > 127) {
length++;
}
}
return this.optional (Element) | | (length <= param);
}, $.validator.format ("length cannot be greater than {0}!"));

Character verification
JQuery.validator.addMethod ("string", function (value, Element) {
return this.optional (Element) | | /^[\u0391-\uffe5\w]+$/.test (value);
}, "Do not allow special symbols!");

Chinese characters two bytes
JQuery.validator.addMethod ("Byterangelength", function (value, element, param) {
var length = Value.length;
for (var i = 0; i < value.length; i++) {
if (Value.charcodeat (i) > 127) {
length++;
}
}
return this.optional (Element) | | (length >= param[0] && length <= param[1]);
}, "Make sure the value entered is between 3-15 bytes (2 bytes in one text)");

You can only enter Chinese
JQuery.validator.addMethod ("Stringch", function (value, Element) {
var length = Value.length;
for (var i = 0; i < value.length; i++) {
if (Value.charcodeat (i) > 127) {
length++;
}
}
return this.optional (Element) | | /[^u4e00-u9fa5]/g.test (value);
}, "can only input Chinese characters, a Chinese character accounted for two bytes");

Only 26 letters can be entered
JQuery.validator.addMethod ("Stringen", function (value, Element) {
var length = Value.length;
for (var i = 0; i < value.length; i++) {
if (Value.charcodeat (i) > 127) {
length++;
}
}
alert (length);
return this.optional (Element) | | /^[a-za-z]+$/g.test (value);
}, "only enter letters");
}