validate自动校验-js教程-PHP中文网

validate自动校验

巴扎黑

发布： 2016-12-06 11:30:40

原创

1411人浏览过

<!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>

登录后复制