使用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 相关文章推荐
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 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生成Flash动画的实现代码
2010/03/12 PHP
php简单提示框alert封装函数
2010/08/08 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
PHP crc32()函数讲解
2019/02/14 PHP
javascript smipleChart 简单图标类
2011/01/12 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
vue a标签点击实现赋值方式
2020/09/07 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
python实现的简单RPG游戏流程实例
2015/06/28 Python
Python简单遍历字典及删除元素的方法
2016/09/18 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
python中有函数重载吗
2020/05/28 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
妇科医生自荐信
2013/11/05 职场文书
社区学习十八大感想
2014/01/22 职场文书
离婚协议书范文2014
2014/10/16 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
亮剑精神观后感
2015/06/05 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
python和anaconda的区别
2022/05/06 Python