使用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非法字符过滤代码(骂人的话等等)
May 26 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
js图片预加载示例
Apr 30 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
JQuery学习总结【二】
Dec 01 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 Javascript
js实现右键弹出自定义菜单
Sep 08 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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
php for 循环使用的简单实例
2016/06/02 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
Python中的闭包总结
2014/09/18 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
联强国际笔试题面试题
2013/07/10 面试题
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
超市仓管员岗位职责范本
2014/09/18 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
用Java实现简单计算器功能
2021/07/21 Java/Android
关于vue-router-link选择样式设置
2022/04/30 Vue.js