JQuery validate verification plug-in usage details, jqueryvalidate

JQuery validate verification plug-in usage details, jqueryvalidate

ValidateVerification plug-ins, built-in rich verification rules, and flexible custom rule interfaces. Low coupling between HTML, CSS, and JS allows you to freely layout and enrich the style, and supports input, select, textarea verification.

Description

Browser support: IE7 +, Chrome, Firefox, Safari, and Mobile Browser

JQuery version: 1.7.0 +

Usage
Load jQuery and validate

<Script type = "text/javascript" src = "jquery-1.11.1.js"> </script>
<Script type = "text/javascript" src = "jquery-validate.js"> </script>

DOM tag validation rules

<Div class = "form_control"> <input class = "required" value = "315359131@qq.com" type = "text" name = "email" data-tip = "Enter your mailbox "data-valid =" isNonEmpty | isEmail "data-error =" email cannot be blank | Incorrect email format "> </div> <div class =" form_control "> <select class = "required" data-valid = "isNonEmpty" data-error = "Province required"> <option value = ""> select a province </option> <option value = "001"> 001 </option> <option value = "002"> 002 </option> </select> </div>

Enter required for the class of the form element to be verified (other styles are not recommended for this class ).
We recommend that you use an independent div for the input, because the verification message is generated from the append of the parent element of the current input.
Data-tip:A prompt appears when the focus is obtained without verification.
Data-valid:Verification rules. If there is a combination of verification rules, it is separated by a | symbol.
Data-error:Verification error message, corresponding to data-valid, separated by | symbol.
Single-choice/check is special. You need to add an element package single-choice/check set and add verification rules to the package element.

<Div class = "form_control"> <span class = "required" data-valid = "isChecked" data-error = "gender required" data-type = "radio"> <label> <input type = "radio" name = "sex"> male </label> <input type = "radio" name = "sex"> female </label> <label> <input type = "radio" name = "sex"> unknown </label> </span> </div> <div class = "form_control"> <span class = "required" data-valid = "isChecked" data-error = "select at least one" data-type = "checkbox"> <label> <input type = "checkbox" name = "label"> Red </label> <input type = "checkbox" name = "label"> green </label> <input type = "checkbox "name =" label "> blue </label> </span> </div>

JS call

// ** Note: validate must be called as a form Element ** $ ('form '). validate ({type: {isChecked: function (value, errorMsg, el) {var I = 0; var $ collection = $ (el ). find ('input: checked'); if (! $ Collection. length) {return errorMsg ;}}, onFocus: function () {this. parent (). addClass ('active'); return false;}, onBlur: function () {var $ parent = this. parent (); var _ status = parseInt (this. attr ('data-status'); $ parent. removeClass ('active'); if (! _ Status) {$ parent. addClass ('error') ;}return false ;}});

Verification before form submission

 $('form').on('submit', function(event) {  event.preventDefault();  $(this).validate('submitValidate'); //return true or false; });

Validate built-in verification rules

Required: true mandatory field
Remote: "check. php" uses ajax to call check. php to verify the input value.
Email: true: You must enter an email in the correct format.
Url: true: Enter the url in the correct format
Date: true: the date in the correct format must be entered.
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.
Number: true: a valid number (negative number, decimal number) must be entered)
Digits: true must be an integer
Creditcard: You must enter a valid credit card number.
Similar to: "# field" the input value must be the same as # field
Accept: enter a string with a valid suffix (the suffix of the uploaded file)
Maxlength: A string with a maximum length of 5 characters)
Minlength: 10 string with a minimum length of 10 (one character for Chinese characters)
Rangelength: [5, 10] The input length must be a string between 5 and 10. ") (a Chinese character is a character)
Range: [5, 10] The input value must be between 5 and 10.
Max: 5 input values cannot exceed 5
Min: 10 input values cannot be less than 10

Example:
VerifyUser name, password, Confirm Password, home page, birthday, emailAnd so on
First introduce Jquery, introduce jquery. validate. js, introduce messages_cn.js, and define an id for the form to be verified.Name attributeAnd assign a value. This plug-in uses the name attribute of the control, not the id.

<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "jquery email verification. aspx. cs" Inherits = "exercise. jquery email Verification" %> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
Achieve the following results:

The above is all the content of this article, hoping to help you learn.