Home > Article > Web Front-end > validate automatic verification
<!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>