Formvalidator example [from network]

Source: Internet
Author: User

Jquery formvalidator Form Verification plug-in

Upgrade history

 

Bug Description: The ajaxvalidator function has an error after submission. If it stays on this page, triggering verification again will keep the prompt content in the onload status.

This bug has been fixed. Please download it again.

 

2008/7/17 14:12:00 jquery formvalidator 3.1ver

1. Add the empty attribute for inputvalidator. Used to set whether the control text value can be empty on both sides. For details, see the password verification code in demo1.
This attribute is an object. The default value is {leftempty: True, rightempty: True, emptyerror: NULL}
Leftempty: whether to allow null on the left
Rightempty: whether to allow null on the right
Emptyerror: the prompt when this error occurs. If it is null, The onerror attribute is used to prompt the error.
Note: it can only be used when type: "size" is used, that is, when the length is compared.

2. Modify the syntax of the Automatic Build prompt layer. Add the relativeid attribute to the formvalidator function.
Relativeid: indicates the relative positioning control ID of the prompt layer. If it is null, the ID of the current check control is used.
Tipid: indicates the ID of the automatically created prompt layer. If it is null, use the ID + "tip" of the current validation control to name it.

3. Fixed the bug of the beforesend attribute in the ajaxvalidator function. The Code forgets to pass its unique parameter.

4. Fixed the bug where the ajaxvalidator function could not obtain Chinese characters in the background.

5. Updated the upgrade record, user manual, and added two questions.

 

For more update records, click here

 

1. On-site demonstration

 

 

Http://www.yhuan.com/formvalidator/demo1.htm

 

2. Main Functions of the jquery pagevalidator plug-in

 

Supports verification of all types of client controls
Supports all the selector Syntax of jquery, as long as the control has a unique ID and type attribute
Supports expansion of functions and regular expressions. The extension library formvalidatorreg. JS is provided. You can add and modify the content freely.
Two verification modes are supported. First: Text prompt (showword mode); Second: pop-up window prompt (showalert Mode)
Multiple Validation groups are supported. If a page has multiple submit buttons and you have to submit them separately, you must perform different verification before submitting them. Therefore, you must use the verification group function.
Supports information prompting in four states, allowing you to flexibly control whether or not four States are displayed. First: prompt when you open the webpage; Second: prompt when you get the focus; Third: prompt when the focus is lost, and fourth: error message indicating verification failure when the focus is lost.
Supports automatic creation of the prompt layer. Can be precisely located.
Supports custom error message.
Supports control of character length, value range, and number of selections. The value range supports the numeric and numeric types. The selected number supports three controls: radio, checkbox, and select.
Comparison of Two control values is supported. Currently, you can compare string and numeric types.
Server-side verification is supported.
Supports validation of input formats.

 

3. jquery formvalidator plug-in API help document

Click here for help documentation

4. Download API help, source code, and examples

Http://files.cnblogs.com/wzmaodong/formValidator3.1.rar

Http://files.cnblogs.com/wzmaodong/formValidator2.4.rar

Verification Code upgradeer

5. Sample Code

<SCRIPT type = "text/JavaScript">
$ (Document). Ready (function (){
$. Formvalidator. initconfig ({onerror: function () {alert ("check failed. For details about the error, see the error prompt ")}});
$ ("# Test1 "). formvalidator ({onshow: "Enter the user name", onfocus: "The user name must be at least 6 characters and a maximum of 10 characters", oncorrect: "Congratulations, you have entered the correct information "}). inputvalidator ({min: 6, Max: 10, onerror: "The user name you entered is invalid. Please confirm "});

$ ("# Test2 "). formvalidator ({onshow: "Please select your hobbies (at least three, up to five)", onfocus: "You should select at least three, up to five ", oncorrect: "Congratulations, you selected it "}). inputvalidator ({min: 3, Max: 5, onerror: "The number you selected is incorrect (at least three, up to five )"});

$ ("# Test3 "). formvalidator ({onshow: "select at least one of your hobbies.", onfocus: "select at least one.", oncorrect: "congratulations, you have selected "}). inputvalidator ({min: 1, onerror: "The number you selected is incorrect "});

$ ("# Xueli "). formvalidator ({onshow: "select your education level", onfocus: "education level required", oncorrect: "Thank you for your cooperation "}). selectvalidator ({onerror: "Have you forgotten your degree! "});

$ ("# Password1 "). formvalidator ({onshow: "enter the password", onfocus: "The two passwords must be consistent", oncorrect: "consistent passwords "}). inputvalidator ({min: 1, onerror: "The password cannot be blank. Please confirm "}). comparevalidator ({Desid: "password2", operateor: "=", onerror: "Two different passwords, please confirm "});

$ ("# Nl "). formvalidator ({onshow: "Enter the age between 1 and 99 years old)", onfocus: "Only numbers between 1 and 99 can be entered.", oncorrect: "congratulations, you entered the correct "}). inputvalidator ({min: 1, Max: 99, type: "value", onerror: "The age must be between 1 and 99. Please confirm "});

$ ("# Aiguo "). formvalidator ({onshow: "patriotic people must select Oh", onfocus: "You have to think carefully", oncorrect: "I don't know if you love or not, you chose "}). inputvalidator ({min: 1, Max: 1, onerror: "Aren't you patriotic? Select for me !!!! "});

$ ("# Shouji "). formvalidator ({empty: True, onshow: "Enter your mobile phone number. It can be blank.", onfocus: "If you have entered the phone number, you must enter it correctly.", oncorrect: "Thank you for your cooperation", onempty: "Do you really want to leave a mobile phone number? "}). Inputvalidator ({min: 11, Max: 11, onerror: "the mobile phone number must be 11 digits. Please confirm "}). regexvalidator ({Regexp: "^ [1] [0-9] {10} $", onerror: "Your entered mobile phone format is incorrect "});

$ ("# Lxdh "). formvalidator ({empty: True, onshow: "Enter your contact number. It can be blank.", onfocus: "If you have entered it, you must enter it correctly. The format is as follows: 0577-88069620 ", oncorrect:" Thank you for your cooperation ", onempty:" Do you really want to leave a contact number? "}). Regexvalidator ({Regexp:" ^ [[0-9] {3}-|/[0-9] {4}-]? (/[0-9] {8} | [0-9] {7 })? $ ", Onerror:" the contact number format you entered is incorrect "});

$ ("# Ms "). formvalidator ({onshow: "Enter your description", onfocus: "The description must contain at least 10 or 20 characters." oncorrect: "congratulations, you entered the correct "}). inputvalidator ({min: 20, onerror: "The length of the description you entered is incorrect. Please confirm "});
});
</SCRIPT>

6. Special Instructions

If you encounter any problems during use, please leave a message to me. If you find bugs, please do not modify them by yourself. Also, please leave a message to improve the plug-in and truly serve every program developer.
Please keep the copyright statement of the plug-in. Thank you.

 

This article from the csdn blog, reproduced please indicate the source: http://blog.csdn.net/pengchua/archive/2008/10/29/3166198.aspx

 

 

 

 

 

 

 

$ ("# Password1 "). formvalidator ({onshow: "enter the password", onfocus: "The password cannot be blank and the length must be greater than 4", oncorrect: "The password is valid "}). inputvalidator ({min: 4, empty: {leftempty: false, rightempty: false, emptyerror: "There are no empty symbols on both sides of the password"}, onerror: "The password cannot be blank, please confirm "});
$ ("# Password2 "). formvalidator ({onshow: "Enter the duplicate password", onfocus: "The two passwords must be consistent", oncorrect: "consistent passwords "}). inputvalidator ({min: 4, empty: {leftempty: false, rightempty: false, emptyerror: "Duplicate passwords cannot have empty symbols on both sides"}, onerror: "Duplicate passwords cannot be blank, please confirm "}). comparevalidator ({Desid: "password1", operateor: "=", onerror: "Two different passwords, please confirm "});
$ ("# Ddltype "). formvalidator ({onshow: "select account type", onfocus: "account must be selected", oncorrect: "Thank you for your cooperation "}). inputvalidator ({min: 1, onerror: "Have you forgotten to select the Account type! "}). Defaultpassed ();

 

 

 

 

$ (Document). Ready (function (){

// $. Formvalidator. initconfig ({onerror: function () {alert ("check failed. For details about the error, see the error prompt ")}});

$. Formvalidator. initconfig ({formid: "form1", onerror: function (MSG) {alert (MSG)}, onsuccess: function () {alert ('ddd '); return false ;}});

$ ("# Test1 "). formvalidator ({onshow: "Enter the user name, which is correct only when you enter/" maodong/", onfocus:" The user name must contain at least 6 characters and a maximum of 10 characters ", oncorrect: "This user name can be registered "}). inputvalidator ({min: 6, Max: 10, onerror: "The user name you entered is invalid. Please confirm "}). regexvalidator ({Regexp: "username", datatype: "Enum", onerror: "Incorrect username format "})

. Ajaxvalidator ({

Type: "Get ",

URL: "default. aspx ",

Datatype: "JSON ",

Success: function (data ){

If (Data = "1 ")

{

Return true;

}

Else

{

Return false;

}

},

Buttons: $ ("# button "),

Error: function () {alert ("the server does not return data. The server may be busy. Please try again ");},

Onerror: "This user name is unavailable. Please change the user name ",

Onwait: "the validity of the user name is being verified. Please wait ..."

});

$ ("# Password1 "). formvalidator ({onshow: "enter the password", onfocus: "The password cannot be blank", oncorrect: "The password is valid "}). inputvalidator ({min: 1, empty: {leftempty: false, rightempty: false, emptyerror: "There are no empty symbols on both sides of the password"}, onerror: "The password cannot be blank, please confirm "});

$ ("# Password2 "). formvalidator ({onshow: "Enter the duplicate password", onfocus: "The two passwords must be consistent", oncorrect: "consistent passwords "}). inputvalidator ({min: 1, empty: {leftempty: false, rightempty: false, emptyerror: "Duplicate passwords cannot have empty symbols on both sides"}, onerror: "Duplicate passwords cannot be blank, please confirm "}). comparevalidator ({Desid: "password1", operateor: "=", onerror: "Two different passwords, please confirm "});

$ (": Radio [name = 'sex']"). formvalidator ({tipid: "sextip", onshow: "Please select your gender", onfocus: "There is no third gender. Please choose one.", oncorrect: "entered correctly", defaultvalue: ["1"]}). inputvalidator ({min: 1, Max: 1, onerror: "You forgot to select a gender. Please confirm "});//. defaultpassed ();

$ ("# Nl "). formvalidator ({onshow: "Enter the age between 1 and 99 years old)", onfocus: "Only numbers between 1 and 99 can be entered.", oncorrect: "congratulations, you entered the correct "}). inputvalidator ({min: 1, Max: 99, type: "value", onerrormin: "the value you entered must be greater than or equal to 1", onerror: "The age must be between 1 and 99, please confirm (enter the correct information before leaving the focus )"});//. defaultpassed ();

$ ("# Csny "). focus (function () {wdatepicker ({skin: 'whygreen', oncleared: function () {$ (this ). blur () ;}, onpicked: function () {$ (this ). blur ();}})}). formvalidator ({onshow: "Enter the Date of Birth", onfocus: "Enter the date of birth, not all 0", oncorrect: "the date you entered is valid "}). inputvalidator ({min: "1900-01-01", Max: "2000-01-01", type: "date", onerror: "the date must be in the range of/" 1900-01-01/"and/" 2000-01-01 "});//. defaultpassed ();

$ ("# Sfzh "). formvalidator ({onshow: "enter a 15-or 18-digit ID card", onfocus: "enter a 15-or 18-digit ID card", oncorrect: "enter correct "}). functionvalidator ({fun: iscardid });

$ ("# Email "). formvalidator ({onshow: "Please enter your email address", onfocus: "Mailbox 6-characters, enter the correct information to exit the Focus", oncorrect: "Congratulations, you have entered the correct information", defaultvalue: "@", forcevalid: true }). inputvalidator ({min: 6, Max: 100, onerror: "the email you entered is invalid. Please confirm "}). regexvalidator ({Regexp: "^ ([// w-.] +) @ ([0-9] {1, 3 }. [0-9] {1, 3 }. [0-9] {1, 3 }.) | ([// w-] + .) +) ([A-Za-Z] {2, 4} | [0-9] {1, 3}) (]?) $ ", Onerror:" The email format you entered is incorrect "});

$ ("# Xueli "). formvalidator ({onshow: "Please select your degree", onfocus: "You must select a degree", oncorrect: "Thank you for your cooperation", defaultvalue: ""}). inputvalidator ({min: 1, onerror: "Have you forgotten your degree! "}). Defaultpassed ();

$ ("# Ewjy "). formvalidator ({onshow: "An extra verification error will be prompted no matter what you enter.", onfocus: "If you enter/" /", the extra verification will succeed.", oncorrect: "Extra Verification Successful "}). inputvalidator ({min: 1, onerror: "at least one character is required here. Please confirm "}). functionvalidator ({

Fun: function (Val, ELEM ){

If (val = "maodong "){

Return true;

} Else {

Return "extra Verification Failed. If you want to pass the extra verification, enter/" /""

}

}

});

$ ("# Tel_country "). formvalidator ({tipid: "teltip", onshow: "enter the country code", onfocus: "Country Code 2 digit", oncorrect: "Congratulations, you have entered", defaultvalue: "86 "}). regexvalidator ({Regexp: "^ // d {2} $", onerror: "incorrect country code "});

$ ("# Tel_area "). formvalidator ({tipid: "teltip", onshow: "Enter the region code", onfocus: "region code 3 or 4 digits", oncorrect: "congratulations, you entered the correct "}). regexvalidator ({Regexp: "^ // d {3, 4} $", onerror: "Incorrect Region ID "});

$ ("# Tel_number "). formvalidator ({tipid: "teltip", onshow: "Enter the phone number", onfocus: "phone number: 7 to 8 digits", oncorrect: "congratulations, you entered the correct "}). regexvalidator ({Regexp: "^ // d {7, 8} $", onerror: "Incorrect phone number "});

$ ("# Tel_ext "). formvalidator ({tipid: "teltip", onshow: "Enter extension number", onfocus: "extension number 1 to 5 digits", oncorrect: "congratulations, you entered the correct "}). regexvalidator ({Regexp: "^ // d {} $", onerror: "Incorrect extension number "});

$ (": Checkbox [name = 'checkbox1']"). formvalidator ({tipid: "test3tip", onshow: "Please select your interests (at least one)", onfocus: "You should select at least one", oncorrect: "congratulations, you have selected "}). inputvalidator ({min: 1, onerror: "The number you selected is incorrect "});

$ (": Checkbox [name = 'checkbox8']"). formvalidator ({tipid: "test2tip", onshow: "Please select your interests (at least two, up to three)", onfocus: "You should select at least two, you can select up to 3 ", oncorrect:" Congratulations, you have selected ", defaultvalue: [" 7 "," 8 "]}). inputvalidator ({min: 2, Max: 3, onerror: "The number you selected is incorrect (at least two, up to three )"});

$ (": Radio [name = 'Radio ']"). formvalidator ({tipid: "aiguotip", onshow: "patriotic people must choose Oh", onfocus: "You have to think carefully", oncorrect: "I don't know if you love or not, you chose ", defaultvalue: [" 4 "]}). inputvalidator ({min: 1, Max: 1, onerror: "Aren't you patriotic? Select for me !!!! "}). Defaultpassed ();

$ ("# Shouji "). formvalidator ({empty: True, onshow: "Enter your mobile phone number. It can be blank.", onfocus: "If you have entered the phone number, you must enter it correctly.", oncorrect: "Thank you for your cooperation", onempty: "Do you really want to leave a mobile phone number? "}). Inputvalidator ({min: 11, Max: 11, onerror: "the mobile phone number must be 11 digits. Please confirm "}). regexvalidator ({Regexp: "mobile", datatype: "Enum", onerror: "Incorrect Mobile Phone Number Format "});;

$ ("# Lxdh "). formvalidator ({empty: True, onshow: "Enter your contact number. It can be blank.", onfocus: "Format: 0577-88888888", oncorrect: "Thank you for your cooperation", onempty: "Do you really want to leave a contact number? "}). Regexvalidator ({Regexp:" ^ [[0-9] {3}-|/[0-9] {4}-]? ([0-9] {8} | [0-9] {7 })? $ ", Onerror:" the contact number format you entered is incorrect "});

$ ("# Selectmore "). formvalidator ({onshow: "press Ctrl to select multiple", onfocus: "press Ctrl to select multiple, at least two", oncorrect: "Thank you for your cooperation", defaultvalue: ["0", "1", "2"]}). inputvalidator ({min: 2, onerror: "select at least 2 "});

$ ("# Ms "). formvalidator ({onshow: "Enter your description", onfocus: "The description must contain at least 10 or 20 characters.", oncorrect: "Congratulations, you have entered the correct description ", defaultvalue: "This guy is very lazy and has nothing left. "}). Inputvalidator ({min: 20, onerror:" The length of the description you entered is incorrect. Please confirm "});

});

Function Test (OBJ)

{

If (obj. value = "Do not verify ID card ")

{

$ ("# Sfzh"). ATTR ("disabled", true). unformvalidator (true );

OBJ. value = "verify ID card ";

}

Else

{

$ ("# Sfzh"). ATTR ("disabled", false). unformvalidator (false );

OBJ. value = "Do not verify ID card ";

}

}

Function test1 (OBJ)

{

If (obj. value = "full-width characters as 1 length ")

{

$. Formvalidator. getinitconfig ("1"). wideword = false;

OBJ. value = "full-width characters as two lengths ";

}

Else

{

$. Formvalidator. getinitconfig ("1"). wideword = true;

OBJ. value = "full-width characters as 1 length ";

}

}

 

This article from the csdn blog, reproduced please indicate the source: http://blog.csdn.net/zx_values/archive/2010/04/28/5532339.aspx

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.