Examples of jQuery plugin formValidator custom function extensions _ jquery-js tutorial

This article mainly introduces the jQuery formins formValidator custom Function Extension function, and analyzes common judgment and verification techniques of the jQuery formins formValidator in combination with examples, which is very simple and practical, for more information, see the examples in this article. We will share this with you for your reference. The details are as follows:

What is the jQuery formValidator Form Verification plug-in? Interested readers can refer to jQuery formValidator Form Verification plug-in and other related documents on this site.

Some text is omitted here.

In actual projects, the form applications are diverse, and the subsequent verification is also changeable. However, Jquery formValidator provides a user-defined function interface, which I personally think is the most powerful. Let's talk a little bit about it.

Example 1: choose at least one of the landline and mobile phone numbers.

Analysis: This is a combination verification. Different verification conditions need to be performed based on the user's selection of frames.

Knowledge Point: Jquery formvalidator provides the function interface functionValidator ({fun: funname });

Landline mobile phone

$ ("# TxtMobileTel, # txtContactTel "). formValidator ({tipid: "txtMobileTelTip", onshow: "enter any contact number", onfocus: "enter a mobile phone number or landline phone number", oncorrect: "enter correct! "}). FunctionValidator ({fun: allEmpty}); function allEmpty (val, elem) {if ($ ("# txtMobileTel "). val () = "" & $ ("# txtContactTel "). val () = "") {return 'enter your mobile phone number or landline phone number';} else {if ($ ("# txtMobileTel "). val ()! = "" & $ ("# TxtContactTel"). val ()! = "") {If ($ ("# txtMobileTel "). val ()). search (/^ (13 [0-9] {1}) | (15 [0-9] {1}) + \ d {8 }) $ /)! =-1) {if ($ ("# txtContactTel"). val (). search (/^ ([0 \ +] \ d {2, 3 }-)? (0 \ d {2, 3 })-)? (\ D {7, 8}) (-(\ d {3 ,}))? $ /)! =-1) {return true} else {return "landline phone format error" ;}} else {return "Mobile Phone format error ";}} else {if ($ ("# txtMobileTel "). val ()! = "") {If ($ ("# txtMobileTel "). val ()). search (/^ (13 [0-9] {1}) | (15 [0-9] {1}) + \ d {8 }) $ /)! =-1) {return true} else {return "Incorrect mobile phone format" ;}} if ($ ("# txtContactTel"). val ()! = "") {If ($ ("# txtContactTel"). val (). search (/^ ([0 \ +] \ d {2, 3 }-)? (0 \ d {2, 3 })-)? (\ D {7, 8}) (-(\ d {3 ,}))? $ /)! =-1) {return true} else {return "landline format error ";}}}};

Example 2: cascade drop-down. If no secondary region exists, uncheck the drop-down list.

Provincial/Municipal Cascade

$ ("# DdlOne "). formValidator ({onshow: "select province and city", onfocus: "province and city must be selected", oncorrect: "entered correctly "}). inputValidator ({min: 1, onerror: "select a valid region "}). functionValidator ({fun: city}); $ ("# ddlTwo "). formValidator ({onshow: "select city", onfocus: "city must be selected", oncorrect: "entered correctly "}). inputValidator ({min: 1, onerror: "select a valid region"}); function city (val, elem) {var a = ""; $. getJSON (".. /Customer/Area. ashx? Parentid = "+ $ (" # ddlOne option: selected "). val (), null, function (json) {if (json [0]. areacode = "0") {$ ("# ddlTwo "). attr ("disabled", true ). unFormValidator (true); // unlock verification} else {$ ("# ddlTwo "). attr ("disabled", false ). unFormValidator (false); // restore verification }});}

Common Verification:

Integer:

The Code is as follows:

$ ("# Zs "). formValidator ({onshow: "enter an integer", oncorrect: "Thank you for your cooperation. Your integer is correct "}). regexValidator ({regexp: "intege", datatype: "enum", onerror: "Incorrect integer format "});

Positive Integer:

The Code is as follows:

$ ("# Zzs "). formValidator ({onshow: "enter a positive integer", oncorrect: "Thank you for your cooperation. Your positive integer is correct "}). regexValidator ({regexp: "intege1", datatype: "enum", onerror: "Incorrect positive integer format "});

Negative integer:

The Code is as follows:

$ ("# Fzs "). formValidator ({onshow: "enter a negative integer", oncorrect: "Thank you for your cooperation. Your negative integer is correct "}). regexValidator ({regexp: "intege2", datatype: "enum", onerror: "Incorrect negative integer format "});

Positive number:

The Code is as follows:

$ ("# Zs1 "). formValidator ({onshow: "enter a positive number", oncorrect: "Thank you for your cooperation. Your positive number is correct "}). regexValidator ({regexp: "num1", datatype: "enum", onerror: "Incorrect positive number format "});

Number:

The Code is as follows:

$ ("# Sz "). formValidator ({onshow: "Enter the number", oncorrect: "Thank you for your cooperation. Your number is correct "}). regexValidator ({regexp: "num", datatype: "enum", onerror: "Incorrect digit format "});

Negative Number:

The Code is as follows:

$ ("# Fs "). formValidator ({onshow: "enter a negative number", oncorrect: "Thank you for your cooperation. Your negative number is correct "}). regexValidator ({regexp: "num2", datatype: "enum", onerror: "Incorrect negative number format "});

Floating point:

$ ("# Zfds "). formValidator ({onshow: "enter a Positive floating point number", oncorrect: "Thank you for your cooperation. Your Positive floating point number is correct "}). regexValidator ({regexp: "decmal1", datatype: "enum", onerror: "Incorrect Positive floating point format"}); $ ("# ffds "). formValidator ({onshow: "enter a negative floating point number", oncorrect: "Thank you for your cooperation. Your negative floating point number is correct "}). regexValidator ({regexp: "decmal", datatype: "enum", onerror: "Incorrect negative floating point format"}); $ ("# fffds "). formValidator ({onshow: "enter a non-negative floating point number", oncorrect: "Thank you for your cooperation. Your non-negative floating point number is correct "}). regexValidator ({regexp: "decmal4", datatype: "enum", onerror: "The non-negative floating point format is incorrect"}); $ ("# fzfds "). formValidator ({onshow: "enter a non-Positive floating point number", oncorrect: "Thank you for your cooperation. Your non-Positive floating point number is correct "}). regexValidator ({regexp: "decmal5", datatype: "enum", onerror: "incorrect non-Positive floating point format "});

Mobile phone:

The Code is as follows:

$ ("# Sj "). formValidator ({onshow: "Enter your mobile phone number", onfocus: "It must start at 13 or 15.", oncorrect: "Thank you for your cooperation, your mobile phone number is correct "}). regexValidator ({regexp: "mobile", datatype: "enum", onerror: "Incorrect mobile Phone Number Format "});

Landline:

The Code is as follows:

$ ("# Dh "). formValidator ({onshow: "Enter your domestic phone number", onfocus: "For example: 0577-888888 or omit area code 88888888", oncorrect: "Thank you for your cooperation. Your domestic phone number is correct "}). regexValidator ({regexp: "tel", datatype: "enum", onerror: "Incorrect domestic phone format "});

Email:

The Code is as follows:

$ ("# Email "). formValidator ({onshow: "Please input your email", onfocus: "Please note the email format you entered, for example: wzmaodong@126.com", oncorrect: "Thank you for your cooperation, your email is correct "}). regexValidator ({regexp: "email", datatype: "enum", onerror: "Incorrect email format "});

Zip code:

The Code is as follows:

$ ("# Yb "). formValidator ({onshow: "Enter the zip code", onfocus: "composed of six digits", oncorrect: "Thank you for your cooperation. your zip code is correct "}). regexValidator ({regexp: "zipcode", datatype: "enum", onerror: "Incorrect zip code format "});

QQ:

The Code is as follows:

$ ("# Qq "). formValidator ({onshow: "Enter the QQ number", oncorrect: "Thank you for your cooperation. Your QQ number is correct "}). regexValidator ({regexp: "qq", datatype: "enum", onerror: "Incorrect qq number format "});

ID card:

The Code is as follows:

$ ("# Sfz "). formValidator ({onshow: "Enter your ID card", oncorrect: "Thank you for your cooperation. your ID card is correct "}). regexValidator ({regexp: "idcard", datatype: "enum", onerror: "Incorrect ID card format "});

Letter:

The Code is as follows:

$ ("# Zm "). formValidator ({onshow: "Enter the letter", oncorrect: "Thank you for your cooperation. Your letter is correct "}). regexValidator ({regexp: "letter", datatype: "enum", onerror: "Incorrect letter format "});

Uppercase letters:

The Code is as follows:

$ ("# Dxzm "). formValidator ({onshow: "Please input uppercase letters", oncorrect: "Thank you for your cooperation. Your capital letters are correct "}). regexValidator ({regexp: "letter_u", datatype: "enum", onerror: "Incorrect uppercase letter format "});

Lowercase letters:

The Code is as follows:

$ ("# Xxzm "). formValidator ({onshow: "Enter lowercase letters", oncorrect: "Thank you for your cooperation. Your lowercase letter is correct "}). regexValidator ({regexp: "letter_l", datatype: "enum", onerror: "invalid lowercase letter format "});

I hope this article will help you with jQuery programming.