使用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宝典学习笔记
Feb 07 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
在Vue中使用antv的示例代码
Jun 29 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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
推荐文章系统(一)
2006/10/09 PHP
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
第四章 php数学运算
2011/12/30 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
PHP中使用BigMap实例
2015/03/30 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
理解Javascript_09_Function与Object
2010/10/16 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
python简单操作excle的方法
2018/09/12 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
浅析Python 序列化与反序列化
2020/08/05 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
英国工具中心:UK Tool Centre
2017/07/10 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
高中生职业规划范文
2014/03/09 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
小学毕业感言200字
2015/07/30 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers