使用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之典型高阶函数应用介绍
Jan 10 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
Vue实现Layui的集成方法步骤
Apr 10 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 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
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
关于页面优化和伪静态
2009/10/11 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
Jquery常用技巧收集整理篇
2010/11/14 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
跟老齐学Python之折腾一下目录
2014/10/24 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
HTML5有哪些新特征
2015/12/01 HTML / CSS
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
职称自我鉴定
2013/10/15 职场文书
车贷收入证明范本
2014/01/09 职场文书
安全生产检查通报
2014/01/29 职场文书
园林系毕业生求职信
2014/06/23 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python
python+opencv实现视频抽帧示例代码
2021/06/11 Python
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server