首页 > 代码库 > jQuery表单验证插件——validation（实现行为和结构分离）
jQuery表单验证插件——validation（实现行为和结构分离）
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title></title>
<style type="text/css">
*{
font-family: Verdana,font-size:96%;
}
label{width: 10em;float: left;}
label.error{
float: none;
color:red;
padding-left: .5em;
vertical-align: top;
}
p{clear: both;}
.submit{
margin-left: 12em;
}
em{
font-weight: bold;
padding-right: 1em;
vertical-align: top;
}
/**/
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
em.error {
background:url("images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
em.success {
background:url("images/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
</style>
</head>
<body>
<form method="get" action="#" id="commentForm" class="cmxForm">
<fieldset>
<legend>一个简单的验证带有验证信息评论例子</legend>
<p>
<label for="cusername">姓名</label><em>*</em>
<input type="text" name="username" size="25" id="cusername" >
</p>
<p>
<label for="cemail">电子邮箱</label><em>*</em>
<input type="text" name="email" size="25" id="cemail" >
</p>
<p>
<label for="curl">网址</label><em>*</em>
<input type="text" name="url" size="25" id="curl" >
</p>
<p>
<label for="ccomment">评论</label><em>*</em>
<textarea name="comment" cols="22" id="ccomment" ></textarea>
</p>
<p>
<label for="cvalcode">验证码</label><em>*</em>
<input type="text" name="valcode" size="25" value="" id="cvalcode" />7+9
</p>
<p><input type="submit" name="" value="http://www.mamicode.com/提交" class="submit"></p>
</fieldset>
</form>
<script type="text/javascript" src="http://www.mamicode.com/scripts/jquery-1.3.1.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/scripts/lib/jquery.validate.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/scripts/lib/jquery.validate.messages_cn.js"></script>
<script type="text/javascript">
/*(1)$("#commentForm").validate()方法中增加rules属性
(2)通过每个字段的name属性匹配验证规则
(3)定义验证规则：例如：required:true,minlength:2
*/
$(function(){
$("#commentForm").validate({
rules: {
username:{
required:true,
minlength:2
},
email:{
required:true,
email:true
},
url:"url",
comment:"required",
valcode: {formula:"7+9"}//调用验证规则
},
messages: {
username:{
required:‘请输入你的名字‘,
minlength:‘请输入至少两个字符‘
},
email:{
required:‘请输入你的email‘,
email:‘请输入正确的邮箱格式‘
},
url:"请输入正确的网址格式",
comment:"请输入评论"
},
errorElement:"em", //用来创建错误提示信息标签
success: function(label){ //验证成功后执行的回调函数
//label指向上面那个错误提示信息标签em
label.text("").addClass(‘success‘); //清空错误信息，加上自定义的class
}
});
//自定义一个验证方法
$.validator.addMethod(
"formula",//验证方法名
function(value,element,param){//验证规则
return value =http://www.mamicode.com/= eval(param);
},
‘请输入正确的数学公式计算后的结果‘ //验证提示信息
)
});
</script>
</body>
</html>
jQuery表单验证插件——validation（实现行为和结构分离）