jQueryValidate教程
jQuery Validate errorPlacement()
此⽅法可以⾃定义错误信息显⽰的位置，它在Validate插件中并没有具体的实现，只是给出了接⼝规范。语法结构:
function(error, element)
参数解析:
jquery学习在线教程（1）.error：规定⽤来放置错误信息的元素，由errorElement属性配置。
（2）.element：规定当前表单元素对象。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author"content="www.softwhy/"/>
<title>蚂蚁部落</title>
<style>
#thetable{
font-size:12px;
}
#thetable td{
width:40px;
height:30px;
line-height:30px;
text-align:center;
}
#thetable tr > td:nth-of-type(3){
width:120px;
text-align:left;
}
</style>
<script src="libs.baidu/jquery/1.9.0/jquery.js"></script>
<script src="www.softwhy/demo/jQuery/js/jquery.validate.js"></script>
<script src="www.softwhy/demo/jQuery/js/messages_zh.js"></script>
<script>
$(document).ready(function(){
$("#myform").validate({
errorPlacement:function(error, element){
error.appendTo(element.parent("td").next("td"));
},
rules:{
username:"required",
pw:"required",
email:{
required:true,
email:true
}
},
messages:{
name:"⽤户名是必填项⽬",
pw:"密码是必填项⽬",
email:{
required:"邮箱是必填项⽬",
email:"邮箱格式不正确"
}
}
});
});
</script>
</head>
<body>
<form id="myform">
<table id="thetable">
<tr>
<tr>
<td>姓名:</td>
<td><input type="text"name="username"/></td>
<td></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password"name="pw"/></td>
<td></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text"name="email"/></td>
<td></td>
</tr>
<tr>
<td colspan="3">
<input type="submit"value="提交">
<input type="reset"value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
可以将错误信息显⽰与最后⼀个td中，更多内容参阅jQuery Validate⾃定义错误信息显⽰位置⼀章节。
jQuery Validate addMethod()
在阅读本章节内容之前，建议参阅jQuery Validate验证规则的实质⼀章节。
此⽅法可以添加⾃定义验证规则；是validator类的静态⽅法。
语法结构:
function( name, method, message )
参数解析:
（1）.name：必需，规定规则的名称。
（2）.method：必需，规则名称对应的处理函数；此函数可以接受三个参数:
<1>.value：当前表单元素的value属性值。
<2>.element：当前表单元素对象。
<3>.param：传递的参数。
（3）.message：可选，规定规则验证失败的默认提⽰信息。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author"content="www.softwhy/"/>
<title>蚂蚁部落</title>
<style>
ul li{
list-style:none;
margin-top:5px;
}
label.success{
color:green;
}
</style>
<script src="libs.baidu/jquery/1.9.0/jquery.js"></script>
<script src="www.softwhy/demo/jQuery/js/jquery.validate.js"></script>
<script src="www.softwhy/demo/jQuery/js/messages_zh.js"></script>
<script>
$.validator.addMethod("mobile",function(value, element){
var reg =/^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
return this.optional(element)|| st(value);
},"请输⼊正确⼿机号码")
$(document).ready(function(){
$("#myform").validate({
rules:{
username:"required",
pw:"required",
email:{
required:true,
email:true
},
tel:"mobile"
},
messages:{
username:"⽤户名是必须",
pw:"密码是必须",
email:{
required:"邮箱是必须",
email:"邮箱格式不正确"
}
}
})
});
</script>
</head>
<body>
<form id="myform">
<ul>
<li>姓名:<input type="text"name="username"/></li>
<li>密码:<input type="password"name="pw"/></li>
<li>邮箱:<input type="text"name="email"/></li>
<li>电话:<input type="text"name="tel"/></li>
<li>
<input type="submit"value="提交"/>
<input type="reset"value="重置"/>
</li>
</ul>
</form>
</body>
</html>
上⾯的代码添加⼀个⾃定义验证规则mobile，它实现了验证⼿机号码格式的功能。此规则没有传递param参数，这个参数⾮常好理解，⽐如下⾯的代码:
<input type="text"minlength="5"name="username"/>
⽐如minlength规则，5就是作为param参数传递给规则对应的函数。
jQuery Validate的format()⽤法
此为字符串格式化⽅法，如果会C#等语⾔，那么⾮常好理解，不会关系也不⼤。
先看⼀个代码⽚段:
rangelength: $.validator.format("请输⼊长度在 {0} 到 {1} 之间的字符串")
很明显输⼊字符串的长度被rangelength规范限定在m-n范围，⼀个规范对应着⼀个⽅法，为这个⽅法传递的参数会和format⽅法中的{n}依次对应，看如下代码⽚段：
pw:{
required:true,
rangelength:[5,15]
}
虽然是传递了⼀个数组，其实在⽅法内部将其分解为两个参数，分别是5和15。
{0}将会被5替代，{1}将会被15替代，以此类推。
总结：format⽅法参数字符串中的指定格式字符串⽚段（如{0}），将会依次被传递的参数替代。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author"content="www.softwhy/"/>
<title>蚂蚁部落</title>
<style>
ul li{
list-style:none;
margin-top:5px;
}
</style>
<script src="libs.baidu/jquery/1.9.0/jquery.js"></script>
<script src="www.softwhy/demo/jQuery/js/jquery.validate.js"></script> <script src="www.softwhy/demo/jQuery/js/messages_zh.js"></script> <script>
$(document).ready(function(){
$("#one").validate({
rules:{
username:{
required:true,
maxlength:20
},
pw:{
required:true,
rangelength:[5,15]
},
address:{
required:true,
minlength:15
}
},
messages:{
username:{
required:"⽤户名是必填项⽬",
maxlength: $.validator.format("⽤户名长度不得超过 {0}")
},
pw:{
required:"密码是必填项⽬",
rangelength: $.validator.format("密码的长度必须在 {0} - {1} 之间") },
address:{
required:"地址是必填项⽬",
minlength: $.validator.format("地址描述长度不得少于 {0}")
}
}
});
});
</script>
</head>
<body>
<form id="one"action="www.softwhy/">
<ul>
<li>姓名:<input type="text"name="username"/></li>
<li>密码:<input type="password"name="pw"/></li>
<li>住址:<input type="text"name="address"/></li>
<li>
<input type="submit"value="提交"/>
<input type="reset"value="重置"/>
</li>
</ul>
<label for="username"></label>
</form>
</body>
</html>
jQuery Validate highlight()
此⽅法可以设置表单元素没有通过规则验证时的样式。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。