jquery.validate API
来源:互联网 发布:如何运行c语言代码 编辑:程序博客网 时间:2024/05/21 23:53
jquery.validate.js API收藏
rules( ) Returns: Options 返回元素的验证规则rules( "add", rules ) Returns: Options 增加验证规则。rules( "remove", rules ) Returns: Options 删除验证规则removeAttrs( attributes ) Returns: Options 删除特殊属性并且返回他们
Custom selectors
Utilities
Validator
validate方法返回一个Validator对象, 它有很多方法, 让你能使用引发校验程序或者改变form的内容. validator对象有很多方法, 但下面只是列出常用的.
There are a few static methods on the validator object:
List of built-in Validation methods
A set of standard validation methods is provided:
验证美式的电话号码
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:定义一个组,把几个地方的出错信息同意放在一个地方,用
Placement控制把出错信息放在哪里$("#myform").validate({
groups: {
username: "fname lname"
},
Placement: function( , element) {
if (element.attr("name") == "fname" || element.attr("name") == "lname" )
.insertAfter("#lastname");
else
.insertAfter(element);
},
debug:true
})
- Code
$(".selector").validate({
onsubmit: false
})
- Code
$(".selector").validate({
onfocusout: false
})
- Code
$(".selector").validate({
onkeyup: false
})
- Code
$(".selector").validate({
onclick: false
})
- Code
$(".selector").validate({
focusInvalid: false
})
- Code
$(".selector").validate({
focusCleanup: true
})
为了元数据使用其他插件你要包装 你的验证规则 在他们自己的项目中可以用这个特殊的选项
$("#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>
- Code
$(".selector").validate({
errorClass: "invalid"
})
- Code
$(".selector").validate
errorElement: "em"
})
在出错信息外用其他的元素包装一层。Wrap error labels with the specified element. Useful in combination with errorLabelContainer to create a list of error messages.
- Code
$(".selector").validate({
wrapper: "li"
})
把错误信息统一放在一个容器里面。Hide and show this container when validating.
$("#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>
显示或者隐藏验证信息
$("#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>
得到错误的显示句柄
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
$(".selector").validate({
showErrors: function(errorMap, errorList) {
$("#summary").html("Your form contains " + this.numberOfInvalids() + " errors, see details below.");
this.defaultShowErrors();
}
})
$("#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>
成功时的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!".
$("#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>
$("#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>
- Code
$(".selector").validate({
highlight: function(element, errorClass) {
$(element).fadeOut(function() {
$(element).fadeIn()
})
}
})
- Code
$(".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);
}
});
- jQuery.validate.js API
- jquery.validate.js API
- jQuery.validate.js API
- jquery.validate api
- jQuery.validate 中文API
- jQuery validate 中文API
- jquery.validate API
- jQuery.validate 中文API
- jQuery.validate 中文API
- jQuery.validate 中文API
- jQuery.validate.js API
- jQuery.validate 中文API
- jQuery.validate.js API
- jQuery.validate 中文API
- jQuery.validate API
- jQuery.validate 中文API
- jquery 官方validate api
- jQuery.validate 中文API
- oracle高手帮忙分析Statspack.
- jquery
- EDI传输协议简介
- Asp.net 中HttpHandler,HttpModule,IHttpHandlerFactory的原理与应用
- error LNK2001
- jquery.validate API
- Dockpanel 实现浮动和多标签窗体解决方案(转)
- ARM与嵌入式linux如何入门
- 数字水印 IHttpHandler 学习总结
- 搜索引擎排序
- epoll难以替代select
- 网通、电信、教育网IP查询
- 为什么文件路径 Program Files 可以写成 Progra~1
- 记录一些好的文章