转载自: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

jquery validate 二选一,错误提示在一处的更多相关文章

  1. jquery.validate.unobtrusive.js实现气泡提示mvc错误

    改写jquery.validate.unobtrusive.js实现气泡提示mvc错误 个人对于这个js.css不是很擅长,所以这个气泡提醒的样式网上找了下,用了这个http://www.cnblog ...

  2. jQuery validate运作流程以及重复提示错误问题

    一,运作流程 jQuery validate要想运作,首先要加载相应的js <script type="text/javascript" src="/js/clas ...

  3. 改写jquery.validate.unobtrusive.js实现气泡提示mvc错误

    个人对于这个js.css不是很擅长,所以这个气泡提醒的样式网上找了下,用了这个http://www.cnblogs.com/wifi/articles/2918950.html当中的第一种写法. 对于 ...

  4. MVC3.0修改jquery.validate.unobtrusive.js实现气泡提示mvc错误

    CSS部分 <style type="text/css"> .hide {display:none;} .poptip { position: absolute; to ...

  5. jQuery Validate(二)

    刚刚试了所谓的新版的用法.千万别问我是多新,因为我也不知道... <!DOCTYPE html> <html> <head> <script src=&quo ...

  6. 扩展jquery.validate自定义验证,自定义提示,本地化

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  7. jquery.validate自己定义验证--成功提示与择要提示

    1. 自己定义验证--成功提示 1) 加入选项 errorClass: "unchecked". validClass: "checked", errorEle ...

  8. jquery validate强大的jquery表单验证插件

    jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...

  9. JQuery.validate.js 表单验证

    官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/API: http://jquery.bassistance.de ...

随机推荐

  1. 从无到有之webpack+vuerouter的简单例子以及各个属性解释

    之前一直没玩过webpack和vue,近两周才看这玩意,本文纯属自己的实验+之前angular作战经验的理解一些入门文章 首先webpack关于vue以及各个包 module.exports = { ...

  2. 0421--"数字口袋精灵app"二次开发(Blackbriar团队开发)

    "数字口袋精灵app"二次开发 目录: 一.项目github总仓库推送 二.开发成员 三.分工与合作 四.各模块成果 五.心得墙 六.团队成员贡献分 内容: 一.项目github总 ...

  3. python knn自我实践

    #得到分类数据和测试数据 import pymysql import struct from numpy import * a=['']*20 #存图像 分类数据 b=[[0]*76800]*20#存 ...

  4. OOP 学习笔记汇总

    1.1 引用 1.2 const关键字 1.3 动态内存分配 1.4 内联函数和重载函数函数参数缺省值 1.5 类和对象的基本概念与用法1 2.1 类和对象的基本概念2

  5. Codeforces Round #245 (Div. 1) B. Working out dp

    题目链接: http://codeforces.com/contest/429/problem/B B. Working out time limit per test2 secondsmemory ...

  6. 用vs调试项目的时候报HTTP 错误 403.14 - Forbidden

    曾经遇到过这种诡异的问题,你一定想不到,这个可能是因为你用svn合并的时候,导致了你的dll文件出了问题. 竟然可以用主干的dll替换的方式,解决掉这个问题.

  7. Spring学习(六)—— Spring注解(二)

    核心原理 1.       用户发送请求给服务器.url:user.do 2.       服务器收到请求.发现Dispatchservlet可以处理.于是调用DispatchServlet. 3.  ...

  8. Java throw try catch

    public class Runtest { public static void main(String[] args) { // TODO Auto-generated method stub T ...

  9. (打补丁 )patch

    前言: diff:逐行比较文件的不同,并且显示出来. patch: 打补丁工具,将补丁打到老文件里面,也就是diff左边的那个文件,使得老文件和新文件一样 格式:diff [选项] 老文件 新文件 格 ...

  10. Qt动态连接库/静态连接库创建与使用,QLibrary动态加载库

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Qt动态连接库/静态连接库创建与使用,QLibrary动态加载库     本文地址:https ...