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 相关文章推荐
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
JQUERY操作JSON实例代码
Feb 09 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
基于JQuery制作的产品广告效果
Dec 08 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
屏蔽script注入小例子
Nov 12 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
layui-select动态选中值的例子
Sep 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
5.PHP的其他功能
2006/10/09 PHP
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
php中设置多级目录session的问题
2011/08/08 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
nginx 设置多个站跨域
2021/03/09 Servers
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python的print用法示例
2014/02/11 Python
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
深入浅析Python传值与传址
2018/07/10 Python
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
美发活动策划书
2014/01/14 职场文书
中学运动会广播稿
2014/01/19 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
《手指教学》反思
2014/02/14 职场文书
语文教学随笔感言
2014/02/18 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL