`

jquery.validate.js简介（续1）

jQueryJavaScriptHTMLCSSUP 
阅读更多

 

onsubmit 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.
分享到：
| jquery.validate.js简介
评论
发表评论

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

相关推荐

    jquery.validate 版本大全

    jquery.validate.1.9.0.min.js jquery.validate.1.12.0.min.js jquery.validate.1.13.1.min.js jquery.validate.1.16.0.min.js jquery.validate.1.14.0.min.js jquery.validate.1.15.1.min.js jquery.validate....

    jquery.validate.js下载

    jquery.validate.js jquery.validate.js

    jquery.validate.min.js

    jquery.validate.min.js jquery jquery验证插件 validate

    jquery.validate.unobtrusive.js

    微软的jquery.validate.unobtrusive.js验证插件,可以用来验证单选和多选框的.

    jquery.validate.js表单验证.pdf

    1. jquery.validate.js的引入：文件提到了引入jquery.validate.js的方法，需要先引入jquery.js，然后引入jquery.validate.js。这是因为jquery.validate.js依赖于jquery.js。 2. 验证规则：文件列出了jquery....

    jquery.validate.js

    jquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.jsjquery.validate.js...

    jquery.validate.extend.js

    jquery.validate.extend.js

    jQuery.validate.js

    要使用jQuery.validate.js，首先需要在页面中引入jQuery库和validate插件的JavaScript文件。例如，这里我们使用了名为"jQuery.validate.js_veryhuo.com"的压缩包文件。在HTML文件中，通常会在`&lt;head&gt;`标签内添加如下...

    jquery.validate-1.13.1.js

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

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

    《jQuery validate.js与帮助文档详解》 在Web开发领域，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作，事件处理以及Ajax交互。而jQuery Validate插件是jQuery的一个强大附件，专为表单验证设计，...

    jQuery.validate 用法

    jQuery.validate插件是一个强大的、易于使用的JavaScript库，它使得在jQuery环境下进行表单验证变得简单而高效。本文将深入探讨jQuery.validate的使用方法以及源码解析，帮助开发者更好地理解和运用这一工具。 首先...

    jquery.metadata.js和jquery.validate.js

    1. 引入jQuery库、`jquery.metadata.js`和`jquery.validate.js`的脚本文件。 2. 初始化验证器，通常在文档加载完成后执行： ```javascript $(document).ready(function() { $('#myForm').validate(); }); ``` 3...

    js jquery-1.11.1.min.js jquery.validate.min.js

    在给定的标题中提到了两个关键的JavaScript库：`jquery-1.11.1.min.js` 和 `jquery.validate.min.js`。 1. **jQuery**： jQuery 是一个高效、简洁而易用的 JavaScript 库，它封装了HTML DOM操作、事件处理、动画...

    jQuery.validate.js表单验证及API

    1. **自动验证**：当用户离开表单字段时，jQuery.validate.js会自动进行验证，无需额外的用户交互。 2. **自定义错误消息**：允许开发者为每个表单字段设置个性化的错误提示信息。 3. **多语言支持**：内置多种语言...

    jquery.validate.messages_cn

    jquery.validate.js表单验证 jquery.validate.messages_cn.js 表单验证中文提示

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