• 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自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了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使用时遇到的问题

相关文章

  • 基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
  • jQuery实现标签页效果实战(4)
  • jQuery 获取多选框的值及多选框中文的函数
  • jQuery 1.0.4 - New Wave Javascript(js源文件)
  • jQuery flip插件实现的翻牌效果示例【附demo源码下载】
  • Jquery插件之多图片异步上传
  • jquery实现顶部向右伸缩的导航区域代码
  • 鼠标移到导航当前位置的LI变色处于选中状态
  • 优秀js开源框架-jQuery使用手册(1)
  • 用JQuery模仿淘宝的图片放大镜显示效果

文章分类

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

最近更新的内容

    • JQuery DataTable删除行后的页面更新利用Ajax解决
    • jQuery的.live()和.die() 使用介绍
    • jquery判断当前浏览器的实现代码
    • jQuery1.6 类型判断实现代码
    • jquery实现简洁文件上传表单样式
    • 40个新鲜出炉的jQuery 插件和免费教程[上]
    • 利用js(jquery)操作Cookie的方法说明
    • jquery(live)中File input的change方法只起一次作用的解决办法
    • 七夕情人节丘比特射箭小游戏
    • jquery 动态调整textarea高度

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

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