jQuery formValidator表单验证插件是什么
2015-03-17 18:20
811 查看
实际项目中的表单应用是多种多样的,随之而来的验证也是多变的,但Jquery formValidator为我们提供了自定义函数接口,个人认为是其最主要的强大之处。废话不多说,直接实例。例一:座机和手机,至少选其一,可以不选。座机手机座机手机$("#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:"负整数格式不正确"});
<pre name="code" class="javascript"><pre name="code" class="javascript" style="font-size:14px;">正数:$("#zs1").formValidator({onshow:"请输入正数",oncorrect:"谢谢你的合作,你的正数正确"}).regexValidator({regexp:"num1",datatype:"enum",onerror:"正数格式不正确"});<pre name="code" class="javascript">数字:$("#sz").formValidator({onshow:"请输入数字",oncorrect:"谢谢你的合作,你的数字正确"}).regexValidator({regexp:"num",datatype:"enum",onerror:"数字格式不正确"});
<pre name="code" class="javascript">负数:$("#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:"非正浮点数格式不正确"});
<pre name="code" class="javascript">手机号码$("#sj").formValidator({onshow:"请输入你的手机号码",onfocus:"必须是13或15打头哦",oncorrect:"谢谢你的合作,你的手机号码正确"}).regexValidator({regexp:"mobile",datatype:"enum",onerror:"手机号码格式不正确"});
<pre name="code" class="javascript">国内电话$("#dh").formValidator({onshow:"请输入国内电话",onfocus:"例如:0577-88888888或省略区号88888888",oncorrect:"谢谢你的合作,你的国内电话正确"}).regexValidator({regexp:"tel",datatype:"enum",onerror:"国内电话格式不正确"});
<pre name="code" class="javascript">email电子邮箱$("#email").formValidator({onshow:"请输入你的email",onfocus:"请注意你输入的email格式,例如:wzmaodong@126.com",oncorrect:"谢谢你的合作,你的email正确"}).regexValidator({regexp:"email",datatype:"enum",onerror:"email格式不正确"});
<pre name="code" class="javascript">邮编$("#yb").formValidator({onshow:"请输入邮编",onfocus:"6位数字组成的哦",oncorrect:"谢谢你的合作,你的邮编正确"}).regexValidator({regexp:"zipcode",datatype:"enum",onerror:"邮编格式不正确"});
<pre name="code" class="javascript">QQ号码$("#qq").formValidator({onshow:"请输入QQ号码",oncorrect:"谢谢你的合作,你的QQ号码正确"}).regexValidator({regexp:"qq",datatype:"enum",onerror:"QQ号码格式不正确"});
<pre name="code" class="javascript">身份证$("#sfz").formValidator({onshow:"请输入身份证",oncorrect:"谢谢你的合作,你的身份证正确"}).regexValidator({regexp:"idcard",datatype:"enum",onerror:"身份证格式不正确"});
<pre name="code" class="javascript">字母$("#zm").formValidator({onshow:"请输入字母",oncorrect:"谢谢你的合作,你的字母正确"}).regexValidator({regexp:"letter",datatype:"enum",onerror:"字母格式不正确"});
<pre name="code" class="javascript">大写字母$("#dxzm").formValidator({onshow:"请输入大写字母",oncorrect:"谢谢你的合作,你的大写字母正确"}).regexValidator({regexp:"letter_u",datatype:"enum",onerror:"大写字母格式不正确"});
<pre name="code" class="javascript">小写字母$("#xxzm").formValidator({onshow:"请输入小写字母",oncorrect:"谢谢你的合作,你的小写字母正确"}).regexValidator({regexp:"letter_l",datatype:"enum",onerror:"小写字母格式不正确"});
相关文章推荐
- jQuery formValidator表单验证插件是什么?
- jQuery formValidator表单验证插件4.1.1提供下载
- jQuery formValidator表单验证插件4.1.1提供下载
- [转摘]jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例
- jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例
- jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例
- jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例
- jQuery formValidator表单验证插件2.9.3版本已经支持对所有客户端控件的验证
- jQuery formValidator表单验证插件3.2ver发布
- jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例
- jQuery formValidator表单验证插件3.5a 版本发布,适合jQuery1.3.2类库
- jQuery formValidator表单验证插件2.9.3版本已经支持对所有客户端控件的验证
- jQuery formValidator表单验证插件,适合行业网页(表单元素密集型)的表单验证示例(转载)
- jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例
- jQuery formValidator表单验证插件4.1.0 下载 演示 文档 可换肤 代码生成器
- jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例
- jQuery formValidator表单验证插件3.5a 版本发布,适合jQuery1.3.2类库
- jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例
- jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例
- 功能非常强大的表单验证插件jQuery formValidator