jQuery插件formValidator自定义函数扩展功能实例详解


Posted in Javascript onNovember 25, 2015

本文实例讲述了jQuery插件formValidator自定义函数扩展功能的方法。分享给大家供大家参考,具体如下:

jQuery formValidator表单验证插件是什么?感兴趣的读者可参考《jQuery formValidator表单验证插件》以及本站其他相关文档

此处省略若干文字。

实际项目中的表单应用是多种多样的,随之而来的验证也是多变的,但Jquery formValidator为我们提供了自定义函数接口,个人认为是其最主要的强大之处。废话不多说,直接实例。

例一:座机和手机,至少选其一,可以不选。

分析:这属于组合验证,需要根据用户选择框体的不同进行不同的验证条件。

知识点:Jquery formvalidator提供了自定义函数接口为functionValidator({ fun: funname });

座机手机

$("#txtMobileTel,#txtContactTel").formValidator({ tipid: "txtMobileTelTip", onshow: "请填写任一种联系号码", onfocus: "请输入移动电话或座机电话", oncorrect: "输入正确!" }).functionValidator({ fun: allEmpty });
function allEmpty(val, elem) {
 if ($("#txtMobileTel").val() == "" && $("#txtContactTel").val() == "") {
  return '请输入移动电话或座机电话';
 }
 else {
  if ($("#txtMobileTel").val() != "" && $("#txtContactTel").val() != "") {
   if (($("#txtMobileTel").val()).search(/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/) != -1) {
    if (($("#txtContactTel").val()).search(/^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/) != -1) { return true } else {
     return "座机电话格式错误";
    }
   } else {
    return "移动电话格式错误";
   }
  } else {
   if ($("#txtMobileTel").val() != "") {
    if (($("#txtMobileTel").val()).search(/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/) != -1) { return true } else {
     return "移动电话格式错误";
    }
   }
   if ($("#txtContactTel").val() != "") {
    if (($("#txtContactTel").val()).search(/^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/) != -1) { return true } else {
     return "座机电话格式错误";
    }
   }
  }
};

例二:地区级联下拉,当不存在二级地区的下拉解除校验。

省市地区级联

$("#ddlOne").formValidator({ onshow: "请选择省市", onfocus: "省市必须选择", oncorrect: "输入正确" }).inputValidator({ min: 1, onerror: "请选择有效的地区" }).functionValidator({ fun: city });
 $("#ddlTwo").formValidator({ onshow: "请选择城市", onfocus: "城市必须选择", oncorrect: "输入正确" }).inputValidator({ min: 1, onerror: "请选择有效的地区" });
function city(val, elem) {
 var a = "";
 $.getJSON("../Customer/Area.ashx?parentid=" + $("#ddlOne option:selected").val(), null, function(json) { 
  if (json[0].areacode == "0") {
   $("#ddlTwo").attr("disabled", true).unFormValidator(true); //解除校验
  }
  else {
   $("#ddlTwo").attr("disabled", false).unFormValidator(false); //恢复校验
  }
 });
}

常用验证:

整数:

$("#zs").formValidator({onshow:"请输入整数",oncorrect:"谢谢你的合作,你的整数正确"}).regexValidator({regexp:"intege",datatype:"enum",onerror:"整数格式不正确"});

正整数:

$("#zzs").formValidator({onshow:"请输入正整数",oncorrect:"谢谢你的合作,你的正整数正确"}).regexValidator({regexp:"intege1",datatype:"enum",onerror:"正整数格式不正确"});

负整数:

$("#fzs").formValidator({onshow:"请输入负整数",oncorrect:"谢谢你的合作,你的负整数正确"}).regexValidator({regexp:"intege2",datatype:"enum",onerror:"负整数格式不正确"});

正数:

$("#zs1").formValidator({onshow:"请输入正数",oncorrect:"谢谢你的合作,你的正数正确"}).regexValidator({regexp:"num1",datatype:"enum",onerror:"正数格式不正确"});

数字:

$("#sz").formValidator({onshow:"请输入数字",oncorrect:"谢谢你的合作,你的数字正确"}).regexValidator({regexp:"num",datatype:"enum",onerror:"数字格式不正确"});

负数:

$("#fs").formValidator({onshow:"请输入负数",oncorrect:"谢谢你的合作,你的负数正确"}).regexValidator({regexp:"num2",datatype:"enum",onerror:"负数格式不正确"});

浮点数:

$("#zfds").formValidator({onshow:"请输入正浮点数",oncorrect:"谢谢你的合作,你的正浮点数正确"}).regexValidator({regexp:"decmal1",datatype:"enum",onerror:"正浮点数格式不正确"});
$("#ffds").formValidator({onshow:"请输入负浮点数",oncorrect:"谢谢你的合作,你的负浮点数正确"}).regexValidator({regexp:"decmal2",datatype:"enum",onerror:"负浮点数格式不正确"});
$("#fffds").formValidator({onshow:"请输入非负浮点数",oncorrect:"谢谢你的合作,你的非负浮点数正确"}).regexValidator({regexp:"decmal4",datatype:"enum",onerror:"非负浮点数格式不正确"});
$("#fzfds").formValidator({onshow:"请输入非正浮点数",oncorrect:"谢谢你的合作,你的非正浮点数正确"}).regexValidator({regexp:"decmal5",datatype:"enum",onerror:"非正浮点数格式不正确"});

手机:

$("#sj").formValidator({onshow:"请输入你的手机号码",onfocus:"必须是13或15打头哦",oncorrect:"谢谢你的合作,你的手机号码正确"}).regexValidator({regexp:"mobile",datatype:"enum",onerror:"手机号码格式不正确"});

座机:

$("#dh").formValidator({onshow:"请输入国内电话",onfocus:"例如:0577-88888888或省略区号88888888",oncorrect:"谢谢你的合作,你的国内电话正确"}).regexValidator({regexp:"tel",datatype:"enum",onerror:"国内电话格式不正确"});

邮箱:

$("#email").formValidator({onshow:"请输入你的email",onfocus:"请注意你输入的email格式,例如:wzmaodong@126.com",oncorrect:"谢谢你的合作,你的email正确"}).regexValidator({regexp:"email",datatype:"enum",onerror:"email格式不正确"});

邮编:

$("#yb").formValidator({onshow:"请输入邮编",onfocus:"6位数字组成的哦",oncorrect:"谢谢你的合作,你的邮编正确"}).regexValidator({regexp:"zipcode",datatype:"enum",onerror:"邮编格式不正确"});

QQ:

$("#qq").formValidator({onshow:"请输入QQ号码",oncorrect:"谢谢你的合作,你的QQ号码正确"}).regexValidator({regexp:"qq",datatype:"enum",onerror:"QQ号码格式不正确"});

身份证:

$("#sfz").formValidator({onshow:"请输入身份证",oncorrect:"谢谢你的合作,你的身份证正确"}).regexValidator({regexp:"idcard",datatype:"enum",onerror:"身份证格式不正确"});

字母:

$("#zm").formValidator({onshow:"请输入字母",oncorrect:"谢谢你的合作,你的字母正确"}).regexValidator({regexp:"letter",datatype:"enum",onerror:"字母格式不正确"});

大写字母:

$("#dxzm").formValidator({onshow:"请输入大写字母",oncorrect:"谢谢你的合作,你的大写字母正确"}).regexValidator({regexp:"letter_u",datatype:"enum",onerror:"大写字母格式不正确"});

小写字母:

$("#xxzm").formValidator({onshow:"请输入小写字母",oncorrect:"谢谢你的合作,你的小写字母正确"}).regexValidator({regexp:"letter_l",datatype:"enum",onerror:"小写字母格式不正确"});

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery果冻抖动效果实现方法
Jan 15 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
javascript代码简写的几种常用方式汇总
Aug 23 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 #Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 #Javascript
jquery+css实现动感的图片切换效果
Nov 25 #Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 #Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 #Javascript
Prototype框架详解
Nov 25 #Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 #Javascript
You might like
php MYSQL 数据备份类
2009/06/19 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
python 实现的车牌识别项目
2021/01/25 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
2014年机关植树节活动方案
2014/02/27 职场文书
销售岗位职责范本
2014/06/12 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书