使用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实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
上传图片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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
php常用图片处理类
2016/03/16 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
jQuery拖拽 & 弹出层 介绍与示例
2013/12/27 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
Angular.js实现动态加载组件详解
2017/05/28 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
js实现移动端轮播图
2020/12/21 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
英文版网络工程师求职信
2013/10/28 职场文书
大学生学业生涯规划
2014/01/05 职场文书
善意的谎言事例
2014/02/15 职场文书
岗位明星事迹材料
2014/05/18 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers