相思资源网 Design By www.200059.com

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

jQuery formValidator表单验证插件是什么"_blank" href="https://www.jb51.net/article/15482.htm">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}-)"座机电话格式错误";
    }
   } 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}-)"座机电话格式错误";
    }
   }
  }
};

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

省市地区级联

$("#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" + $("#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程序设计有所帮助。

标签:
jQuery插件formValidator,自定义,函数扩展,jQuery插件formValidator扩展

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

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

暂无jQuery插件formValidator自定义函数扩展功能实例详解的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。