Jquery validate Summary

Today, we found that jquery still has the jquery validate feature, which can be used to verify the form. Below is a review and summary:

1. Use jqueryvalidate. js.

Http://bassistance.de/jquery-plugins/jquery-plugin-validation/

2. Example

<SCRIPT>

Function checkidcard (Num ){

VaR Len = num. length, RE;

If (LEN = 15)

Re = new Regexp (/^ (\ D {6 })()? (\ D {2}) (\ D {2}) (\ D {2}) (\ D {3}) $ /);

Else if (LEN = 18)

Re = new Regexp (/^ (\ D {6 })()? (\ D {4}) (\ D {2}) (\ D {2}) (\ D {3}) (\ D) $ /);

Else {

// Alert ("enter a 15 or 18-digit ID card number. You entered a" + Len + "digit ");

Return false;

}

VaR A = num. Match (re );

If (! = NULL ){

If (LEN = 15 ){

VaR d = new date ("19" + A [3] + "/" + A [4] + "/" + A [5]);

VaR B = D. getyear () = A [3] & (D. getmonth () + 1) = A [4] & D. getdate () = A [5];

} Else {

VaR d = new date (A [3] + "/" + A [4] + "/" + A [5]);

VaR B = D. getfullyear () = A [3] & (D. getmonth () + 1) = A [4] & D. getdate () = A [5];

}

If (! B ){

// Alert ("ID card number entered" + A [0] + "contains incorrect birthdate! ");

Return false;

}

}

Return true;

}

</SCRIPT>

<SCRIPT type = "text/JavaScript">

$. Validator. setdefaults ({

Submithandler: function () {alert ("submitted! ");}

});

// Add verification method (ID card number verification)

Jquery. validator. addmethod ("isidcardno", function (value, element ){

Return this. Optional (element) | checkidcard (value );

}, "Enter your ID card number correctly ");

$ (). Ready (function (){

$ ("# Firstform"). Validate ();

$ ("# Secondform"). Validate ({

/* Errorlabelcontainer: "# MessageBox", // container ID that displays the error message

Wrapper: "Li", // container containing each error message */

Rules :{

XM :{

Required: True,

Minlength: 2,

Maxlength: 5

},

PWD :{

Required: True,

Minlength: 6

},

Confirm_pwd :{

Required: True,

Failed to: "# PWD"

},

F2csrq :{

Required: True,

Date: True

},

F2xjzd :{

Required: True

},

F2sfzh :{

/* Digits: True,

Rangelength: [18, 20] */

Required: True,

Isidcardno: True

}

},

Messages :{

XM :{

Required: "Please enter your name ",

Minlength: "The length cannot be less than 2 characters ",

Maxlength: "The length cannot exceed 5 characters"

},

PWD :{

Required: "enter the password ",

Minlength: "The length cannot be less than 6 characters"

},

Confirm_pwd :{

Required: "enter your password again ",

Failed to: "inconsistent passwords"

},

F2csrq :{

Required: "Enter the Date of Birth ",

Date: "The date format is incorrect (for example, 2009/04/07 )"

},

F2xjzd :{

Required: "Enter the address"

},

F2sfzh :{

/* Digits: "the ID card number can only be a number ",

Rangelength: "the ID number is 18 ~ 20 characters "*/

Required: "Enter your ID card number ",

Isidcardno: "Incorrect ID card number"

}

}

});

/* // When the input box gets the focus, set the style

$ ('Input'). Focus (function (){

If ($ (this). Is (": Text") | $ (this). Is (": Password "))

$ (This). addclass ('focal ');

If ($ (this). hasclass ('have _ tooltip ')){

$ (This). Parent (). Parent (). removeclass ('field _ normal'). addclass ('field _ focal ');

}

});

// When the input box loses the focus, set the style

$ ('Input'). Blur (function (){

$ (This). removeclass ('focal ');

If ($ (this). hasclass ('have _ tooltip ')){

$ (This). Parent (). Parent (). removeclass ('field _ focal '). addclass ('field _ normal ');

}

});*/

});

</SCRIPT>

Note: Adding required to the class in the input field is required. The others are verification data. For example, email is the verification data structure.

The following lists the default verification items provided by validate.

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. Format ("enter a string with a maximum length of {0 "),

Minlength: jquery. Format ("enter a string with at least {0} length "),

Rangelength: jquery. Format ("enter a string between {0} and {1 "),

Range: jquery. Format ("enter a value between {0} and {1 "),

MAX: jquery. Format ("enter a maximum value of {0 "),

Min: jquery. Format ("enter a minimum value of {0 ")

Optional values of validate ()

Debug: debug mode

$

(". Selector"). Validate

({

Debug: True

})

Set debugging as default

$

. Validator. setdefaults

({

Debug: True

})

Submithandler: use other methods to replace the default submit, such as Ajax-based submission.

$

(". Selector"). Validate

({

Submithandler: function (form ){

$

(Form). ajaxsubmit ();

}

})

Ignore: Ignore some elements not verified

$

("# Myform"). Validate

({

Ignore: ". Ignore"

})

Rules: by default, it is determined based on form classes, attributes, and metadata, but it can also be declared in the validate function.

Key/value can be customized. Key is the object name. value is the object's rule. You can use class/attribute/metadata rules in combination.

The following code specifically verifies that name = 'name' In the selector class is required and email is both required and conforms to the email format

$

(". Selector"). Validate

({

Rules :{

// Simple rule, converted to {required: true}

Name: "required ",

// Compound rule

Email :{

Required: True,

Email: True

}

}

})

Messages: Change the default message.

$

(". Selector"). Validate

({

Rules :{

Name: "required ",

Email :{

Required: True,

Email: True

}

},

Messages :{

Name: "Please specify your name ",

Email :{

Required: "We need your email address to contact you ",

Email: "your email address must be in the format of name@domain.com"

}

}

})

Groups: defines a group, puts the error information consent in several places in one place, and uses errorplacement to control where the error information is put

$

("# Myform"). Validate

({

Groups :{

Username: "fname lname"

},

Errorplacement: function (error, element ){

If (element. ATTR ("name") = "fname" | element. ATTR ("name") = "lname ")

Error. insertafter ("# lastname ");

Else

Error. insertafter (element );

},

Debug: True

})

3. Add an example of jquery validate verification Date:

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

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

<Script language = "JavaScript">

<! --

Jquery (function (){

Jquery. validator. Methods. comparedate = function (value, element, Param ){

// Var startdate = jquery (PARAM). Val () + ": 00"; complete the yyyy-mm-dd hh: mm: SS format

// Value = value + ": 00 ";



VaR startdate = jquery (PARAM). Val ();



VaR date1 = new date (date. parse (startdate. Replace ("-","/")));

VaR date2 = new date (date. parse (value. Replace ("-","/")));

Return date1 <date2;

};



Jquery ("# form1"). Validate ({

Focusinvalid: false,

Rules :{

"Timestart ":{

Required: True

},

"Timeend ":{

Required: True,

Comparedate: "# timestart"

}

},

Messages :{

"Timestart ":{

Required: "the start time cannot be blank"

},

"Timeend ":{

Required: "the end time cannot be blank ",

Comparedate: "the end date must be later than the start date! "

}

}

});

});

// -->

</SCRIPT>

</Head>

<Body>

<Form ID = "form1" name = "form1" method = "Post" Action = "demo.html">

<P> timestart:

<Input name = "timestart" type = "text" id = "timestart" value = "2011-02-17 10:00:00"> yyyy-mm-dd hh: mm: SS

</P>

<P> timeend:

<Input name = "timeend" type = "text" id = "timeend" value = "2011-02-17 9:00:00"> yyyy-mm-dd hh: mm: SS

</P>

<P>

<Input type = "Submit" name = "Submit" value = "Submit">

</P>

</Form>