validate automatic verification-JS Tutorial-php.cn

validate automatic verification

巴扎黑

Release： 2016-12-06 11:30:40

Original

1231 people have browsed it

<!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);	
},&#39;请正确输入数学计算正确后的结果&#39;); 

      $("#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:&#39;请输入姓名&#39;, 
        minlength:&#39;请至少输入两个字符&#39; 
        }, 
        email:{ 
        required:&#39;请输入电子邮箱&#39;, 
         email:&#39;请检查电子邮箱格式&#39; 
        } 
         }, */ 
         /* 
         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>

Copy after login