jq里验证插件的自定义方法Jquery.validator.addMethod()示例

  1. 最近写验证的时候感觉原生的验证谢了一遍又一遍，就想到了“不要重复造轮子，学会管理自己的工具库”这句名言，于是尝试用jq的validator。 用过又发现需要自定义方法去验证，于是去查官网，写了Jquery.validator.addMethod()方法
  2. <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <link href="../css/main.css" rel="stylesheet" type="text/css" />  
  7. <link href="../js/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />  
  8. <!-- 引入JS库文件 -->  
  9. <script src="../js/jquery.min.js" type="text/javascript"></script>  
  10. <script src="../js/ligerUI/js/ligerui.min.js" type="text/javascript"></script>  
  11. <script src="../js/tablecolor.js" type="text/javascript"></script>  
  12. <script src="../js/jquery-form/jquery.form.js" type="text/javascript"></script>  
  13. <script src="../js/jquery-validation/jquery.validate.min.js" type="text/javascript"></script>  
  14. <script src="../js/jquery-validation/messages_cn.js" type="text/javascript"></script>  
  15.   
  16. <script type="text/javascript">  
  17.    <!--  
  18.     $(function() {  
  19.   
  20.             //保存  
  21.             $("#appEdit_btok").click(function () {  
  22.                 $("#appEdit_Form").submit();  
  23.             });  
  24.               
  25.             //自定义评语内容验证方法  
  26.               jQuery.validator.addMethod("levelLimit",function(value, element){  
  27.                  var returnVal = false;  
  28.                  var level = $("#code").attr("level");  
  29.                 if(level=="1" || level=="0"){  
  30.                     returnVal = true;  
  31.                 }  
  32.                  return returnVal;  
  33.             },"level不能为2!");  
  34.         $("#appEdit_Form").validate({  
  35.             rules : {  
  36.                 "code" : {  
  37.                     required : true,  
  38.                     number : true,//期望的是true,如果为false则展示提示信息  
  39.                     levelLimit : true//期望的是true,如果为false则展示提示信息  
  40.                 }  
  41.             },  
  42.             messages : {  
  43.                 "code" : {required : "请输入务编码！",  
  44.                                  number : "请输入数字！"  
  45.                           }  
  46.             },  
  47.             errorPlacement: function( lable, element ){  
  48.                 element.ligerHideTip();  
  49.                 element.parent().ligerTip({ content: lable.html(), target: element[0] });  
  50.             },  
  51.             success : function( lable ){  
  52.                 lable.ligerHideTip();  
  53.                 lable.remove();  
  54.             },  
  55.             submitHandler: function(formTar){  
  56.                 var serialStr = $("#appEdit_Form").serialize();  
  57.                 var urlStr = './appIndex.htm?actionMethod=addAppInfo';  
  58.                 $.ajax({  
  59.                     type:'post',  
  60.                     url:urlStr,  
  61.                     data:serialStr,  
  62.                     success:function(redata){  
  63.                         if  (redata ==1) {  
  64.                             alert( '操作成功!');  
  65.                         }else{  
  66.                             alert('失败提示', '操作失败!');  
  67.                             return;  
  68.                         }  
  69.                     }  
  70.                 });  
  71.             }  
  72.         });          
  73.     });  
  74.   
  75.      //-->  
  76.   </script>  
  77. </head>  
  78.   
  79. <body >  
  80.     <div class="right-body"  >  
  81.         <form method="post" action="javascript:void" id="appEdit_Form" >  
  82.             <table style="width:400px;" border="0" cellpadding="0" cellspacing="0"  
  83.                 class="viewdatagrid">  
  84.                 <tbody>  
  85.                     <tr>  
  86.                         <th width="160">编码：</th>  
  87.                         <td width="0" ><input id="code" name="code" type="text" style="width: 240px" value=""  level="2"/>  
  88.                         </td>  
  89.                     </tr>  
  90.                 </tbody>  
  91.             </table>  
  92.   
  93.             <div class="btn-view-block">  
  94.                 <div class="toolbar">  
  95.                     <ul>  
  96.                         <li>  
  97.                             <a href="javascript:void 0;"  class="save"  id="appEdit_btok"  name="appEdit_btok" ><span>保存</span></a>                            
  98.                         </li>  
  99.                         <li>  
  100.                     </ul>  
  101.                 </div>  
  102.             </div>  
  103.         </form>  
  104.     </div>  
  105. </body>  
  106. </html>  
posted @ 2017-11-13 17:38  dunker  阅读(261)  评论(0)  编辑  收藏  举报