使用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 相关文章推荐
firefox下input type="file"的size是多大
Oct 24 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 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
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
浅析Python编写函数装饰器
2016/03/18 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
python中的tcp示例详解
2018/12/09 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
python 整数越界问题详解
2019/06/27 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
golang 实现菜单树的生成方式
2021/04/28 Golang
python中的None与NULL用法说明
2021/05/25 Python
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python