最近项目开发中遇到这样的需求“手机号码或者固话至少填写一个”,如下图所示:

项目采用的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 : []
}
}

转自:http://www.cnblogs.com/xiaoyangjia/p/3945007.html

【转载】[jquery.validate]自定义方法实现"手机号码或者固定电话"的逻辑验证的更多相关文章

  1. [jquery.validate]自定义方法实现"手机号码或者固定电话"的逻辑验证

    最近项目开发中遇到这样的需求“手机号码或者固话至少填写一个”,如下图所示: 项目采用的jquery.validate.js验证组件,目前组件不支持这种“或”逻辑的验证,于是就自己定义一个 jQuery ...

  2. Java 编写过滤手机号码或者固定电话的工具类

    以下是分享自己编写的用于过滤手机号码.固定电话.黑名单的工具类TelCheckUtils, import java.util.HashSet; import java.util.Set; import ...

  3. jQuery Validate 插件为表单提供了强大的验证功能

    之前项目开发中,表单校验用的jQuery Validate 插件,这个插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的 ...

  4. vue 常用的表单验证,包括手机号码,固定电话和身份证...

    <template> <div> <pl-content-box> <pl-page-nav :show-previous=true></pl-p ...

  5. jquery validate 动态生成的多个同名input的验证

    我的应用场景是,添加和修改入库单的明细,明细是以表格的形式呈现,可以动态添加商品,用jquery.validate插件做数据验证. 由于jquery.validate插件验证同名的input时只验证第 ...

  6. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  7. jQuery插件之验证控件jquery.validate.js

    今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的 ...

  8. JQuery.Validate学习笔记

    JQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

  9. Jquery客户端校验——jquery.validate.js

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

随机推荐

  1. node(redis)

    给出node下redis操作的简单例子: var redis = require("redis"), client = redis.createClient(6379,'127.0 ...

  2. Linux vim命令

    介绍 vim命令和vi的操作基本一致,vim命令的参数很多,我在这里列出了一些平时需要用的一些参数,vim主要有两个界面一个是esc的操作界面还有一个是输入i的编辑界面. 移动光标 0 (零):将光标 ...

  3. C#Light/Evil合体啦

    决定将C#Light和C#Evil合并成一个项目,毕竟C#Evil包含C#Light所有的功能,分开两个,基本的表达式方面有什么bug还得两头改 暂时就C#Light/Evil这么叫吧,庆祝合体,画了 ...

  4. js笔记——js数据类型转换

    以下内容摘录自阮一峰的<语法概述 -- JavaScript 标准参考教程(alpha)>章节『数据类型转换』,以做备忘.更多内容请查看原文. JavaScript是一种动态类型语言,变量 ...

  5. 学习ASP.NET MVC(六)——我的第一个ASP.NET MVC 编辑页面

    在上一文章中由Entity Framework(实体框架)去实现了对数据库的CURD操作.在本篇文章中,主要是调试修改自动生成的动作方法和视图,以及调试编辑功能与编辑功能的Book控制器. 首先,在V ...

  6. iOS $299刀企业证书申请的过程以及细节补充

    最近申请了iOS的 299刀企业证书,相关过程有些问题,分享出来,以便后来人参考. 申请的过程我主要参考了别人以前的文章,链接如下: 1.https://developer.apple.com/cn/ ...

  7. SQL Server 错误日志收缩(ERRORLOG)

    一.基础知识 默认情况下,错误日志位于 : C:\Program Files\Microsoft SQL Server\MSSQL.1\MSSQL\LOG\ERRORLOG 和ERRORLOG.n 文 ...

  8. LLBL Gen + Entity Framework 程序设计入门

    Entity Framework推出有好几年,除了微软的Visual Studio可以做实体框架开发外,第三方的开发工具如LLBL Gen, Devart Entity Developer也可以用来做 ...

  9. Android listview addHeaderView 和 addFooterView 详解

    addHeaderView()方法:主要是向listView的头部添加布局addFooterView()方法:主要是向listView的底部添加布局 需要注意的是添加布局的时候应该添加从父容器开始添加 ...

  10. 了解HTML表单之input元素的30个元素属性

    目录 传统属性 name type accept alt checked disabled readonly maxlength size src value 新增属性 autocomplete au ...