开发者社区> 范大脚脚> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery validate API

简介:
+关注继续查看
jQuery.validate.js API  
Name    Type  
validate( options ) Returns: Validator  
验证所选的FORM  
valid( )    Returns: Boolean  
检查是否验证通过  
rules( )    Returns: Options  
返回元素的验证规则  
rules( "add", rules )   Returns: Options  
增加验证规则。  
rules( "remove", rules )    Returns: Options  
删除验证规则  
removeAttrs( attributes )   Returns: Options  
删除特殊属性并且返回他们  
Custom selectors  
Name    TypeCustom selectors:  
   
   
   
Name    Type  
:blank  Returns: Array <Element >  
没有值的筛选器  
:filled Returns: Array <Element >  
有值的筛选器  
:unchecked  Returns: Array <Element >  
没选择的元素的筛选器  
Utilities  
Name    TypeString utilities:  
   
Name    Type  
jQuery.format( template, argument , argumentN... )  Returns: String  
用参数代替模板中的 {n}。  
   
Validator  
validate方法返回一个Validator对象, 它有很多方法, 让你能使用引发校验程序或者改变form的内容. validator对象有很多方法, 但下面只是列出常用的.  
Name    TypeValidator methods:  
   
   
   
   
   
   
   
Name    Type  
form( ) Returns: Boolean  
验证form返回成功还是失败  
element( element )  Returns: Boolean  
验证单个元素是成功还是失败  
resetForm( )    Returns: undefined  
把前面验证的FORM恢复到验证前原来的状态  
showErrors( errors )    Returns: undefined  
显示特定的错误信息  
There are a few static methods on the validator object:  
Name    TypeValidator functions:  
   
Name    Type  
setDefaults( defaults ) Returns: undefined  
改变默认的设置  
addMethod( name, method, message )  Returns: undefined  
添加一个新的验证方法. 必须包括一个独一无二的名字,一个JAVASCRIPT的方法和一个默认的信息  
addClassRules( name, rules )    Returns: undefined  
增加组合验证类型 在一个类里面用多种验证方法里比较有用  
addClassRules( rules )  Returns: undefined  
增加组合验证类型 在一个类里面用多种验证方法里比较有用,这个是一下子加多个[edit ]  
List of built-in Validation methods  
A set of standard validation methods is provided:  
Name    TypeMethods:  
   
Name    Type  
required( ) Returns: Boolean  
必填验证元素  
required( dependency-expression )   Returns: Boolean  
必填元素依赖于表达式的结果.  
required( dependency-callback ) Returns: Boolean  
必填元素依赖于回调函数的结果.  
remote( url )   Returns: Boolean  
请求远程校验。url通常是一个远程调用方法  
minlength( length ) Returns: Boolean  
设置最小长度  
maxlength( length ) Returns: Boolean  
设置最大长度  
rangelength( range )    Returns: Boolean  
设置一个长度范围[min,max]  
min( value )    Returns: Boolean  
设置最小值.  
max( value )    Returns: Boolean  
设置最大值.  
range( range )  Returns: Boolean  
设置值的范围  
email( )    Returns: Boolean  
验证电子邮箱格式  
url( )  Returns: Boolean  
验证连接格式  
date( ) Returns: Boolean  
验证日期格式(类似30/30/2008的格式,不验证日期准确性只验证格式)  
dateISO( )  Returns: Boolean  
研制ISO类型的日期格式  
dateDE( )   Returns: Boolean  
验证德式的日期格式(29.04.1994 or 1.1.2006)  
number( )   Returns: Boolean  
验证十进制数字(包括小数的)  
numberDE( ) Returns: Boolean  
Makes the element require a decimal number with german format.  
digits( )   Returns: Boolean  
验证整数  
creditcard( )   Returns: Boolean  
验证信用卡号  
accept( extension ) Returns: Boolean  
验证相同后缀名的字符串  
equalTo( other )    Returns: Boolean  
验证两个输入框的内容是否相同  
   
   
Name    Type  
phoneUS( )  Returns: Boolean  
验证美式的电话号码  
   
   
   
   
   
validate ()的可选项  
debug:进行调试模式  
$(".selector").validate  
({  
   debug: true  
})  
  把调试设置为默认  
   
$.validator.setDefaults({  
   debug: true  
})  
   
submitHandler:用其他方式替代默认的SUBMIT,比如用AJAX的方式提交  
   
$(".selector").validate({  
   submitHandler: function(form) {  
    $(form).ajaxSubmit();  
   }  
})  
   
ignore:忽略某些元素不验证  
$("#myform").validate({  
   ignore: ".ignore"  
})  
   
rules: 默认下根据form的classes, attributes, metadata判断,但也可以在validate函数里面声明  
Key/value 可自定义规则. Key是对象的名字 value是对象的规则,可以组合使用 class/attribute/metadata rules.  
以下代码特别验证selector类中name='name'是必填项并且 email是既是必填又要符合email的格式  
   
$(".selector").validate({  
   rules: {  
     // simple rule, converted to {required:true}  
     name: "required",  
     // compound rule  
     email: {  
       required: true,  
       email: true  
     }  
   }  
})  
   
messages:更改默认的提示信息  
   
$(".selector").validate({  
   rules: {  
     name: "required",  
     email: {  
       required: true,  
       email: true  
     }  
   },  
   messages: {  
     name: "Please specify your name",  
     email: {  
       required: "We need your email address to contact you",  
       email: "Your email address must be in the format of name@domain.com"  
     }  
   }  
})  
groups:定义一个组,把几个地方的出错信息同意放在一个地方,用error Placement控制把出错信息放在哪里  
   
$("#myform").validate({  
  groups: {  
    username: "fname lname"  
  },  
  errorPlacement: function(error, element) {  
     if (element.attr("name") == "fname" || element.attr("name") == "lname" )  
       error.insertAfter("#lastname");  
     else  
       error.insertAfter(element);  
   },  
   debug:true  
 })  
   
nsubmit Boolean Default: true  
提交时验证. 设置唯false就用其他方法去验证  
Code  
不用onsubmit验证,就允许用户无论用什么方法去验证,而是提交时, 用 keyup/blur/click 等方法.  
$(".selector").validate({  
   onsubmit: false  
})  
onfocusout  Boolean Default: true  
Validate elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid.  
Code  
Disables onblur validation.  
$(".selector").validate({  
   onfocusout: false  
})  
onkeyup Boolean Default: true  
在keyup时验证. As long as the field is not marked as invalid, nothing happens. Otherwise, all rules are checked on each key up event.  
Code  
Disables onkeyup validation.  
$(".selector").validate({  
   onkeyup: false  
})  
onclick Boolean Default: true  
在checkboxes 和 radio 点击时验证.  
Code  
Disables onclick validation of checkboxes and radio buttons.  
$(".selector").validate({  
   onclick: false  
})  
focusInvalid    Boolean Default: true  
把焦点聚焦在最后一个动作或者最近的一次出错上via validator.focusInvalid(). The last active element is the one that had focus when the form was submitted, avoiding to steal its focus. If there was no element focused, the first one in the form gets it, unless this option is turned off.  
Code  
Disables focusing of invalid elements.  
$(".selector").validate({  
   focusInvalid: false  
})  
focusCleanup    Boolean Default: false  
如果是true那么删除出错类从出错的元素上并且隐藏出错信息当这个元素被聚焦 .避免和 focusInvalid.一起用  
Code  
Enables cleanup when focusing elements, removing the error class and hiding error messages when an element is focused.  
$(".selector").validate({  
   focusCleanup: true  
})  
meta    String    
为了元数据使用其他插件你要包装 你的验证规则 在他们自己的项目中可以用这个特殊的选项  
Tell the validation plugin to look inside a validate-property in metadata for validation rules.  
$("#myform").validate({  
   meta: "validate",  
   submitHandler: function() { alert("Submitted!") }  
})  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
  <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>  
    
  <mce:script type="text/javascript"><!--  
  $(document).ready(function(){  
    $("#myform").validate({  
     meta: "validate",  
     submitHandler: function() { alert("Submitted!") }  
    })  
  });  
    
// --></mce:script>  
    
</head>  
<body>  
  <mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js"></mce:script>  
  <mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>  
<form id="myform">  
  <input type="text" name="email" class="{validate:{ required: true, email:true }}" />  
  <br/>  
  <input type="submit" value="Submit" />  
</form>  
</body>  
</html>  
errorClass  String  Default: "error"  
创建错误类的名字为了去寻找存在的错误标签和增加它到验证失败的元素中去。  
Code  
Sets the error class to "invalid".  
$(".selector").validate({  
   errorClass: "invalid"  
})  
errorElement    String  Default: "label"  
设置错误的元素,默认的是label你可以改成em.Use this element type to create error messages and to look for existing error messages. The default, "label", has the advantage of creating a meaningful link between error message and invalid field using the for attribute (which is always used, no matter the element type).  
Code  
Sets the error element to "em".  
$(".selector").validate  
   errorElement: "em"  
})  
wrapper String    
在出错信息外用其他的元素包装一层。Wrap error labels with the specified element. Useful in combination with errorLabelContainer to create a list of error messages.  
Code  
Wrap each error element with a list item, useful when using an ordered or unordered list as the error container.  
$(".selector").validate({  
   wrapper: "li"  
})  
errorLabelContainer Selector      
把错误信息统一放在一个容器里面。Hide and show this container when validating.  
All error labels are displayed inside an unordered list with the ID "messageBox", as specified by the selector passed as errorContainer option. All error elements are wrapped inside an li element, to create a list of messages.  
$("#myform").validate({  
   errorLabelContainer: "#messageBox",  
   wrapper: "li",  
   submitHandler: function() { alert("Submitted!") }  
})  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
  <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>  
    
  <mce:script type="text/javascript"><!--  
    $(document).ready(function(){  
      $("#myform").validate({  
        errorLabelContainer: "#messageBox",  
        wrapper: "li",  
        submitHandler: function() { alert("Submitted!") }  
      })  
    });  
    
// --></mce:script>  
    
</head>  
<body>  
  <mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>  
<ul id="messageBox"></ul>   
 <form id="myform" action="/login" method="post">   
   <label>Firstname</label>   
   <input name="fname" class="required" />   
   <label>Lastname</label>   
   <input name="lname" title="Your lastname, please!" class="required" />   
   <br/>  
   <input type="submit" value="Submit"/>  
 </form>  
</body>  
</html>  
errorContainer  Selector      
显示或者隐藏验证信息  
使用一个额外的容器去显示错误信息  
Uses an additonal container for error messages. The elements given as the errorContainer are all shown and hidden when errors occur. But the error labels themselve are added to the element(s) given as errorLabelContainer, here an unordered list. Therefore the error labels are also wrapped into li elements (wrapper option).  
$("#myform").validate({  
   errorContainer: "#messageBox1, #messageBox2",  
   errorLabelContainer: "#messageBox1 ul",  
   wrapper: "li", debug:true,  
   submitHandler: function() { alert("Submitted!") }  
})  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
  <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>  
    
  <mce:script type="text/javascript"><!--  
  $(document).ready(function(){  
    $("#myform").validate({  
       errorContainer: "#messageBox1, #messageBox2",  
       errorLabelContainer: "#messageBox1 ul",  
       wrapper: "li", debug:true,  
       submitHandler: function() { alert("Submitted!") }  
    })  
  });  
    
// --></mce:script>  
  <mce:style><!--  
#messageBox1, #messageBox2 { display: none }  
--></mce:style><style mce_bogus="1">#messageBox1, #messageBox2 { display: none }</style>  
</head>  
<body>  
  <mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>  
<div id="messageBox1">   
  <ul></ul>   
</div>   
<form id="myform" action="/login" method="post">   
  <label>Firstname</label>   
  <input name="fname" class="required" />   
  <label>Lastname</label>   
  <input name="lname" title="Your lastname, please!" class="required" />  
  <br/>  
  <input type="submit" value="Submit"/>  
</form>   
<div id="messageBox2">   
  <h3>There are errors in your form, see details above!</h3>   
</div>  
</body>  
</html>  
showErrors  Callback    Default: None, uses built-in message disply.  
得到错误的显示句柄  
 Gets the map of errors as the first argument and and array of errors as the second, called in the context of the validator object. The arguments contain only those elements currently validated, which can be a single element when doing validation onblur/keyup. You can trigger (in addition to your own messages) the default behaviour by calling this.defaultShowErrors().  
Code  
Update the number of invalid elements each time an error is displayed. Delegates to the default implementation for the actual error display.  
$(".selector").validate({  
   showErrors: function(errorMap, errorList) {  
    $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors, see details below.");  
    this.defaultShowErrors();  
   }  
})  
errorPlacement  Callback    Default: 把错误label放在验证的元素后面  
可选错误label的放置位置. First argument: The created error label as a jQuery object. Second argument: The invalid element as a jQuery object.  
Use a table layout for the form, placing error messags in the next cell after the input.  
$("#myform").validate({  
  errorPlacement: function(error, element) {  
     error.appendTo( element.parent("td").next("td") );  
   },  
   debug:true  
 })  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
  <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>  
  <mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>  
  <mce:script type="text/javascript"><!--  
  $(document).ready(function(){  
    $("#myform").validate({  
       errorPlacement: function(error, element) {  
         error.appendTo( element.parent("td").next("td") );  
       },  
       debug:true  
     })  
  });  
    
// --></mce:script>  
    
</head>  
<body>  
  <form id="myform" action="/login" method="post">  
    <table>  
        <tr>  
            <td><label>Firstname</label>  
            <td><input name="fname" class="required" value="Pete" /></td>  
            <td></td>  
        </tr>  
        <tr>  
            <td><label>Lastname</label></td>  
            <td><input name="lname" title="Your lastname, please!" class="required" /></td>  
            <td></td>  
        </tr>  
        <tr>  
            <td></td><td><input type="submit" value="Submit"/></td><td></td>  
    </table>  
</form>  
</body>  
</html>  
success String , Callback     
成功时的class.If specified, the error label is displayed to show a valid element. If a String is given, its added as a class to the label. If a Function is given, its called with the label (as a jQuery object) as its only argument. That can be used to add a text like "ok!".  
添加"valid" 到验证验证元素, 在CSS中定义的样式  
$("#myform").validate({  
    success: "valid",  
    submitHandler: function() { alert("Submitted!") }  
})  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
  <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>  
  <mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>  
  <mce:script type="text/javascript"><!--  
  $(document).ready(function(){  
    $("#myform").validate({  
    success: "valid",  
    submitHandler: function() { alert("Submitted!") }  
     })  
  });  
    
// --></mce:script>  
  <mce:style><!--  
label.valid {  
    background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;  
    height:16px;  
    width:16px;  
    display: block;  
    position: absolute;  
    top: 4px;  
    left: 152px;  
}  
--></mce:style><style mce_bogus="1">label.valid {  
    background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;  
    height:16px;  
    width:16px;  
    display: block;  
    position: absolute;  
    top: 4px;  
    left: 152px;  
}</style>  
</head>  
<body>  
    
<form id="myform">  
  <input type="text" name="email" class="required" />  
  <br/>  
  <input type="submit" value="Submit" />  
</form>  
</body>  
</html>  
添加"valid" 到验证验证元素, 在CSS中定义的样式,并加入“ok”的文字  
$("#myform").validate({  
   success: function(label) {  
     label.addClass("valid").text("Ok!")  
   },  
   submitHandler: function() { alert("Submitted!") }  
})  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
  <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>  
  <mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>  
  <mce:script type="text/javascript"><!--  
  $(document).ready(function(){  
        $("#myform").validate({  
    success: function(label) {  
            label.addClass("valid").text("Ok!")  
        },  
        submitHandler: function() { alert("Submitted!") }  
        })  
   });  
    
// --></mce:script>  
  <mce:style><!--  
label.valid {  
    background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;  
    height:16px;  
    width:16px;  
    display: block;  
    position: absolute;  
    top: 4px;  
    left: 152px;  
    padding-left: 18px;  
}  
--></mce:style><style mce_bogus="1">label.valid {  
    background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;  
    height:16px;  
    width:16px;  
    display: block;  
    position: absolute;  
    top: 4px;  
    left: 152px;  
    padding-left: 18px;  
}</style>  
</head>  
<body>  
    
<form id="myform">  
  <input type="text" name="email" class="required" />  
  <br/>  
  <input type="submit" value="Submit" />  
</form>  
</body>  
</html>  
highlight   Callback    Default: Adds errorClass (see the option) to the Element  
高亮显示错误信息。 或者说重写出错时的出错元素的显示。Override to decide which fields and how to highlight.  
Code  
Highlights an invalid element by fading it out and in again.  
$(".selector").validate({  
  highlight: function(element, errorClass) {  
     $(element).fadeOut(function() {  
       $(element).fadeIn()  
     })  
  }  
})  
Code  
Adds the error class to both the invalid element and it's label  
$(".selector").validate({  
  highlight: function(element, errorClass) {  
     $(element).addClass(errorClass);  
     $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);  
  },  
  unhighlight: function(element, errorClass) {  
     $(element).removeClass(errorClass);  
     $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);  
  }  
});  
unhighlight Callback    Default: 默认是去掉error类  
Called to revert changes made by option highlight, same arguments as highlight.  



本文转自today4king博客园博客,原文链接:http://www.cnblogs.com/jinzhao/archive/2011/06/03/2072341.html,如需转载请自行联系原作者
    

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
20个最让人期待的 jQuery 相册插件
您可能还喜欢   Web开发者必备的20款超赞jQuery插件 分享30个最佳 jQuery Lightbox 效果插件 提升你网站水平的 jQuery 插件推荐 12个很棒的学习 jQuery 的网站推荐 分享27款非常棒的 jQuery 表单插件     jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择。
1090 0
10款新鲜出炉的 jQuery 插件
  这篇文章与大家分享的是10款新鲜出炉的基于 jQuery 开发的 Ajax 插件,有幻灯片、图片画廊、菜单等很多有用的插件。这些作者的想法特别新颖,希望你能从中找到自己需要的插件。 1. Chrome Style jQuery Image Gallery 一款用于实现漂亮的Chrome风格图片画廊的 jQuery 插件,在线演示 2.
926 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
React Native项目实战优化之路
立即下载
阿里云 API 精选手册(Alibaba Cloud API Playbook)
立即下载
API 网关实践
立即下载