使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证
2023-06-13 09:15:44 时间
最近项目开发中遇到这样的需求“手机号码或者固话至少填写一个”,如下图所示:
项目采用的jquery.validate.js验证组件,目前组件不支持这种“或”逻辑的验证,于是就自己定义一个
jQuery.validator.addMethod("phone",function(value,element){ varmobile=$("#mobile").val();//手机号码 vartelephone=$("#telephone").val();//固定电话 varmobileRule=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0-9]|170)\d{8}$/; vartelephoneRule=/^\d{3,4}-?\d{7,9}$/; //都没填 if(isEmpty(mobile)&&isEmpty(telephone)){ //自定义错误提示 $("#receivingMobile_tip").addClass("errorHint").text("请填写固定电话或手机号码"); returnfalse; } varmobilePass=false; vartelephonePass=false; //手机填了、固定电话没填 if(!isEmpty(mobile)&&isEmpty(telephone)){ if(!mobileRule.test(mobile)){ //自定义错误提示 $("#receivingMobilePhone_tip").removeClass("successHint").addClass("errorHint").text("手机号码格式不对"); returnfalse; }else{ mobilePass=true; } } //手机没填、固定电话填了 if(isEmpty(mobile)&&!isEmpty(telephone)){ if(!telephoneRule.test(telephone)){ //自定义错误提示 $("#receivingTelephone_tip").removeClass("successHint").addClass("errorHint").text("固定电话格式不对"); returnfalse; }else{ telephonePass=true; } } if(mobilePass||telephonePass){ //自定义成功提示 $("#receivingTelephone_tip").removeClass("errorHint").addClass("successHint").text(""); returntrue; }else{ returnfalse; } },"ignore");
补充isEmpty函数:
//空字符串判断 functionisEmpty(v,allowBlank){ returnv===null||v===undefined||(!allowBlank?v==="":false); }
处理validate的errorPlacement:
errorPlacement:function(error,element){ //忽略自定义的方法错误提示 if(error.text()=="ignore"){ return; } }
在rules里面使用
rules:{ telephone:{ phone:[] }, mobile:{ phone:[] } }
相关文章
- JQuery 入门 - 附案例代码
- jQuery 中在元素中添加插入内容方法 after, append, appendTo, before, prepend, prependTo 的区别
- 使用 jQuery 插件 CitySelect 实现省市联动效果
- jQuery 的 live() 方法对 hover 事件的处理详解编程语言
- jQuery width()和height()方法的用法
- jQuery prepend()和prependTo()方法
- jQuery $.getJSON()方法的用法
- JQuery.ajax传递中文参数的解决方法推荐
- jquery查找select,并触发事件的实现代码
- jquery加载页面的方法(页面加载完成就执行)
- IE中jquery.form中ajax提交没反应解决方法分享
- jQuery$.data()方法使用注意细节
- 关于jQuery参考实例1.0jQuery的哲学
- jquery利用ajax调用后台方法实例
- JQuery实现鼠标滑过显示导航下拉列表
- 使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
- 解析prototype,JQuery中跳出each循环的方法
- jQuery获取当前对象标签名称的方法
- jquery队列queue与原生模仿其实现方法分享
- jQuery操作表格(table)的常用方法、技巧汇总
- jQuery过滤方法filter()选择具有特殊属性的元素
- 使表格的标题列可左右拉伸jquery插件封装
- jquery的clone方法应用于textarea和select的bug修复
- jquery显示隐藏input对象
- jQuery内置的AJAX功能和JSON的使用实例
- jQuery实现异步获取json数据的2种方式
- 使用jsdom和jquery分别实现简单增删改