`
touch_mai
  • 浏览: 40048 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

jquery.validity.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 Type
Custom selectors:






Name Type
:blank  Returns: Array <Element > 
没有值的筛选器
:filled  Returns: Array <Element > 
有值的筛选器
:unchecked  Returns: Array <Element > 
没选择的元素的筛选器

Utilities
Name Type
String utilities:


Name Type
jQuery.format( template, argument , argumentN... )  Returns: String 
用参数代替模板中的 {n}。



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

Name Type
Validator 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 Type
Validator 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 Type
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( 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>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 
  <script>
  $(document).ready(function(){
    $("#myform").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" 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>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 
  <script>
    $(document).ready(function(){
      $("#myform").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" 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>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 
  <script>
  $(document).ready(function(){
    $("#myform").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" 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>
  <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").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" 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>
  <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").validate({
   success: "valid",
   submitHandler: function() { alert("Submitted!") }
     })
  });
  </script>
  <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;
}</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>
  <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").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.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.
分享到:
评论

相关推荐

    jQuery表单验证插件 jQuery.validity

    &lt;script src="path/to/jquery.validity.1.2.0.js"&gt; ``` **基本用法** 在HTML表单中,你可以为需要验证的元素添加特定的属性,如`data-rule`来指定验证规则,`data-message`用于定义错误提示信息。例如: ```html ...

    基于jquery的表单验证框架

    - **Parsley.js**:具有强大的验证功能,支持前端和后端验证,提供良好的API和文档。 ### 4. 使用步骤 - **引入库**:在HTML文件中引入jQuery库和相应的验证库。 - **标记表单元素**:使用HTML5的`required`属性或...

    很漂亮的jsp表单验证

    4. `jquery.validity.js` 和 `jquery.validity.pack.js`:这两个文件都是jQuery的插件,专门用于表单验证。`jquery.validity.js`可能是未压缩的源代码,便于阅读和调试;`jquery.validity.pack.js`则是压缩后的版本...

    validity:jQuery的客户端验证

    jQuery.validity 有效性不必手动编写验证或平衡某些笨拙的服务器端框架,而使您可以以自然而直接的方式设计客户端验证。 jQuery.validity易于学习和使用。 它完全适用于简单的验证方案,但它也设计用于干净自然地...

    validity.js:JavaScript 模型的验证框架

    适用于 jQuery 和 Angular.js 例子 # Define a class with some validation rules class Person Validity . define @ , name : ' required ' email : { regex : / . + \@ . + \. . + / } age : [ ' number ' ,...

    JavaScript Validation API with DOM.zip

    JavaScript Validation API与DOM是Web开发中的重要组成部分,用于在客户端实现数据验证,提高用户体验并减轻服务器负担。在本文中,我们将深入探讨JavaScript Validation API以及它如何与DOM(文档对象模型)协同...

    第9章:计算字段和变更.docx

    @api.depends('validity_duration') def _compute_valid_until(self): for record in self: if record.validity_duration: record.valid_until = fields.Date.today() + timedelta(days=record.validity_...

    大学计算机系上机考试题及其答案.pdf

    大学计算机系上机考试题及其答案.pdf 本资源为大学计算机系上机考试题及其答案.pdf,...本资源涵盖了多个与JavaScript、HTML、XML相关的知识点,包括JavaScript读取XML数据、文本绘制、HTML表单验证和jQuery的使用等。

    jquery内置验证(validate)使用方法示例(表单验证)

    在示例中,使用了Google的内容分发网络(CDN)来引入jQuery库和validate插件的JavaScript文件。这可以加速文件的加载,并且减少自身的服务器负载。通过在HTML文件的部分引入,确保了在加载页面时,相关的脚本已经...

    jQuery表单课堂笔记

    jQuery的定义/特点: jQ的语法结构; 选择器: jQuery事件 jQuery方法 正则表达式 RegExp对象 validity属性

    Validity 指纹驱动程序.exe

    驱动程序,hp的elitebook 系列指纹驱动程序!

    XML终极教程(PDF)

    This appendix contains XML reference material. It is divided into three main parts: 1. XML BNF Grammar 2. Well-Formedness Constraints 3. Validity Constraints

    Direct assessment of behavioral and emotional problems

    Concurrent validity of the McCarthy Scales of Children's Abilities. Measurement DAVIS, E. E., & ROWLAND, T. A replacement for the venerable Stanford-Binet? Journal of Clinical and Evaluation in ...

    直接评估行为和情绪问题

    Concurrent validity of the McCarthy Scales of Children's Abilities. Measurement DAVIS, E. E., & ROWLAND, T. A replacement for the venerable Stanford-Binet? Journal of Clinical and Evaluation in ...

    Validity90, 有效/synaptics 138a的反向工程.zip

    Validity90, 有效/synaptics 138a的反向工程 Validity90本项目的目的是对有效的138 a:0090, 138 a:0094, 138 a:0097, 06: 0081.指纹读取器进行反向工程,创建规范和牙线libfprint驱动程序。讨论这里项目的主要聊天:...

    js验证表单大全

    有许多成熟的JavaScript库和框架,如 jQuery Validation 插件、Validator.js 或 Formik,它们提供了丰富的验证功能和易用的API,可以帮助开发者快速构建复杂的表单验证逻辑。 总的来说,"js验证表单大全"涵盖了...

    js(javascript) 日期控件

    3. **日期选择器库**:在实际开发中,为了提供更好的用户体验,开发者通常会使用现成的日期选择器库,如`jQuery UI Datepicker`、`bootstrap-datepicker`、`Pickadate.js`或`Flatpickr`等。这些库提供了丰富的配置...

    Java邮件开发Fundamentals of the JavaMail API

    Fundamentals of the JavaMail API Presented by developerWorks, your source for great tutorials ibm.com/developerWorks Table of Contents If you're viewing this document online, you can click ...

    linux_check_password_complex_validity-2.xml

    linux_check_password_complex_validity-2.xml

    js验证代码大全

    JavaScript(简称JS)是一种轻量级的、解释型的编程语言,主要应用于Web页面和浏览器环境,用于实现客户端的交互性和动态效果。JS验证代码大全是汇集了多种JavaScript验证技术的资源集合,可以帮助开发者在创建网页...

Global site tag (gtag.js) - Google Analytics