使用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实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
Google 地图事件实例讲解
Aug 06 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
react router 4.0以上的路由应用详解
Sep 21 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
Ajax实现异步加载数据
Nov 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的引用原因分析
2012/09/06 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
如何实现JS函数的重载
2006/09/22 Javascript
JS 面向对象的5钟写法
2009/07/31 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
小程序实现多列选择器
2019/02/15 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
详解Python的单元测试
2015/04/28 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
违章停车检讨书
2014/10/21 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
深入浅析React中diff算法
2021/05/19 Javascript
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript