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 位置插件
Dec 25 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
json传值以及ajax接收详解
May 24 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
JavaScript实现Excel表格效果
Feb 07 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 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控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
Python 内置函数complex详解
2016/10/23 Python
Python聊天室程序(基础版)
2018/04/01 Python
python使用PyQt5的简单方法
2019/02/27 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
外企C语言笔试题
2013/11/10 面试题
小学一年级评语大全
2014/04/22 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
先进单位事迹材料
2014/12/25 职场文书
初中教师个人总结
2015/02/10 职场文书
《植树问题》教学反思
2016/03/03 职场文书
Nginx限流和黑名单配置
2022/05/20 Servers