使用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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
关于js datetime的那点事
Nov 15 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
JavaScript闭包实例讲解
Apr 22 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
js定时器实例分享
Dec 20 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 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中的phpinfo()函数
2013/06/06 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
php中session定期自动清理的方法
2015/11/12 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
JavaScript 原型链学习总结
2010/10/29 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
深入浅析Python传值与传址
2018/07/10 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
美国在线珠宝商店:SZUL
2017/02/11 全球购物
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
打架检讨书500字
2014/01/29 职场文书
批评与自我批评材料
2014/02/15 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
选秀节目策划方案
2014/06/06 职场文书
服务理念标语
2014/06/18 职场文书
节能减耗标语
2014/06/21 职场文书
家长会欢迎标语
2014/06/24 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
校园安全主题班会
2015/08/12 职场文书
交通安全教育心得体会
2016/01/15 职场文书