validate自动校验

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动校验功能</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/validate.js"></script>
<style type="text/css">
.suc{
background-color: red;
}
</style>
<script type="text/javascript">
$(function() {
//自定义校验方法addMethod中的参数1:验证的方法名，参数2：验证规则，参数3：验证提示信息
$.validator.addMethod("formula",function(value,element,param){
return this.value == eval(param);
},'请正确输入数学计算正确后的结果');

      $("#form1").validate({
    rules:{
       username:{
       required:true,
       minlength:2
       },
    email:{
    required:true,
    email:true
    },
    url:{
    required:true,
    url:true
    },
    valcode:{
    formula: "7+9"
    }
         },
        /* messages{
        username:{
        required:'请输入姓名',
        minlength:'请至少输入两个字符'
        },
        email:{
        required:'请输入电子邮箱',
         email:'请检查电子邮箱格式'
        }
         }, */
         /*
         errorElement:"em",//用来创建错误提示信息
         success:function(label){//验证成功后执行的回调函数，label指向上面那个错误提示信息标签em
        label.text(" ").addClss("suc");//清空错误提示信息,并添加上样式
         } */
      });
});
</script>
</head>
<body>
<form action="#" method="post" id="form1">
用户名:<input type="text" name="username" value=""><br><br>
年 龄:<input type="text" name="age" value=""><br><br>
邮 箱:<input type="text" name="email" value=""><br><br>
地 址:<input type="text" name="url" value=""><br><br>
<label for="cvalcode">验证码:</label>
<input id="cvalcode" type="text" name="valcode" size="25" value="">=7+9
<input type="button" value="提交">
</form>
</body>
</html>

猜你喜欢