• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > 使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证

使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了jquery.validate,验证电话或手机号码等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

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

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jquery.validate.js 多个相同name的处理方式
  • jquery.validate表单验证插件使用详解
  • Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
  • IE8兼容Jquery.validate.js的问题
  • jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
  • jquery.validate使用详解
  • jQuery ajax应用总结
  • jquery.validate提示错误信息位置方法
  • 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
  • jquery.validate使用时遇到的问题

相关文章

  • 2017-08-16jQuery对象[0]是什么含义?
  • 2017-08-16深入理解jquery跨域请求方法
  • 2017-08-16jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
  • 2017-08-16基于jQuery实现响应式圆形图片轮播特效
  • 2017-08-16jQuery ajax方法传递中文时出现中文乱码的解决方法
  • 2017-08-16基于jquery实现二级联动效果
  • 2017-08-16jquery 应用代码 方便的排序功能
  • 2017-08-16jQuery页面滚动浮动层智能定位实例代码
  • 2017-08-16jQuery插件slicebox实现3D动画图片轮播切换特效
  • 2017-08-16jQuery实现表格行上移下移和置顶的方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 今天抽时间给大家整理jquery和ajax的相关知识
    • jquery实现点击页面回到顶部
    • jQuery实现页面评论栏中访客信息自动填写功能的方法
    • jQuery EasyUI API 中文文档 - DataGrid数据表格
    • 使用jquery 简单实现下拉菜单
    • jQuery时间插件jquery.clock.js用法实例(5个示例)
    • JQuery-tableDnD 拖拽的基本使用介绍
    • JQuery 学习笔记 选择器之一
    • jQuery中next方法用法实例
    • ajax更新数据后,jquery、jq失效问题

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有