使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证


Posted in Javascript onSeptember 01, 2014

最近项目开发中遇到这样的需求“手机号码或者固话至少填写一个”,如下图所示:

使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证

项目采用的jquery.validate.js验证组件,目前组件不支持这种“或”逻辑的验证,于是就自己定义一个

jQuery.validator.addMethod("phone", function(value, element) {
      var mobile = $("#mobile").val();// 手机号码
      var telephone = $("#telephone").val();// 固定电话
      var mobileRule = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0-9]|170)\d{8}$/;
      var telephoneRule = /^\d{3,4}-?\d{7,9}$/;

      // 都没填
      if (isEmpty(mobile) && isEmpty(telephone)) {
        //自定义错误提示
        $("#receivingMobile_tip").addClass("errorHint").text("请填写固定电话或手机号码");
        return false;
      }
      var mobilePass = false;
      var telephonePass = false;
      // 手机填了、固定电话没填
      if (!isEmpty(mobile) && isEmpty(telephone)) {
        if (!mobileRule.test(mobile)) {
          //自定义错误提示
          $("#receivingMobilePhone_tip").removeClass("successHint").addClass("errorHint").text("手机号码格式不对");
          return false;
        } else {
          mobilePass = true;
        }
      }

      // 手机没填、固定电话填了
      if (isEmpty(mobile) && !isEmpty(telephone)) {
        if (!telephoneRule.test(telephone)) {
          //自定义错误提示
          $("#receivingTelephone_tip").removeClass("successHint").addClass("errorHint").text("固定电话格式不对");
          return false;
        } else {
          telephonePass = true;
        }
      }

      if (mobilePass || telephonePass) {
        //自定义成功提示
        $("#receivingTelephone_tip").removeClass("errorHint").addClass("successHint").text('');
        return true;
      } else {
        return false;
      }
    }, "ignore");

补充isEmpty函数:

// 空字符串判断
function isEmpty(v, allowBlank) {
   return v === null || v === undefined || (!allowBlank ? v === "" : false);
}

处理validate的errorPlacement:

errorPlacement : function(error, element) {
        //忽略自定义的方法错误提示
        if (error.text() == "ignore") {
          return;
        }



 
      }

在rules里面使用

rules : {
        telephone : {
          phone : []
        },
        mobile : {
          phone : []
        }
      }
Javascript 相关文章推荐
jQuery中$.click()无效问题分析
Jan 29 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
Vue实现圆环进度条的示例
Feb 06 Vue.js
上传图片js判断图片尺寸和格式兼容IE
Sep 01 #Javascript
影响jQuery使用的14个方面
Sep 01 #Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 #Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 #Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 #Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 #Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 #Javascript
You might like
PHP 数据库树的遍历方法
2009/02/06 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
Python @property原理解析和用法实例
2020/02/11 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
结构工程个人自荐信范文
2013/11/30 职场文书
财务管理专业自荐信范文
2013/12/24 职场文书
应届毕业生简历自我评价
2014/01/31 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL
windows server2008 开启端口的实现方法
2022/06/25 Servers