使用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 相关文章推荐
JavaScript 密码强度判断代码
Sep 05 Javascript
javascript 流畅动画实现原理
Sep 08 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
vue--vuex详解
Apr 15 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
上传图片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 sprintf()函数让你的sql操作更安全
2008/07/23 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
小谈php正则提取图片地址
2014/03/27 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
Javascript表达式中连续的 && 和 || 之赋值区别
2010/10/17 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
python实现备份目录的方法
2015/08/03 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
python清理子进程机制剖析
2017/11/23 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
创业计划书中包含的9个方面
2013/12/26 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
触电现场处置方案
2014/05/14 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
于丹论语心得观后感
2015/06/15 职场文书
学校运动会简讯
2015/07/20 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python