jqueryapi文档:jquery.validate.js API

on 2009-12-8 in 博文摘选 | 0 Comment
Name Type
validate( ="optional">options ) Returns: Validator
验证所选FORM
valid( ) Returns: Boolean
检查是否验证通过

rules( ) Returns: Options
返回元素验证规则
rules( "add", rules ) Returns: Options
增加验证规则
rules( "remove", ="optional">rules ) Returns: Options
删除验证规则
removeAttrs( attributes ) Returns: Options
删除特殊属性并且返回他们

Custom selectors

Name Type

="options">Custom selectors: Name Type
:blank Returns: Array <Element >
没有值筛选器
:filled Returns: Array <Element >
有值筛选器
:unchecked Returns: Array <Element >
没选择元素筛选器


Utilities

Name Type

="options">String utilities: Name Type
jQuery.format( template, ="optional">argument , ="optional">argumentN... ) Returns: String
用参数代替模板中 {n}


Validator

validate思路方法返回个Validator对象, 它有很多思路方法 让你能使用引发校验或者改变form内容. validator对象有很多思路方法, 但下面只是列出常用.

Name Type

="options">Validator methods: Name Type
form( ) Returns: Boolean
验证form返回成功还是失败
element( element ) Returns: Boolean
验证单个元素是成功还是失败
reForm( ) Returns: und
把前面验证FORM恢复到验证前原来状态
showErrors( errors ) Returns: und
显示特定信息


There are a few methods _disibledevent=> Name Type

="options">Validator functions: Name Type
Defaults( defaults ) Returns: und
改变默认设置
addMethod( name, method, message ) Returns: und
添加个新验证思路方法. 必须包括个独无 2名字个JAVASCRIPT思路方法和个默认信息
addClassRules( name, rules ) Returns: und
增加组合验证类型 在个类里面用多种验证思路方法里比较有用
addClassRules( rules ) Returns: und
增加组合验证类型 在个类里面用多种验证思路方法里比较有用这个是下子加多个


[edit ]


List of built-in Validation methods

A of standard validation methods is provided:

Name Type

="options">Methods:  

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( ="optional">extension ) Returns: Boolean
验证相同后缀名串

equalTo( other ) Returns: Boolean
验证两个输入框内容是否相同


 

 

Name Type
phoneUS( ) Returns: Boolean
验证美式电话号码



="selflink">validate 可选项

debug:进行调试模式

$(".selector").="selflink">validate ({ debug: true })

  把调试设置为默认

$.validator.Defaults({ debug: true })

submitHandler:用其他方式替代默认SUBMIT,比如用AJAX方式提交

$(".selector").="selflink">validate({ submitHandler: function(form) { $(form).ajaxSubmit; } })

ignore:忽略某些元素不验证

$("#myform").="selflink">validate({ ignore: ".ignore" })

rules: 默认下根据formes, attributes, metadata判断但也可以在validate里面声明
Key/value 可自定义规则. Key是对象名字 value是对象规则可以组合使用 /attribute/metadata rules.

以下代码特别验证selector类中name='name'是必填项并且 email是既是必填又要符合email格式

$(".selector").="selflink">validate({ rules: { // simple rule, converted to {required:true} name: "required", // compound rule email: { required: true, email: true } } })

messages:更改默认提示信息

$(".selector").="selflink">validate({ rules: { name: "required", email: { required: true, email: true } }, messages: { name: "Please specy your name", email: { required: "We need your email address to contact you", email: "Your email address must be in the format of name@do.com" } } })

groups:定义个组把几个地方出错信息同意放在个地方用="__mozilla-findbar-search" style="display: inline; color: #000000; background-color: yellow; padding: 0pt;">error Placement控制把出错信息放在哪里

$("#myform").="selflink">validate({ groups: { username: "fname lname" }, ="__mozilla-findbar-search" style="display: inline; color: #000000; background-color: yellow; padding: 0pt;">errorPlacement: function(="__mozilla-findbar-search" style="display: inline; color: #000000; background-color: yellow; padding: 0pt;">error, element) { (element.attr("name") "fname" || element.attr("name") "lname" ) ="__mozilla-findbar-search" style="display: inline; color: #000000; background-color: yellow; padding: 0pt;">error.insertAfter("#lastname"); ="__mozilla-findbar-search" style="display: inline; color: #000000; background-color: yellow; padding: 0pt;">error.insertAfter(element); }, debug:true })

nsubmit Boolean Default: true
提交时验证. 设置唯false就用其他思路方法去验证
    ="tabs-nav">
  • ="tabs-selected">Code 不用onsubmit验证,就允许用户无论用什么思路方法去验证,而是提交时, 用 keyup/blur/click 等思路方法.
    $(".selector").="selflink">validate({ _disibledevent=> onfocusout Boolean Default: true
    Validate elements (except checkboxes/radio buttons) _disibledevent=>
      ="tabs-nav">
    • ="tabs-selected">Code Disables _disibledevent=>$(".selector").="selflink">validate({ _disibledevent=> onkeyup Boolean Default: true
      在keyup时验证. As long as the field is not marked as invalid, nothing happens. Otherwise, all rules are checked _disibledevent=>
        ="tabs-nav">
      • ="tabs-selected">Code Disables _disibledevent=>$(".selector").="selflink">validate({ _disibledevent=> onclick Boolean Default: true
        在checkboxes 和 radio 点击时验证.
          ="tabs-nav">
        • ="tabs-selected">Code Disables _disibledevent=>$(".selector").="selflink">validate({ _disibledevent=> focusInvalid Boolean Default: true
          把焦点聚焦在最后个动作或者最近次出错上via validator.focusInvalid. The last active element is the _disibledevent=>
            ="tabs-nav">
          • ="tabs-selected">Code Disables focusing of invalid elements.
            $(".selector").="selflink">validate({ focusInvalid: false })




            focusCleanup Boolean Default: false
            如果是true那么删除出错类从出错元素上并且隐藏出错信息当这个元素被聚焦 .避免和 focusInvalid.起用
              ="tabs-nav">
            • ="tabs-selected">Code Enables cleanup when focusing elements, removing the error and hiding error messages when an element is focused.
              $(".selector").="selflink">validate({ focusCleanup: true })




              meta String

              为了元数据使用其他插件你要包装 你验证规则 在他们自己项目中可以用这个特殊选项
              Tell the validation plugin to look inside a validate-property in metadata for validation rules.
              $("#myform").="selflink">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> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function{ $("#myform").="selflink">validate({ meta: "validate", submitHandler: function { alert("Submitted!") } }) }); </script> </head> <body> <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js"></script> <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <form id="myform"> <input type="text" name="email" ="{validate:{ required: true, email:true }}" /> <br/> <input type="submit" value="Submit" /> </form> </body> </html>




              errorClass String Default: "error"
              创建类名字为了去寻找存在标签和增加它到验证失败元素中去
                ="tabs-nav">
              • ="tabs-selected">Code Sets the error to "invalid".
                $(".selector").="selflink">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).
                  ="tabs-nav">
                • ="tabs-selected">Code Sets the error element to "em".
                  $(".selector").="selflink">validate errorElement: "em" })




                  wrapper String

                  在出错信息外用其他元素包装层Wrap error labels with the specied element. Useful in combination with errorLabelContainer to create a list of error messages.
                    ="tabs-nav">
                  • ="tabs-selected">Code Wrap each error element with a list item, useful when using an ordered or unordered list as the error container.
                    $(".selector").="selflink">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 specied by the selector passed as errorContainer option. All error elements are wrapped inside an li element, to create a list of messages.
                    $("#myform").="selflink">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> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function{ $("#myform").="selflink">validate({ errorLabelContainer: "#messageBox", wrapper: "li", submitHandler: function { alert("Submitted!") } }) }); </script> </head> <body> <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <ul id="messageBox"></ul> <form id="myform" action="/login" method="post"> <label>Firstname</label> <input name="fname" ="required" /> <label>Lastname</label> <input name="lname" title="Your lastname, please!" ="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 o li elements (wrapper option).

                    $("#myform").="selflink">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> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function{ $("#myform").="selflink">validate({ errorContainer: "#messageBox1, #messageBox2", errorLabelContainer: "#messageBox1 ul", wrapper: "li", debug:true, submitHandler: function { alert("Submitted!") } }) }); </script> <style>#messageBox1, #messageBox2 { display: none }</style> </head> <body> <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <div id="messageBox1"> <ul></ul> </div> <form id="myform" action="/login" method="post"> <label>Firstname</label> <input name="fname" ="required" /> <label>Lastname</label> <input name="lname" title="Your lastname, please!" ="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 .gif' /> of errors as the second, called in the context of the validator object. The arguments contain _disibledevent=>
                      ="tabs-nav">
                    • ="tabs-selected">Code Update the number of invalid elements each time an error is displayed. Delegates to the default implementation for the actual error display.
                      $(".selector").="selflink">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").="selflink">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> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script> $(document).ready(function{ $("#myform").="selflink">validate({ errorPlacement: function(error, element) { error.appendTo( element.parent("td").next("td") ); }, debug:true }) }); </script> </head> <body> <form id="myform" action="/login" method="post"> <table> <tr> <td><label>Firstname</label> <td><input name="fname" ="required" value="Pete" /></td> <td></td> </tr> <tr> <td><label>Lastname</label></td> <td><input name="lname" title="Your lastname, please!" ="required" /></td> <td></td> </tr> <tr> <td></td><td><input type="submit" value="Submit"/></td><td></td> </table> </form> </body> </html>




                      success String , Callback

                      成功时.If specied, the error label is displayed to show a valid element. If a String is given, its added as a to the label. If a Function is given, its called with the label (as a jQuery object) as its _disibledevent=> 添加"valid" 到验证验证元素, 在CSS中定义样式
                      $("#myform").="selflink">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> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script> $(document).ready(function{ $("#myform").="selflink">validate({ success: "valid", submitHandler: function { alert("Submitted!") } }) }); </script> <style>label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.g') 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" ="required" /> <br/> <input type="submit" value="Submit" /> </form> </body> </html>




                      添加"valid" 到验证验证元素, 在CSS中定义样式,并加入“ok”文字 $("#myform").="selflink">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> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script> $(document).ready(function{ $("#myform").="selflink">validate({ success: function(label) { label.addClass("valid").text("Ok!") }, submitHandler: function { alert("Submitted!") } }) }); </script> <style>label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.g') 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" ="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.
                        ="tabs-nav">
                      • ="tabs-selected">Code Highlights an invalid element by fading it out and in again.
                        $(".selector").="selflink">validate({ highlight: function(element, errorClass) { $(element).fadeOut(function { $(element).fadeIn }) } })




                          ="tabs-nav">
                        • ="tabs-selected">Code Adds the error to both the invalid element and it's label
                          $(".selector").="selflink">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.

                          Tags:  jqueryapi文档

                          延伸阅读

最新评论

发表评论