jquery validate 二选一，错误提示在一处

转载自：http://blog.51yip.com/jsjquery/1483.html


 

有一同事对jquery validate这个插件不熟，实现多处报错信息在一处，并且还有二选一的情况，二个输入框，有一个输入就算通过。groups可以把多处报错放到一处，depends可以解决多选一的情况。下面举个例子，demo

以下是部分代码，全部代码看上面的例子。

查看复制打印?
  1.     $("#myform").validate({  
  2.       groups: {  
  3.         username: "fname lname"   //username定义的组名，fname lname是输入框的名子，可以看上面的demo  
  4.       },  
  5.       errorPlacement: function(error, element) {  //错误提示在什么地方  
  6.          if (element.attr("name") == "fname" || element.attr("name") == "lname" ){  
  7.            error.insertAfter("#lastname");    //如果是fname和lname呢，就#lastname后面  
  8.          }else{  
  9.            error.insertAfter(element);  
  10.          }  
  11.        },  
  12.        rules:{  
  13.             fname:{  
  14.                 required: {  
  15.                     depends:function(){ //二选一  
  16.                         return ($('input[name=lname]').val().length <= 0);  
  17.                     }  
  18.                 }  
  19.             },  
  20.             lname:{  
  21.                 required: {  
  22.                     depends:function(){ //二选一  
  23.                         return ($('input[name=fname]').val().length <= 0);  
  24.                     }  
  25.                 }  
  26.             }  
  27.         },  
  28.         messages:{ //提示报错  
  29.             fname:"first name or last name at least one",  
  30.             lname:"first name or last name at least one"  
  31.         },  
  32.        debug:true  
  33.      });  
  34.   
  35. ==================上面是js==============================  
  36.   
  37. <body style="margin-left:500px;margin-top:100px;">  
  38. <div style="font-size:22px;">test</div><br>  
  39.   <form id="myform" method="post">  
  40.   <label>Your Name</label>  
  41.   <input name="fname" value="" />  
  42.   <input name="lname" id="lastname" />  
  43.   <br/>  
  44.   <input type="submit" value="Submit"/>  
  45. </form>  
  46. </body>  

如果对插件jquery validate这个插件很熟的话，可以看一下jquery.validate.js，方法里面都有。



转载请注明
作者:海底苍鹰
地址:http://blog.51yip.com/jsjquery/1483.html


posted @ 2014-03-26 17:54  奋斗中的毛毛虫  Views(2041)  Comments(0)  Edit  收藏  举报