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

http://www.cnblogs.com/wzmaodong/archive/2008/04/27/1173382.html

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

InputValidator:
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
CompareValidator:
2 the value of the size of form elements (numeric and char) range
RegexValidator:
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
AjaxValidator:
On user input values for server-side validation. For example: if the user exists
FunctionValidator:
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>

http://www.po-soft.com/blog/slx/1327.html

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.
Download:
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)
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

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

  • extjs development environment set up and practice

    1, download and extract the extjs 2, download eclipse and Eclipse AJAX Toolkit Framework (ATF) I have been accustomed to using eclipse as a development environment, a variety of open-source plugin so that eclipse has all-around performance, operating effi

  • ajax overtime

    ajax overtime

  • Msxml2.XMLHTTP version problem

    Projects with an import feature prototype.js of Ajax functionality to update the prompt, the code is very simple, do not have the framework of the background on a jsp to output Text, future use of timers and to update the page Ajax.request encountere ...

  • Depth understanding of the eval function in javascript

    http://wanyij.blog.51cto.com/46570/43794 In this paper, the discovery of an appropriate title is not so easy, huh, huh, so in this note under the first two purposes of this article: (1) introduction of the eval function in javascript usage (2) how to func

  • JS after ajax request return of the problem can not be implemented

    1: Send ajax request, in the onComplete, if back when the html contains a javascript, then these javascrip and will not be realized, it does not mean not to implement. This problem has troubled me for a long time, behind the hair and then put this kn ...

  • JPA data source data source to configure Tomcat conversion essay questions

    To the JPA in the use of the development process, sometimes used in the data source conversion problem, The following methods are only my personal experience of a situation and its solutions, if different, please everyone posted for your reference encount

  • Hibernate II Study Notes

    11. Many-to-many Of many that can be converted to two one-to-many <set name="students" table="teacher_student"> <key column="techer_id"/> <many-to-many column="student_id"/> </set> many-to-many data only from one end of the mainten

  • Detailed JS regular expressions

    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

  • JS charts extjs implementation tools can be combined

    OpenFlashChart brief introduction by valensoft 2009-1-10 8:29:00 OpenFlashChart is an open source Flash and Javascript to the technical foundation for the free chart, using it to create some very useful analysis of the effect of the statements of the char

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries