<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="script/jquery-1.9.1.min.js"></script> <script src="script/jquery.validate.js"></script> <title>无标题文档</title> <style> <!--演示的做法--> #myform{} /* 默认em2 */ em2 { font-weight: bold; padding-right: 1em; vertical-align: top; } /* 错误提示em2 */ em2.error { background:url("images/unchecked.gif") no-repeat 0px 0px; padding-left: 16px;color:red; } /* 成功提示em2 */ em2.success { background:url("images/checked.gif") no-repeat 0px 0px; padding-left: 16px; } </style> <script type="text/javascript"> $(document).ready(function() { //自定义验证方法 $.validator.addMethod ( "formula",//验证规则的名称 function(value,element,param) { return value==eval(param); } ,'请输入结果！' ); //----- $("#myform").validate({ rules: { username: { required: true, minlength: 2 }, valcode:{formula:"1+2"} }//end rules ,messages:{//错误信息提示自定义 username: { required:'请输入名字', minlength:'至少输入两个字符！' } }//end messages ,errorElement: "em2",//错误提示信息标签 success:function(x)//验证成功后的回调函数，x指向上面那个em2 { x.text("").addClass("success");//清空错误提示信息，并加上自定义success类 } });//end validate });//end ready </script> </head> <body> <form id="myform"> <label for="username">用户名：</label> <input type="text" name="username"/> <label for="valcode">code(1+2)：</label> <input type="text" name="valcode"/> </form> </body> </html>