使用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 相关文章推荐
用jquery生成二级菜单的实例代码
Jun 24 Javascript
js实现日期级联效果
Jan 23 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 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中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
vuex实现购物车功能
2020/06/28 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
进一步理解Python中的函数编程
2015/04/13 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
python修改FTP服务器上的文件名
2019/09/11 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
Python @property及getter setter原理详解
2020/03/31 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
英文简历中的自我评价用语
2013/12/09 职场文书
销售员试用期自我评价
2014/09/15 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
尊师重教主题班会
2015/08/14 职场文书
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB