文章来源:http://blog.csdn.net/jbgtwang/article/details/8778601
在开发中用到了jQuery的validate控件,有时需要自定义验证方法。我们可以通过jQuery.validator.addMethod()来实现,下面是例子:
<!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" /> <link href="../css/main.css" rel="stylesheet" type="text/css" /> <link href="../js/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> <!-- 引入JS库文件 --> <script src="../js/jquery.min.js" type="text/javascript"></script> <script src="../js/ligerUI/js/ligerui.min.js" type="text/javascript"></script> <script src="../js/tablecolor.js" type="text/javascript"></script> <script src="../js/jquery-form/jquery.form.js" type="text/javascript"></script> <script src="../js/jquery-validation/jquery.validate.min.js" type="text/javascript"></script> <script src="../js/jquery-validation/messages_cn.js" type="text/javascript"></script> <script type="text/javascript"> <!-- $(function() { //保存 $("#appEdit_btok").click(function () { $("#appEdit_Form").submit(); }); //自定义评语内容验证方法 <span style="color:#33cc00;">jQuery.validator.addMethod("</span><span style="color:#cc0000;">levelLimit</span><span style="color:#33cc00;">",function(value, element){</span><span style="color:#3333ff;">//自定义表单验证rules</span><span style="color:#33cc00;"> var returnVal = false; var level = </span><span style="color:#ff0000;">$("#code").attr("level");</span><span style="background-color: rgb(255, 255, 255);"><span style="color:#3333ff;">//获取id为code的输入框中的值</span></span><span style="color:#33cc00;"> if(level=="1" || level=="0"){ returnVal = true; } return returnVal; },"level不能为2!");</span> $("#appEdit_Form").validate({<span style="color:#3333ff;background-color: rgb(255, 255, 255);">//把</span><span style="color:#990000;background-color: rgb(255, 255, 255);">自定义的rules</span><span style="color:#3333ff;background-color: rgb(255, 255, 255);">添加到表单验证中</span> rules : { "code" : { required : true, number : true,//期望的是true,如果为false则展示提示信息 <span style="color:#990000;"> levelLimit</span> : true<span style="background-color: rgb(255, 255, 255);"><span style="color:#3333ff;">//</span><span style="color:#990000;">为levelLimit赋初值;</span><span style="color:#3333ff;">期望的是true,如果为false则展示提示信息</span></span> } }, messages : {<span style="color:#3333ff;">//为对应的rules添加错误提示信息</span> "code" : {required : "请输入务编码!", number : "请输入数字!" } }, errorPlacement: function( lable, element ){ element.ligerHideTip(); element.parent().ligerTip({ content: lable.html(), target: element[0] }); }, success : function( lable ){<span style="color:#3333ff;">//成功通过验证后,提示消息消失</span> lable.ligerHideTip(); lable.remove(); }, submitHandler: function(formTar){ var serialStr = $("#appEdit_Form").serialize();<span style="color:#3333ff;">//序列化表单</span> var urlStr = './appIndex.htm?actionMethod=addAppInfo';<span style="color:#3333ff;">//请求的url</span> $.ajax({ type:'post', url:urlStr, data:serialStr, success:function(redata){ if (redata ==1) { alert( '操作成功!'); }else{ alert('失败提示', '操作失败!'); return; } } }); } }); }); //--> </script> </head> <body > <div class="right-body" > <form method="post" action="javascript:void" id="appEdit_Form" > <table style="width:400px;" border="0" cellpadding="0" cellspacing="0" class="viewdatagrid"> <tbody> <tr> <th width="160">编码:</th> <td width="0" ><input id="code" name="code" type="text" style="width: 240px" value="" level="2"/> </td> </tr> </tbody> </table> <div class="btn-view-block"> <div class="toolbar"> <ul> <li> <a href="javascript:void 0;" class="save" id="appEdit_btok" name="appEdit_btok" ><span>保存</span></a> </li> <li> </ul> </div> </div> </form> </div> </body> </html>