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

时间：2023-03-09 14:35:38
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. ==================上面是js==============================
  35. <body style="margin-left:500px;margin-top:100px;">
  36. <div style="font-size:22px;">test</div><br>
  37. <form id="myform" method="post">
  38. <label>Your Name</label>
  39. <input name="fname" value="" />
  40. <input name="lname" id="lastname" />
  41. <br/>
  42. <input type="submit" value="Submit"/>
  43. </form>
  44. </body>

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

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