Home > Web Front-end > JS Tutorial > validate automatic verification

validate automatic verification

巴扎黑
Release: 2016-12-06 11:30:40
Original
1248 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


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template