`
Andy_Dou
  • 浏览: 232875 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

jQuery.validate.js API

jQueryJavaScriptHTMLCSSAjax 
阅读更多
NameType
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

NameType
Custom selectors:

 

 

 

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

Utilities

NameType
String utilities:

 

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

 

Validator

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

NameType
Validator methods:

 

 

 

 

 

 

 

NameType
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:

NameType
Validator functions:

 

NameType
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:

NameType
Methods:

 

NameType
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
验证两个输入框的内容是否相同

 

 

NameType
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 onfocusout onkeyup onclick focusInvalid focusCleanup meta errorClass errorElement wrapper errorLabelContainer errorContainer showErrors errorPlacement success highlight unhighlight
Boolean Default: true
提交时验证. 设置唯false就用其他方法去验证
不用onsubmit验证,就允许用户无论用什么方法去验证,而是提交时, 用 keyup/blur/click 等方法.
$(".selector").validate({
   onsubmit: false
})
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.
Disables onblur validation.
$(".selector").validate({
   onfocusout: false
})
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.
Disables onkeyup validation.
$(".selector").validate({
   onkeyup: false
})
Boolean Default: true
在checkboxes 和 radio 点击时验证.
Disables onclick validation of checkboxes and radio buttons.
$(".selector").validate({
   onclick: false
})
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.
Disables focusing of invalid elements.
$(".selector").validate({
   focusInvalid: false
})
Boolean Default: false
如果是true那么删除出错类从出错的元素上并且隐藏出错信息当这个元素被聚焦 .避免和 focusInvalid.一起用
Enables cleanup when focusing elements, removing the error class and hiding error messages when an element is focused.
$(".selector").validate({
   focusCleanup: true
})
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>
String Default: "error"
创建错误类的名字为了去寻找存在的错误标签和增加它到验证失败的元素中去。
Sets the error class to "invalid".
$(".selector").validate({
   errorClass: "invalid"
})
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).
Sets the error element to "em".
$(".selector").validate
   errorElement: "em"
})
String
在出错信息外用其他的元素包装一层。Wrap error labels with the specified element. Useful in combination with errorLabelContainer to create a list of error messages.
Wrap each error element with a list item, useful when using an ordered or unordered list as the error container.
$(".selector").validate({
   wrapper: "li"
})
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>
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>
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().
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();
   }
})
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>
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>
Callback Default: Adds errorClass (see the option) to the Element
高亮显示错误信息。 或者说重写出错时的出错元素的显示。Override to decide which fields and how to highlight.
Highlights an invalid element by fading it out and in again.
$(".selector").validate({
  highlight: function(element, errorClass) {
     $(element).fadeOut(function() {
       $(element).fadeIn()
     })
  }
})
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);
  }
});
Callback Default: 默认是去掉error类
Called to revert changes made by option highlight, same arguments as highlight.

 

 

 

分享到：
| 正则表达式
评论
1 楼 xiaozhi7616 2010-09-06  
Great!
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery.validate.js

    jQuery.validate.js是一款强大的JavaScript插件，专为jQuery框架设计，用于实现前端表单验证，提供了丰富的验证规则和自定义选项，使得开发者能够轻松地构建具有高效验证功能的网页。 一、jQuery.validate.js的核心...

    jQuery.validate.js+API中文

    《jQuery.validate.js与API中文详解》 在Web开发领域，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作，事件处理以及Ajax交互等任务。而jQuery Validate插件则是jQuery的一个重要扩展，它专注于表单...

    jQuery.validate.js表单验证及API

    《jQuery.validate.js表单验证及API详解》 在Web开发中，表单验证是不可或缺的一环，它确保用户输入的数据符合预设的规则，从而保证数据的准确性和安全性。jQuery库提供了一个强大的插件——jQuery.validate.js，...

    jquery.validate-1.13.1.js

    jquery.validate插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来...

    jquery.validate.js 和 帮助文档.rar

    本文将深入探讨jQuery validate.js的核心功能及其API，同时结合提供的帮助文档，为你揭示其背后的实现原理和使用技巧。 首先，jQuery validate.js的主要功能是为HTML表单提供强大的验证规则。通过简单的配置，...

    jQuery验证控件jquery.validate.js使用说明+中文API

    jQuery 验证控件 jquery.validate.js 使用说明 + 中文 API jQuery 验证控件 jquery.validate.js 是一个功能强大且广泛使用的 JavaScript 验证插件，旨在帮助开发者快速实现表单验证功能。下面是 jquery.validate....

    jquery.validate.js表单验证

    jQuery验证控件jquery.validate.js使用说明+中文API 官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation

    最新jQuery.validate.js+帮助文档:jQuery.validate.js+jquery.metadata.js+messages_cn.js

    jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来...

    jquery表单验证框架：jquery.validate.zip

    jQuery是一个广泛使用的JavaScript库，而jQuery.validate则是jQuery的一个强大插件，专门用于实现客户端的表单验证。本篇文章将详细介绍jQuery.validate框架及其核心功能。 一、jQuery.validate简介 jQuery....

    jquery.validate.js

    jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来...

    jquery.validate.js jquery.metadata.js

    在Web开发中，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理和Ajax交互。而jQuery Validate和jQuery Metadata是两个插件，它们分别提供了表单验证和元数据功能，大大增强了jQuery在前端验证...

    表单效验jQuery.validate.js+使用手册

    包含以下文件： additional-methods.js additional-methods.min.js jquery.validate.js jQuery.validate.js+API中文.pdf jquery.validate.min.js

    jQuery验证控件jquery.validate.js使用说明+中文API.doc

    jQuery.validate.js是一个非常流行的JavaScript库，它为jQuery提供了一个强大的表单验证功能。这个插件使得在网页上创建用户输入验证变得简单而直观，能够帮助开发者确保用户提交的数据符合预设的规则，从而提高用户...

    jquery.validate.js验证框架_帮助_手册_文档_API_接口

    &lt;script type="text/javascript" src="js/jquery.validate.pack.js"&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $("#textForm").validate({ rules: { name: { required: true, ...

    jquery.validate 使用

    在`jqueryvalidate验证demo`中，包含了多个实例，演示了基本验证、自定义规则、验证组等常见功能的应用。通过查看和运行这些示例，可以更深入地理解和掌握jQuery Validate的使用。 总结，jQuery Validate插件以其...

    jQuery.validate插件（附代码实例）

    总之，jQuery.validate插件通过简单易用的API，使得在网页开发中进行客户端表单验证变得十分便捷。你可以根据实际需求，结合`jquery.js`和`jquery.validate.js`这两个文件，以及`代码实例.txt`中的示例，创建出满足...

    jquery.validate+jquery.form.rar

    在Web开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和Ajax交互。本资源“jquery.validate+jquery.form.rar”是结合了两个重要的jQuery插件：jQuery Validate和jQuery Form，用于...

    jquery.validate.js表单验证[借鉴].pdf

    &lt;script src="../js/jquery.validate.js" type="text/javascript"&gt; ``` ### 二、默认验证规则 jQuery Validate 提供了一系列预定义的验证规则，可以用来检查用户输入是否符合特定条件： 1. **required**: 字段...

Magicbox
Global site tag (gtag.js) - Google Analytics