使用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 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
求解开jscript.encode代码的asp函数
Feb 28 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
js实现分割上传大文件
Mar 09 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 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的SQL注入过程分析
2012/01/06 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
Extjs 几个方法的讨论
2010/01/28 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
js实现购物车功能
2018/06/12 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
python列表推导式入门学习解析
2019/12/02 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
奉献演讲稿范文
2014/05/21 职场文书
媒体宣传策划方案
2014/05/25 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
党员民主生活会材料
2014/12/15 职场文书
党员发展大会主持词
2015/07/03 职场文书
奠基仪式致辞
2015/07/30 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript