jQuery formValidator form validation plug-in presentation and online demonstration ver2.9.1


jQuery formValidator form validation plug-in presentation and online demonstration ver2.9.1

jQuery formValidator form validation plug-in plug-in now prompts the error, there are two modes: showword and showalert, the text prompts, and window tips currently supports five kinds of large calibration methods, namely: InputValidator (for input, textarea, select Control characters in length, value range, select the number of control), CompareValidator (providing two objects of comparison, to compare the current string and numeric), AjaxValidator (through ajax to the server to do data validation), RegexValidator (to provide scalable regular expression library), FunctionValidator (allows users to use an external function check)
Form validation plugin for jQuery formValidator ver2.4 provide validation code generator that can generate batch validation code

Plugin Download: http://www.cnblogs.com/wzmaodong/archive/2008/01/11/1034901.html
Check code generator: http://www.cnblogs.com/wzmaodong/archive/2008/04/21/1164317.html

Value size (numeric and character) range, the length of the value, select the number (for checkbox, radio, select)
These are a range of areas, greater than, less than the set value can be accurately tips
2 the value of the size of form elements (numeric and char) range
Check on the input format, you can write your own regular expressions, you can also use extensions of the regular expression, extension users can be extended
On user input values for server-side validation. For example: if the user exists
You can check with the external function can be regarded as a process, you can customize the returned error message. Extension to provide part of the function is called plug-in provides functions for validation
initConfig (): Check group configuration information. For example, the error patterns suggest the choice of validation success / failure of the callback function, is in debug mode
PageIsValid (): check the entire validation group
IsOneValid (): a single form element to check
GetLength (): returns the length of the form element, select the number of
SetFailState (): Set error message
RetSetTipState (): groups in the form to verify all elements of content prompted the state to return to onshow

Online Demo:

Sample code:
<script type="text/javascript">
$ (Document). Ready (function () (
$. FormValidator.initConfig ((onError: function () (alert ("check did not pass, the specific error See error ")}});
$ ("# Password1"). FormValidator ((onshow: "Please enter your password", onfocus: "password can not be empty", oncorrect: "password valid")). InputValidator ((min: 1, onerror: "password can not be empty, make sure "));

$ ("# Password2"). FormValidator ((onshow: "Enter to repeat the password", onfocus: "Two password must be the same Oh", oncorrect: "password of")). InputValidator ((min: 1, onerror: " Repeat your password can not be empty, please confirm ")). CompareValidator ((desID:" password1 ", operateor :"=", onerror:" 2 times the password is inconsistent, please confirm "));

$ ("Input: radio [name = 'sex']"). formValidator ((tipid:" sexTip ", onshow:" Please select your gender ", onfocus:" no third sex, you choose a bar " , oncorrect: "Enter the correct", defaultvalue: "2")). InputValidator ((min: 1, max: 1, onerror: "Sex forget the election, and make sure")). DefaultPassed ();

$ ("# Nl"). FormValidator ((onshow: "Please enter the age (1-99 years old)", onfocus: "can only enter a number between 1-99 Well", oncorrect: "Congratulations, You lose on a ")). InputValidator ((min: 1, max: 99, type:" value ", onerrormin:" The value you enter must be greater than equal to 1 ", onerror:" Age must be between 1-99 Please confirm ")). DefaultPassed ();

$ ("# Csny"). DateTimeMask (("lawlessmessage": "You enter the birth date format error")). FormValidator ((onshow: "Please enter the dates of birth", onfocus: "Please enter the dates of birth, can not all 0 oh ", oncorrect:" Enter the date your lawful ")). InputValidator ((min:" 1900-01-01 ", max:" 2000-01-01 ", type:" value ", onerror:" date must be in the \ "1900-01-01 \" and \ "2000-01-01 \" between the ")). DefaultPassed ();

$ ("# Sfzh"). FormValidator ((onshow: "Please enter 15 or 18 of the ID card", onfocus: "Enter 15 or 18 of the ID card", oncorrect: "Enter the correct")). FunctionValidator (( fun: isCardID));

$ ("# Email"). FormValidator ((onshow: "Please enter the mailbox", onfocus: "mailbox at least 6 characters, up to 100 characters", oncorrect: "Congratulations, you lose on the", defaultvalue: "@ ")). InputValidator ((min: 6, max: 100, onerror:" You enter the mailbox length of the illegal, 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: "You enter the email format is not correct"));

$ ("# Xueli"). FormValidator ((onshow: "Please select your education", onfocus: "Education must select", oncorrect: "Thank you for your co-ordination", defaultvalue: "a")). InputValidator ((min : 1, onerror: "You are not forgotten chosen degree of !"}). DefaultPassed ();

$ ("Input: checkbox [@ name = 'checkbox8']"). formValidator ((tipid:" test2Tip ", onshow:" Please select your interests (select at least two, maximum choice 3) ", onfocus: "You select at least two, up to select three", oncorrect: "Congratulations, you picked the right")). InputValidator ((min: 2, max: 3, onerror: "the number you choose not to (select at least 2, up to select the three )"});

$ ("Input: radio [@ name = 'radio']"). formValidator ((tipid:" aiguoTip ", onshow:" patriot must choose Oh ", onfocus:" Oh, you have to seriously consider ", oncorrect: "Do not know you love, anyway you chose", defaultvalue: "4")). InputValidator ((min: 1, max: 1, onerror: "Do not you patriotic? you for giving me choose!!!! ")). DefaultPassed ();

$ ("# Shouji"). FormValidator ((empty: true, onshow: "Please enter your phone number, can be empty oh", onfocus: "If you enter, and must enter the correct", oncorrect: "Thank you for your cooperation ", onempty:" You really do not want to stay mobile phone number ah ?"}). InputValidator ((min: 11, max: 11, onerror: "phone number must be 11, please confirm")). RegexValidator (( regexp: "mobile", datatype: "enum", onerror: "You enter the phone number format is incorrect "});;

$ ("# Lxdh"). FormValidator ((empty: true, onshow: "Please enter your contact telephone number, can be empty oh", onfocus: "format, for example :0577-88069620", oncorrect: "Thank you for your cooperation" , onempty: "You really do not want to leave you telephone the ?"}). RegexValidator ((regexp :"^[[ 0-9] (3) - | \ [0-9] (4 }-]?([ 0-9] (8) | [0-9] (7 })?$", onerror: "you enter contact phone format is not correct"));
</ Script>


javaScript front desk check jQuery.validate (2010-06-09 22:25)
Tags: javaScript validation jQuery.validate jQuery.validate expansion Category: Technology class is usually used to do web forms data checking. JavaScript validation is a relatively common means. Write a page written more recently, found a more useful framework js validation - jQuery. Validate. She is a validation tool based on jquery basically meet the needs of most of our validation page, and support for ajax validation. Support all kinds of custom extensions, including the custom validation rules, custom error display modes.
Through the use of a period of time, feel works very simple. Use here to do some simple introduction, then will introduce one of my own to prompt a wrong way of (feeling the way the default prompt more general information is not very nice).
Gossip talk less, let the next usage:
First two js files into the necessary
XML / HTML code
<script type="text/javascript" src="lib/jquery-1.4.2.min.js"> </ script>
<script type="text/javascript" src="lib/jquery.validate.js"> </ script>
There is also a css, form is used to highlight the error control and error message display style:
CSS code
input.error (border: 1px dotted red;)
label.error (
color: red; display: none;
label.error of display: none is to allow us to be placed anywhere on the page shows the wrong label and the contents of the above, and no check in when not displayed.
Need are homogeneous, we can add to our validation of form elements. The approach is to add validation to say there are two: one written in the control of the label; the other written in the js script. And the two methods can be mixed.
The first is written in the label as follows:
XML / HTML code
<input type="text" max="10" name="t1">
Expressed the need for field and for the numerical, max = "10" that the maximum is 10.
Make a way to use JavaScript scripts written as follows:

XML / HTML code
<script type="text/javascript">
$ ('# Test_form'). Validate ((
rules: (
t2: (required: true, number: true)
messages: (t2: (required: "You have to fill in this field ~~!", number:" This field really can be a number "))
</ Script>
Which is the form test_form form of id, t2 is the need to check the control's name. rules are described later in json validation rules, messages are customized error message. By the way, sometimes we form in the control of the name is with ".", Such as: user.name, this time with the js script to define validation rules, you need to add quotation marks: "user.name".
Both versions have their pros and cons of direct control labels written in simple straightforward, relatively js wording too complex, can be more flexible. And sometimes we may not have the chance to write the label in the control rules, if we use the tag library, such as the struts tag libraries, and some labels we write max = "10" of things, can not resolve tag library will direct error. In short, both written jQuery.validate knew, we choose the right scene in the right way on it.
Also, if you want to write rules for the control of the label, just write the rules is not enough, also need to load the page when the call finished about $ ('# test_form'). Validate (); to add form validation , so that when you click on the submit button will automatically check the.
Having said that, the previous plan, and check to see if the effect of:

Successful, the check had the effect of the form will not be submitted. Some students may say, and "to do so to see ah?." This is what I want to solve the following problem.
We define an error from the show the way, the effect is as follows:

Error control does not change the way highlighted, in order to control compatible with some browsers such as Firefox in some of the radio button marked red frame can not question the controls in the back of each error put a small red crosses, another when the mouse Move to the wrong control or the small crosses show the error message when.
Achieve this effect the main js code as follows:
JavaScript code
function showErrors () (
var t = this;
for (var i = 0; this.errorList [i]; i + +) (
var error = this.errorList [i];
this.settings.highlight & & this.settings.highlight.call (this, error.element, this.settings.errorClass, this.settings.validClass);

var elename = this.idOrName (error.element);
/ / Error message div
var errdiv = $ ('div [htmlfor =' + elename +']');
var errimg = $ ('img [htmlfor =' + elename +']');
if (errdiv.length == 0) (/ / div will not create

/ / Pure css rounded corners without images div, there is shown in IE6 too long under
/ / Errdiv = $ ('<div>'
/ / + '<b> <b> </ B> <b> </ b> <b> </ b> <b> </ b> </ b>'
/ / + '<span> </ Span>'
/ / + '<b> <b> </ B> <b> </ b> <b> </ b> <b> </ b> </ b>'
/ / + '</ Div>');

/ / Div with rounded corners image compatible in all browsers
errdiv = $ ('<div>'
+ '<img Src="img/left_icon.gif" width="6" height="24" align="absmiddle" />'
+ '<div> </ Div>'
+ '<img Src="img/right_icon.gif" width="6" height="24" align="absmiddle" />'
+ '</ Div>');

errdiv.attr (("for": this.idOrName (error.element), generated: true))
. AddClass (this.settings.errorClass);
/ / Errdiv.css ((left: $. GetLeft (error.element) + 'px', top: $. GetTop (error.element) + 'px')); / / displayed in the control of the following
errdiv.appendTo ($ ('body'));
if (errimg.length == 0) (/ / img is not created
errimg = $ ('<img alt=" Error " src="img/unchecked.gif">')
errimg.attr (("for": this.idOrName (error.element), generated: true));
errimg.insertAfter (error.element);
errimg.show ();
errdiv.find (". errmsg"). html (error.message | | "");
/ / Mouse into the picture displays an error
$ (Errimg). Hover (function (e) (
$ ('Div [htmlfor = "' + $ (this). Attr ('htmlfor') +'"]'). css ((left: (e.pageX +20) + 'px', top: (e. pageY +20) + 'px')); / / show the mouse position offset in the location of 20
$ ('Div [htmlfor = "' + $ (this). Attr ('htmlfor') +'"]'). fadeIn (200);
function () (
$ ('Div [htmlfor = "' + $ (this). Attr ('htmlfor') +'"]'). fadeOut (200);
/ / Mouse into the control error
$ (Error.element). Hover (function (e) (
$ ('Div [htmlfor = "' + t.idOrName (this) +'"]'). css ((left: (e.pageX +20) + 'px', top: (e.pageY +20) + 'px')); / / show the mouse position offset in the location of 20
$ ('Div [htmlfor = "' + t.idOrName (this) +'"]'). fadeIn (200);
function () (
$ ('Div [htmlfor = "' + t.idOrName (this) +'"]'). fadeOut (200);

/ / Check error removed successfully
for (var i = 0; this.successList [i]; i + +) (
$ ('Div [htmlfor = "' + this.idOrName (this.successList [i]) +'"]'). remove ();
$ ('Img [htmlfor =' + this.idOrName (this.successList [i]) +']'). hide ();

/ / Custom Highlight
if (this.settings.unhighlight) (
for (var i = 0, elements = this.validElements (); elements [i]; i + +) (
this.settings.unhighlight.call (this, elements [i], this.settings.errorClass, this.settings.validClass);
$. Extend ((
getLeft: function (object) (
var go = object;
var oParent, oLeft = go.offsetLeft;
while (go.offsetParent! = null) (
oParent = go.offsetParent;
oLeft + = oParent.offsetLeft;
go = oParent;
return oLeft;
getTop: function (object) (
var go = object;
var goHeight = go.height;
var oParent, oTop = go.offsetTop;
while (go.offsetParent! = null) (
oParent = go.offsetParent;
oTop + = oParent.offsetTop;
go = oParent;
return oTop + 22; / / The reason plus 22 without a high degree of control, in order to compatible with ie6.
/ / Local Language
jQuery.extend (jQuery.validator.messages, (
required: "Required field"
remote: "Please correct the field,"
email: "Please enter a valid e-mail format"
url: "Please enter a valid URL"
date: "Please enter a valid date",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number",
digits: "can only enter integer"
creditcard: "Please enter a valid credit card number,"
equalTo: "Please enter the same value again,"
accept: "Please enter the name of the string has a valid suffix"
maxlength: jQuery.validator.format ("Please enter a maximum of the string is (0)")
minlength: jQuery.validator.format ("Please enter a minimum length of the string is (0)")
rangelength: jQuery.validator.format ("Please enter a range of (0) and (1) string between")
range: jQuery.validator.format ("Please enter a range of (0) and (1) value between")
max: jQuery.validator.format ("Please enter a maximum value of (0)")
min: jQuery.validator.format ("Please enter a minimum value for the (0)")
Customize a showErrors way, and then add a check for the form, the specified error message using this method.
JavaScript code
$ ('# Test_form'). Validate ((
rules: (
t2: (required: true, number: true)
messages: (t2: (required: "You have to fill in this field ~~!", number:" This field can really be a number ")),
showErrors: showErrors / / use a custom error display method
This way we will achieve the desired effect, is not feeling much better than the original like it?
jQuery.validate is a very flexible JavaScript validation framework described above is only about the basic usage and custom of an error display styles. General basic form validation can handle it but some of the more special, such as ID number of the verification page on the FCK Editor validation, still need to come to our own extensions. Personally feel this is a very good js validation framework, it introduced to the hope that help.
javaScript front extended error checking jQuery.validate validate official jquery.validate javaScript validation jQuery.validate front
0 Comments Read: 52
Previous: From OECP physical structure of java reflection (2009-10-13)

分类:Web 时间:2010-06-21 人气:300
blog comments powered by Disqus


  • Check the form of regular expressions 2010-03-16

    Check your phone or phone number: Rules of domestic fixed-line and fax the basic format of the code are connected with the 0 symbol "-" + telephone number, in addition to possible extension, code in 3, 4, phone numbers are 7 and 8 a; other forma

  • Grasp of regular expressions PHP, Part 1: Perl regular expression even if well, but PHP can also be fast input 2010-04-15

    Original Address http://www.ibm.com/developerworks/cn/opensource/os-php-regex1/index.html February 18, 2008 Pattern matching is the most common software content, so the regular expression that has been a special shorthand way of evolving in order to

  • Detailed JS regular expressions 2009-02-27

    Opening, or have to talk about ^ and $ that they are separately used to match the beginning and end of the string, the following examples to illustrate separately "^ The": there must be at the beginning of "The" string; "of despai

  • Daquan used regular expressions and data download 2010-04-01

    Common regular expressions Daquan Chinese characters matching the regular expression: [u4e00-u9fa5] Comment: The match is a headache for the Chinese really do, with this expression is easier to handle the matching double-byte characters (including Ch

  • JS common regular expressions 2010-08-26

    JavaScript regular expression validation Daquan, the most comprehensive collection of JavaScript validation regular expression, start viewing it, here are examples of regular expressions, and functions combined with the use of specific methods, but a

  • Development of common regular expressions 2010-10-11

    Chinese characters matching the regular expression: [u4e00-u9fa5] Comment: The match is a headache for the Chinese really do, with this expression is easier to handle Matching double-byte characters (including Chinese characters included): [^ x00-xff

  • Commonly used in JavaScript regular expressions to verify 2009-07-01

    The correct format: "01" "09" and "1" "31." Chinese characters matching the regular expression: [u4e00-u9fa5] Matching double-byte characters (including Chinese characters included): [^ x00-xff] Blank lines matching

  • Common Regular Expressions 2010-04-04

    Can only enter a number: "^ [0-9 ]*$"。 N bits can only enter the number: "^ \ d (n) $". Can only enter at least n-bit numbers: "^ \ d (n ,}$"。 Can only enter the m ~ n-bit numbers:. "^ \ d (m, n) $" Enter only the n

  • Regular Expressions in Chinese 2010-04-07

    Regular expressions for string manipulation, form validation and other occasions, practical and efficient. The expression of some commonly used now to collect this in order to prepare for contingencies. Chinese characters matching the regular express

  • Collection of common regular expressions 2010-05-01

    Regular expressions for string manipulation, form validation and other occasions, practical and efficient. The expression of some commonly used now to collect this in order to prepare for contingencies. Chinese characters matching the regular express

iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.323 (s). 12 q(s)