PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

validate自动校验

巴扎黑
巴扎黑 原创
2016-12-06 11:30:40 987浏览

<!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> 
年&nbsp;龄:<input type="text" name="age" value=""><br><br> 
邮&nbsp;箱:<input type="text" name="email" value=""><br><br> 
地&nbsp;址:<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>


声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。