<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="script/jquery-1.9.1.min.js"></script>
<script src="script/jquery.validate.js"></script>
<title>无标题文档</title>
<style>
<!--演示的做法-->
#myform{}
/* 默认em2 */
em2 { font-weight: bold; padding-right: 1em; vertical-align: top; }
/* 错误提示em2 */
em2.error {
background:url("images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;color:red;
}
/* 成功提示em2 */
em2.success {
background:url("images/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
//自定义验证方法
$.validator.addMethod
(
"formula",//验证规则的名称
function(value,element,param)
{
return value==eval(param);
}
,'请输入结果！'
);
//-----
$("#myform").validate({
rules: {
username: {
required: true,
minlength: 2
},
valcode:{formula:"1+2"}
}//end rules
,messages:{//错误信息提示自定义
username:
{
required:'请输入名字',
minlength:'至少输入两个字符！'
}
}//end messages
,errorElement: "em2",//错误提示信息标签
success:function(x)//验证成功后的回调函数，x指向上面那个em2
{
x.text("").addClass("success");//清空错误提示信息，并加上自定义success类
}
});//end validate
});//end ready
</script>
</head>
<body>
<form id="myform">
<label for="username">用户名：</label>
<input type="text" name="username"/>
<label for="valcode">code(1+2)：</label>
<input type="text" name="valcode"/>
</form>
</body>
</html>
浙公网安备 33010602011771号