使用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 相关文章推荐
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
vue使用Google地图的实现示例代码
Dec 19 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
上传图片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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
PHP大转盘中奖概率算法实例
2014/10/21 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
Vue列表渲染的示例代码
2018/11/01 Javascript
js中null与空字符串""的区别讲解
2019/01/17 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
python实现简单图书管理系统
2019/11/22 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
金融行业职业生涯规划范文
2014/01/17 职场文书
麦当劳辞职信范文
2014/01/18 职场文书
护理专科自荐书范文
2014/02/18 职场文书
个人自我鉴定总结
2014/03/25 职场文书
法律专业求职信
2014/05/24 职场文书
企业形象策划方案
2014/05/29 职场文书
股指期货心得体会
2014/09/10 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书