The basic usage of JQuery validate extension

The basic usage of JQuery validate extension

Validate is used for B/s structure client verification using the jquery extension, the use of the need to refer to two JS files, respectively:
<script src= ". /contents/js/jquery-1.5.js "type=" text/Web Effects "></script>
<script src= ". /contents/js/jquery.validate.min.js "type=" Text/javascript "></script>

The default prompts at the back of the text box can modify Jquery.validate.min.js, find and replace English in Chinese, and styles can be changed through the CSS tutorial's class style such as. Required,.email, of course, the class here can be separated by a space between one or more items, The syntax format is the same as CSS, and the items you can choose from are:

(1) Required:true must be lost field
(2) Remote: "check.php Tutorial" 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

1, the basic use of methods, through the style set up validation rules

Instance

<!

DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>

<script src= "Jquery-1.5.js" type= "Text/javascript" ></script>

<script src= "Jquery.validate.min.js" type= "Text/javascript" ></script>

    <script type= "Text/javascript"
        JQuery.validator.addMethod ("regex", //addmethod 1th parameter: Method name
        function (value, element, params) {    //addmethod 2nd Parameter: Authentication method,
            //Validation method parameters (values of validated elements, validated elements, parameters)
             var exp = new RegExp (params);    //instantiation of regular objects, parameters for user-passed regular expressions
            return Exp.test (value);                    //Test Match
       },
        format error);

$ (function () {
$ ("#signupForm"). Validate (

The new section in the previous example
{
Rules: {
TxtPassword1: "Required",//password 1 required

                TxtPassword2: {    //Password 2 describes more than 1 items using the object type
                     required:true, //required, this can be an anonymous method
                     Equalto: "# TxtPassword1 ", //must be equal to password 1
                     rangelength: [5, 10],   //length 5-10 between
                     Regex: "^ w+$          //Use custom validation rules
                },

                txtemail: "Email",   //e-mail must be legal
                 Sex: "Required"
           },
             messages: { //corresponds to the error message above
                 txtPassword1: "You must fill in",

TxtPassword2: {
Required: "You must fill in",
Equalto: "Password Inconsistent",
Rangelength: "String length must be between {0} and {1}",
Regex: "Password can only be numbers, letters and underscores"
}
},

Errorplacement:function (Error, Element) {//Specify error message Location
if (Element.is (': Radio ') | | | element.is (': CheckBox ')) {//If radio or checkbox
var Eid = element.attr (' name '); Get the element's Name property
Error.appendto (Element.parent ()); To add an error message after the parent node of the current element
} else {
Error.insertafter (Element);
}
},

Debug:false,//if modified to true, the form will not be submitted
Submithandler:function () {
Alert ("Beginning of submission");
}
});
});
</script>

<style type= "Text/css" >
*
{
font-size:14px;
}
#signupForm Label.error
{
color:red;
font-size:13px;
margin-left:5px;
padding-left:16px;
Background:url ("Error.png") left no-repeat;
}
</style>
<body>
<form id= "Signupform" method= "Get" action= "" >
<fieldset>
<legend> User Registration </legend>
<p>
<label for= "TxtPassword1" >
Password 1</label>
<input id= "TxtPassword1" name= "TxtPassword1" type= "text"/>
</p>
<p>
<label for= "TxtPassword2" >
Password 2</label>
<input id= "TxtPassword2" name= "TxtPassword2" type= "text"/>
</p>
<p>
<label for= "Txtemail" >
Email </label>
<input id= "Txtemail" name= "Txtemail"/>
</p>
<p>
<label for= "Sex" >
Sex </label>
<input type= "Radio" id= "Rdofemale" name= "sex"/> Male
<input type= "Radio" id= "Rdomale" name= "Sex"/> Female
</p>
<p>
<label for= "Txtage" >
Age </label>
<input id= "Txtage" name= "Txtage" min= "a" max= ""/>
<!--age is only between 18-45-->
</p>
<p>
<input type= "Submit" value= "submitted"/>
</p>
</fieldset>
</form>
</body>