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 相关文章推荐
JS链式调用的实现方法
Mar 07 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
checkbox使用示例
Aug 23 Javascript
js查找节点的方法小结
Jan 13 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 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
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
webpack之devtool详解
2018/02/10 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
用Python生成器实现微线程编程的教程
2015/04/13 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
大学生通用个人的自我评价
2014/02/10 职场文书
李敖北大演讲稿
2014/05/24 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
大学生村官个人总结
2015/02/15 职场文书
爱护公物主题班会
2015/08/17 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书