jQuery Validation Plugin客户端表单验证插件(2)

来源：互联网发布：网络最新骗术编辑：程序博客网时间：2024/04/30 10:07

插件新增的几个方法和选择器

.valid()方法

检查一个表单或选取的控件是否全部通过校验，调用此方法之前，需要表单被初始化form.validate();

因为正常触发表单的校验是点击submit按钮，用此方法，就可以在自定义的触发事件中调用校验，而且可以针对单个控件校验

<!doctype html><html><head><meta charset="utf-8"><title>Sets up validation for a form, then checks if the form is valid when clicking a button.</title><link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/site-demos.css"><style>   </style></head><body><form id="myform"><form id="myform">  <input type="text" name="name" required>  <br>  <button type="button">Validate!</button></form></form><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script><script src="http://jquery.bassistance.de/validate/additional-methods.js"></script><script>// just for the demos, avoids form submitjQuery.validator.setDefaults({  debug: true,  success: "valid"});var form = $( "#myform" );form.validate();$( "button" ).click(function() {  alert( "Valid: " + form.valid() );});</script></body></html>

.rules()方法

操作表单中控件的校验规则，可以读取read新增add删除remove

$( "#myinput" ).rules( "add", {  minlength: 2});

$( "#myinput" ).rules( "add", {  required: true,  minlength: 2,  messages: {    required: "Required input",    minlength: jQuery.format("Please, at least {0} characters are necessary")  }});

$( "#myinput" ).rules( "remove", "min max" );

新增的selector

:blank Selector

选取没有输入内容的控件或者只有空格输入的控件，校验方式其实就是jQuery.trim(value).length == 0

<!doctype html><html><head><meta charset="utf-8"><title>Finds input elements with no value or just whitespace.</title><link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/site-demos.css"> </head><body><form id="myform"><div>Mouseover to see the value of each input</div><input value="" title='""'><input value="   " title='"   "'><input value="abc" title='"abc"'></form><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script><script src="http://jquery.bassistance.de/validate/additional-methods.js"></script><script>// just for the demos, avoids form submitjQuery.validator.setDefaults({  debug: true,  success: "valid"});$( "input:blank" ).css( "background-color", "#bbbbff" );</script></body></html>

:filled Selector

选取有输入的控件，校验相当于jQuery.trim(value).length > 0

:unchecked Selector

:checked Selector

都是选取checkbox的选择器，分别对应未选中和选中的checkbox

<!doctype html><html><head><meta charset="utf-8"><title>Finds all input elements that are unchecked.</title><link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/site-demos.css"><style> div { color:red; }         </style></head><body><form id="myform"><form>    <input type="checkbox" name="newsletter" checked="checked" value="Hourly" />    <input type="checkbox" name="newsletter" value="Daily" />    <input type="checkbox" name="newsletter" value="Weekly" />    <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />    <input type="checkbox" name="newsletter" value="Yearly" />  </form>  <div></div></form><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script><script src="http://jquery.bassistance.de/validate/additional-methods.js"></script><script>// just for the demos, avoids form submitjQuery.validator.setDefaults({  debug: true,  success: "valid"});function countUnchecked() {  var n = $( "input:unchecked" ).length;  $( "div" ).text(n + (n == 1 ? " is" : " are") + " unchecked!" );}countUnchecked();$( ":checkbox" ).click( countUnchecked );</script></body></html>