jquery Plug-in validate.js form verification (1/3)

Current version: 1.5.5
jquery version required: 1.2.6+, compatible 1.3.2
<script src= ". /js/jquery.js "type=" Text/javascript "></script>
<script src= ". /js/jquery.validate.js "type=" Text/javascript "></script>

Second, the default checksum rule
(1) Required:true must be lost field
(2) Remote: "check.php" use Ajax method to invoke check.php validate input value
(3) Email:true must enter the correct format email
(4) Url:true must enter the URL in the correct format
(5) Date:true must enter a date in the correct format
(6) Dateiso:true must enter the correct format of the date (ISO), for example: 2009-06-23, 1998/01/22 only verify the format, do not verify the validity
(7) Number:true must enter a valid number (negative, decimal)
(8) Digits:true must enter an integer
(9) CreditCard: Must enter the legal credit card number
(a) Equalto: "#field" input value must be the same as #field
(one) Accept: Enter a string with a valid suffix name (the suffix of the uploaded file)
(Maxlength:5) A string with a maximum of 5 input length (Chinese characters are counted as one character)
(Minlength:10) A string with a minimum input length of 10 (Chinese characters are counted as one character)
(rangelength:[5,10] Enter a string that must be between 5 and 10) (Chinese characters are counted as one character)
() range:[5,10] The 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

Third, the default hint
Messages: {
Required: "This field is required.",
Remote: "Please fix this field.",
Email: "Please enter a valid e-mail 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.",
Number: "Please enter a valid number.",
Numberde: "Bitte geben Sie eine Nummer.",
Digits: "Please enter only digits",
CreditCard: "Please enter a valid card number.",
Equalto: "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, you can add in the JS code:
Jquery.extend (JQuery.validator.messages, {
Required: "Required fields",
Remote: "Please fix this field",
Email: "Please enter the correct format email",
URL: "Please enter a valid URL",
Date: "Please enter a valid date",
Dateiso: "Please enter a valid date (ISO).",
Number: "Please enter legal numbers",
Digits: "Only integers can be entered",
CreditCard: "Please enter a valid credit card number",
Equalto: "Please enter the same value again",
Accept: "Please enter a string with a legal suffix name",
Maxlength:jQuery.validator.format ("Please enter a string with a maximum length of {0}"),
Minlength:jQuery.validator.format ("Please enter a string with a length of at least {0}"),
Rangelength:jQuery.validator.format ("Please enter a string 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 max {0}"),
Min:jQuery.validator.format ("Please enter a value of min {0}")
});
Recommended practice, put this file into Messages_cn.js, and introduce it into the page
<script src= ". /js/messages_cn.js "type=" Text/javascript "></script>

Iv. Mode of Use
1. Officers transferred Guevara rules are written to the control
<

The code is as follows

Copy Code

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"/> </p> <p> <label for= "Email" >e-mail</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" Confirm_password "type=" password "class=" {required:true,minlength:5,equalto: ' #password '} '/> </p> <p> <input type= "Submit" value= "submit"/> </p> </form>

The package must be introduced in the way class= ' {} ' is used: jquery.metadata.js
You can modify the hint by using the following methods:
Class= ' {required:true,minlength:5,messages:{required: ' Please enter the content '}} '
When using the Equalto keyword, the following text must be enclosed in quotation marks, as follows:
Class= "{required:true,minlength:5,equalto: ' #password '}"
Another way to use keywords: meta (for meta data use other plug-ins you want to wrap your validation rules in their own projects can use this particular option)
Tell the validation plugin to look inside a validate-property into metadata for validation rules.
For example:
Meta: "Validate"
<input id= "password" name= "password" type= "password"/>

There is another way:
$.metadata.settype ("attr", "validate");
This can be done using validate= "{required:true}", or class= "required", but class= "{required:true,minlength:5}" will not work

2. Officers transferred Guevara rules are written in the code

The code is as follows

Copy Code

$ (). Ready (function () { $ ("#signupForm"). Validate ({ Rules: { FirstName: "Required", Email: { Required:true, Email:true }, Password: { Required:true, Minlength:5 }, Confirm_password: { Required:true, Minlength:5, Equalto: "#password" } }, Messages: { FirstName: "Please enter your name", Email: { Required: "Please enter your email address", Email: "Please enter the correct email address" }, Password: { Required: "Please enter the password", Minlength:jQuery.format ("Password cannot be less than {0} characters") }, Confirm_password: { Required: "Please enter confirmation password", MinLength: "Confirm password cannot be less than 5 characters", Equalto: "Two input passwords inconsistent inconsistent" } } }); }); Messages, if a control does not have a message, the default information is invoked <form id= "Signupform" method= "Get" action= "" > <p> <label for= "FirstName" >Firstname</label> <input id= "FirstName" name= "FirstName"/> </p> <p> <label for= "Email" >E-Mail</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 type= "Submit" value= "Submit"/> </p> </form>

Required:true must have a value
Required: The value of the "#aa: Checked" expression is true, you need to verify
Required:function () {} returns True, the table requires validation
Two of the elements that are commonly used in the form that need to be filled in or not filled in at the same time

home 1 2 3 last