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

    实验四      GUI界面的设计和运用 20135313吴子怡 一.实验目的 结合项目,为每个密码学算法设计能够提供使用者用户体验的操作界面,实现加解密.求得消息摘要的功能. 二.代码举例(备注:其 ...

  2. 20172330 2017-2018-1 《Java程序设计》第十一周学习总结

    20172330 2017-2018-1 <程序设计与数据结构>第十一周学习总结 教材学习内容总结 本周的学习内容为集合 Android简介 Android操作系统是一种多用户的Linux ...

  3. ubuntu下配置ss并设置PAC模式

    一.安装ss 1. sudo apt-get update(更新源) 2. sudo apt-get install python-pip(安装pip) 3. sudo pip install sha ...

  4. git向github提交时不输入账号密码

    缘由:每次向github提交代码时都要输入用户名密码,太麻烦了,影响效率 解决方案: 方案一: 在你的用户目录下新建一个文本文件.git-credentials Windows:C:/Users/us ...

  5. 【Linux】- 简明Vim练习攻略

    vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一定会对这个编辑器失去兴趣的.下面的文章翻译自<Learn Vim Progress ...

  6. i18n实现前端国际化(实例)

    在今日的需求中需要利用 i18n 这个框架来实现前端的国家化操作,下图是实现效果: 点击选择框实现网页上语言的切换: 下面开始实现过程: 所需工具:    - jquery-3.3.1.js 下载地址 ...

  7. Centos上Apache重启,mysql重启,nginx重启方法

    转载:http://www.3lian.com/edu/2012/04-01/24278.html Centos上Apache重启,mysql重启, nginx 重启方法 1.重启 apache se ...

  8. JDK1.8最新特性--Lambda表达式(重点)

    一个旧版本JDK简单匿名类的用例如下所示: // Java 8之前: JButton show = new JButton("Show"); show.addActionListe ...

  9. Android 混淆签名打包

    1.混淆文件 proguard-rules.pro # Add project specific ProGuard rules here. # By default, the flags in thi ...

  10. WebClient的使用

    1.下载网页源码: private void button1_Click(object sender, EventArgs e) { string url = textBox1.Text; strin ...