(转)强大的JQuery表单验证插件 FormValidator使用介绍
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了(转)强大的JQuery表单验证插件 FormValidator使用介绍相关的知识,希望对你有一定的参考价值。
jQuery formValidator表单验证插件是客户端表单验证插件。
在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等。在这之前,页面开发者(javascript开发者)需要编写大量的JavaScript来进行表单元素的校验,而这些校验在平时开发中不停的重复书写。
常见的校验如不能为空,必须满足长度要求,必须为数字,必须为Email等等。一般要判断的表单元素比较多,开发过程就显得枯燥无味——重复的代码不断重复,而且可能还要兼容多种浏览器,更多的考虑因素使人头疼不已。由于每个要校验的页面虽然逻辑基本相同,但是在大多数情况下,出于种种原因,开发者宁愿再编写一套JS文件,为了便于管理。
jQuery formValidator表单插件致力于改善这一过程。你只关心业务逻辑,而无需关系实现过程,只需简单的配置,无需写代码就能实现表单的检验。它包括常规检验功能和可扩展校验功能。针对每个表单元素你只需要写一行配置信息就能完成校验。而这些配置信息无需写入表单元素,实现了js代码和html代码的分离。这样做的好处,使B/S开发过程中,分工更加明确,页面设计着只需关心他的页面(设计的时候不必担心把脚本弄坏了),javascript开发者只需关心脚本的开发。
而插件本身包含的校验方式可以有无数种,只要你扩展正则表达式和函数。本插件于同类校验插件最大的区别:校验功能可以扩展;实现了校验代码于html代码的完全分离;你只需写一行配置信息就能完成一个表单元素的所有校验。插件本身提供了很多回调函数,使调用者能最大限度的发挥自己的想象能力来完成自己的业务需求。 在同一个页面你可以拥有很多个校验组,你只需在提交的按钮那里调用
return jQuery.formValidator.pageIsValid(‘校验组号‘) 来完成多个组的校验,互不干扰。
插件具备跨浏览器的能力。目前在ie和ff两种浏览器下调试通过,你不用再考虑在多浏览器下如何兼容,jQuery formValidator帮你做到了这些。
1.首先在项目中添加必备js与css
<script src="formValidator1/formValidator-4.0.1.min.js" type="text/javascript"></script> <!--表单验证必须库--> www.it165.net
<script src="formValidator1/formValidatorRegex.js" type="text/javascript"></script> <!--表单验证扩展库-->
<link href="formValidator1/style/validator.css" rel="stylesheet" type="text/css" /><!--表单验证样式表-->
3.<body>中要验证的标签(做一些常用的演示)
001.
<
table
border
=
"0px"
style
=
"font-size:12px"
>
002.
<
tr
>
003.
<
td
colpan
=
"3"
><
input
type
=
"submit"
name
=
"button"
id
=
"button"
value
=
"提交"
/></
td
>
004.
</
tr
>
005.
<
tr
>
006.
<
td
align
=
"right"
>身份证(正则表达式库):</
td
>
007.
<
td
><
input
name
=
"sfz"
type
=
"text"
id
=
"sfz"
/></
td
>
008.
<
td
><
div
id
=
"sfzTip"
style
=
"width:300px"
></
div
></
td
>
<!--必须注意这里提示验证信息中的div的id值,跟要验证控件中的id值多了一个Tip,下面的都是这样。必须多的是Tip,也必须要多。-->
009.
</
tr
>
010.
<
tr
>
011.
<
td
align
=
"right"
>身份证(外部函数):</
td
>
012.
<
td
><
input
type
=
"text"
id
=
"sfz1"
style
=
"width:120px"
/></
td
>
013.
<
td
><
div
id
=
"sfz1Tip"
style
=
"width:300px"
></
div
></
td
>
014.
</
tr
>
015.
<
tr
>
016.
<
td
align
=
"right"
>整数:</
td
>
017.
<
td
><
input
type
=
"text"
id
=
"zs"
style
=
"width:120px"
/></
td
>
018.
<
td
><
div
id
=
"zsTip"
style
=
"width:300px"
></
div
></
td
>
019.
</
tr
>
020.
<
tr
>
021.
<
td
align
=
"right"
>正整数:</
td
>
022.
<
td
><
input
type
=
"text"
id
=
"zzs"
style
=
"width:120px"
/></
td
>
023.
<
td
><
div
id
=
"zzsTip"
style
=
"width:300px"
></
div
></
td
>
024.
</
tr
>
025.
<
tr
>
026.
<
td
align
=
"right"
>负整数:</
td
>
027.
<
td
><
input
type
=
"text"
id
=
"fzs"
style
=
"width:120px"
/></
td
>
028.
<
td
><
div
id
=
"fzsTip"
style
=
"width:300px"
></
div
></
td
>
029.
</
tr
>
030.
<
tr
>
031.
<
td
align
=
"right"
>数字:</
td
>
032.
<
td
><
input
type
=
"text"
id
=
"sz"
style
=
"width:120px"
/></
td
>
033.
<
td
><
div
id
=
"szTip"
style
=
"width:300px"
></
div
></
td
>
034.
</
tr
>
035.
<
tr
>
036.
<
td
align
=
"right"
>正数(正整数 + 0):</
td
>
037.
<
td
><
input
type
=
"text"
id
=
"zs1"
style
=
"width:120px"
/></
td
>
038.
<
td
><
div
id
=
"zs1Tip"
style
=
"width:300px"
></
div
></
td
>
039.
</
tr
>
040.
<
tr
>
041.
<
td
align
=
"right"
>负数(负整数 + 0):</
td
>
042.
<
td
><
input
type
=
"text"
id
=
"fs"
style
=
"width:120px"
/></
td
>
043.
<
td
><
div
id
=
"fsTip"
style
=
"width:300px"
></
div
></
td
>
044.
</
tr
>
045.
<
tr
>
046.
<
td
align
=
"right"
>浮点数:</
td
>
047.
<
td
><
input
type
=
"text"
id
=
"fds"
style
=
"width:120px"
/></
td
>
048.
<
td
><
div
id
=
"fdsTip"
style
=
"width:300px"
></
div
></
td
>
049.
</
tr
>
050.
<
tr
>
051.
<
td
align
=
"right"
>正浮点数:</
td
>
052.
<
td
><
input
type
=
"text"
id
=
"zfds"
style
=
"width:120px"
/></
td
>
053.
<
td
><
div
id
=
"zfdsTip"
style
=
"width:300px"
></
div
></
td
>
054.
</
tr
>
055.
<
tr
>
056.
<
td
align
=
"right"
>负浮点数:</
td
>
057.
<
td
><
input
type
=
"text"
id
=
"ffds"
style
=
"width:120px"
/></
td
>
058.
<
td
><
div
id
=
"ffdsTip"
style
=
"width:300px"
></
div
></
td
>
059.
</
tr
>
060.
<
tr
>
061.
<
td
align
=
"right"
>非负浮点数(正浮点数 + 0):</
td
>
062.
<
td
><
input
type
=
"text"
id
=
"fffds"
style
=
"width:120px"
/></
td
>
063.
<
td
><
div
id
=
"fffdsTip"
style
=
"width:300px"
></
div
></
td
>
064.
</
tr
>
065.
<
tr
>
066.
<
td
align
=
"right"
>非正浮点数(负浮点数 + 0):</
td
>
067.
<
td
><
input
type
=
"text"
id
=
"fzfds"
style
=
"width:120px"
/></
td
>
068.
<
td
><
div
id
=
"fzfdsTip"
style
=
"width:300px"
></
div
></
td
>
069.
</
tr
>
070.
<
tr
>
071.
<
td
align
=
"right"
>颜色:</
td
>
072.
<
td
><
input
type
=
"text"
id
=
"ys"
style
=
"width:120px"
/></
td
>
073.
<
td
><
div
id
=
"ysTip"
style
=
"width:300px"
></
div
></
td
>
074.
</
tr
>
075.
<
tr
>
076.
<
td
align
=
"right"
>你的EMAIL:</
td
>
077.
<
td
><
input
type
=
"text"
id
=
"email"
style
=
"width:120px"
/></
td
>
078.
<
td
><
div
id
=
"emailTip"
style
=
"width:300px"
></
div
></
td
>
079.
</
tr
>
080.
<
tr
>
081.
<
td
align
=
"right"
>手机:</
td
>
082.
<
td
><
input
type
=
"text"
id
=
"sj"
style
=
"width:120px"
/></
td
>
083.
<
td
><
div
id
=
"sjTip"
style
=
"width:300px"
></
div
></
td
>
084.
</
tr
>
085.
<
tr
>
086.
<
td
align
=
"right"
>邮编:</
td
>
087.
<
td
><
input
type
=
"text"
id
=
"yb"
style
=
"width:120px"
/></
td
>
088.
<
td
><
div
id
=
"ybTip"
style
=
"width:300px"
></
div
></
td
>
089.
</
tr
>
090.
<
tr
>
091.
<
td
align
=
"right"
>非空:</
td
>
092.
<
td
><
input
type
=
"text"
id
=
"fk"
style
=
"width:120px"
/></
td
>
093.
<
td
><
div
id
=
"fkTip"
style
=
"width:300px"
></
div
></
td
>
094.
</
tr
>
095.
<
tr
>
096.
<
td
align
=
"right"
>图片:</
td
>
097.
<
td
><
input
type
=
"text"
id
=
"tp"
style
=
"width:120px"
/></
td
>
098.
<
td
><
div
id
=
"tpTip"
style
=
"width:300px"
></
div
></
td
>
099.
</
tr
>
100.
<
tr
>
101.
<
td
align
=
"right"
>压缩文件:</
td
>
102.
<
td
><
input
type
=
"text"
id
=
"rar"
style
=
"width:120px"
/></
td
>
103.
<
td
><
div
id
=
"rarTip"
style
=
"width:300px"
></
div
></
td
>
104.
</
tr
>
105.
<
tr
>
106.
<
td
align
=
"right"
>ip4:</
td
>
107.
<
td
><
input
type
=
"text"
id
=
"ip4"
style
=
"width:120px"
/></
td
>
108.
<
td
><
div
id
=
"ip4Tip"
style
=
"width:300px"
></
div
></
td
>
109.
</
tr
>
110.
<
tr
>
111.
<
td
align
=
"right"
>QQ号码:</
td
>
112.
<
td
><
input
type
=
"text"
id
=
"<a href="
http://www.it165.net/qq/"
target
=
"_blank"
class
=
"keylink"
>qq</
a
>" style="width:120px" /></
td
>
113.
<
td
><
div
id
=
"<a href="
http://www.it165.net/qq/"
target
=
"_blank"
class
=
"keylink"
>qq</
a
>Tip" style="width:300px"></
div
></
td
>
114.
</
tr
>
115.
<
tr
>
116.
<
td
align
=
"right"
>国内电话:</
td
>
117.
<
td
><
input
type
=
"text"
id
=
"dh"
style
=
"width:120px"
/></
td
>
118.
<
td
><
div
id
=
"dhTip"
style
=
"width:300px"
></
div
></
td
>
119.
</
tr
>
120.
<
tr
>
121.
<
td
align
=
"right"
>用户名:</
td
>
122.
<
td
><
input
type
=
"text"
id
=
"yhm"
style
=
"width:120px"
/></
td
>
123.
<
td
><
div
id
=
"yhmTip"
style
=
"width:300px"
></
div
></
td
>
124.
</
tr
>
125.
<
tr
>
126.
<
td
align
=
"right"
>字母:</
td
>
127.
<
td
><
input
type
=
"text"
id
=
"zm"
style
=
"width:120px"
/></
td
>
128.
<
td
><
div
id
=
"zmTip"
style
=
"width:300px"
></
div
></
td
>
129.
</
tr
>
130.
<
tr
>
131.
<
td
align
=
"right"
>大写字母:</
td
>
132.
<
td
><
input
type
=
"text"
id
=
"dxzm"
style
=
"width:120px"
/></
td
>
133.
<
td
><
div
id
=
"dxzmTip"
style
=
"width:300px"
></
div
></
td
>
134.
</
tr
>
135.
<
tr
>
136.
<
td
align
=
"right"
>小写字母:</
td
>
137.
<
td
><
input
type
=
"text"
id
=
"xxzm"
style
=
"width:120px"
/></
td
>
138.
<
td
><
div
id
=
"xxzmTip"
style
=
"width:300px"
></
div
></
td
>
139.
</
tr
>
140.
<
tr
>
141.
<
td
align
=
"right"
>身份证:</
td
>
142.
<
td
><
input
type
=
"text"
id
=
"sfz"
style
=
"width:120px"
/></
td
>
143.
<
td
><
div
id
=
"sfzTip"
style
=
"width:300px"
></
div
></
td
>
144.
</
tr
>
145.
</
table
>
4.<script>中的代码
01.
<script type=
"text/javascript"
>
02.
$(document).ready(
function
() {
03.
$.formValidator.initConfig({ formID:
"form1"
, onError:
function
() { alert(
"校验没有通过,具体错误请看错误提示"
) } });
04.
$(
"#sfz"
).formValidator({ onShow:
"请输入15或18位的身份证"
, onfocus:
"输入15或18位的身份证"
, onCorrect:
"输入正确"
}).regexValidator({ regExp:
"idcard"
, dataType:
"enum"
, onError:
"你输入的身份证格式不正确"
}); ;
05.
$(
"#sfz1"
).formValidator({ onShow:
"请输入15或18位的身份证"
, onfocus:
"输入15或18位的身份证"
, onCorrect:
"输入正确"
}).functionValidator({ fun: isCardID });
06.
$(
"#zs"
).formValidator({ onShow:
"请输入整数"
, onCorrect:
"谢谢你的合作,你的整数正确"
}).regexValidator({ regExp:
"intege"
, dataType:
"enum"
, onError:
"整数格式不正确"
});
07.
$(
"#zzs"
).formValidator({ onShow:
"请输入正整数"
, onCorrect:
"谢谢你的合作,你的正整数正确"
}).regexValidator({ regExp:
"intege1"
, dataType:
"enum"
, onError:
"正整数格式不正确"
});
08.
$(
"#fzs"
).formValidator({ onShow:
"请输入负整数"
, onCorrect:
"谢谢你的合作,你的负整数正确"
}).regexValidator({ regExp:
"intege2"
, dataType:
"enum"
, onError:
"负整数格式不正确"
});
09.
$(
"#sz"
).formValidator({ onShow:
"请输入数字"
, onCorrect:
"谢谢你的合作,你的数字正确"
}).regexValidator({ regExp:
"num"
, dataType:
"enum"
, onError:
"数字格式不正确"
});
10.
$(
"#zs1"
).formValidator({ onShow:
"请输入正数"
, onCorrect:
"谢谢你的合作,你的正数正确"
}).regexValidator({ regExp:
"num1"
, dataType:
"enum"
, onError:
"正数格式不正确"
});
11.
$(
"#fs"
).formValidator({ onShow:
"请输入负数"
, onCorrect:
"谢谢你的合作,你的负数正确"
}).regexValidator({ regExp:
"num2"
, dataType:
"enum"
, onError:
"负数格式不正确"
});
12.
$(
"#sj"
).formValidator({ onShow:
"请输入你的手机号码"
, onfocus:
"必须是13或15打头哦"
, onCorrect:
"谢谢你的合作,你的手机号码正确"
}).regexValidator({ regExp:
"mobile"
, dataType:
"enum"
, onError:
"手机号码格式不正确"
});
13.
//$("#").formValidator({onShow:"",onfocus:"请输入",onCorrect:"谢谢你的合作,你的正确"}).regexValidator({regExp:"",dataType:"enum",onError:"格式不正确"});
14.
$(
"#email"
).formValidator({ onShow:
"请输入你的email"
, onfocus:
"请注意你输入的email格式,例如:[email protected]"
, onCorrect:
"谢谢你的合作,你的email正确"
}).regexValidator({ regExp:
"email"
, dataType:
"enum"
, onError:
"email格式不正确"
});
15.
$(
"#fds"
).formValidator({ onShow:
"请输入浮点数"
, onCorrect:
"谢谢你的合作,你的浮点数正确"
}).regexValidator({ regExp:
"decmal"
, dataType:
"enum"
, onError:
"浮点数格式不正确"
});
16.
$(
"#zfds"
).formValidator({ onShow:
"请输入正浮点数"
, onCorrect:
"谢谢你的合作,你的正浮点数正确"
}).regexValidator({ regExp:
"decmal1"
, dataType:
"enum"
, onError:
"正浮点数格式不正确"
});
17.
$(
"#ffds"
).formValidator({ onShow:
"请输入负浮点数"
, onCorrect:
"谢谢你的合作,你的负浮点数正确"
}).regexValidator({ regExp:
"decmal2"
, dataType:
"enum"
, onError:
"负浮点数格式不正确"
});
18.
$(
"#fffds"
).formValidator({ onShow:
"请输入非负浮点数"
, onCorrect:
"谢谢你的合作,你的非负浮点数正确"
}).regexValidator({ regExp:
"decmal4"
, dataType:
"enum"
, onError:
"非负浮点数格式不正确"
});
19.
$(
"#fzfds"
).formValidator({ onShow:
"请输入非正浮点数"
, onCorrect:
"谢谢你的合作,你的非正浮点数正确"
}).regexValidator({ regExp:
"decmal5"
, dataType:
"enum"
, onError:
"非正浮点数格式不正确"
});
20.
$(
"#ys"
).formValidator({ onShow:
"请输入16进制颜色"
, onCorrect:
"谢谢你的合作,你的16进制颜色正确"
}).regexValidator({ regExp:
"color"
, dataType:
"enum"
, onError:
"16进制颜色格式不正确"
});
21.
$(
"#yb"
).formValidator({ onShow:
"请输入邮编"
, onfocus:
"6位数字组成的哦"
, onCorrect:
"谢谢你的合作,你的邮编正确"
}).regexValidator({ regExp:
"zipcode"
, dataType:
"enum"
, onError:
"邮编格式不正确"
});
22.
$(
"#ip4"
).formValidator({ onShow:
"请输入ip4"
, onfocus:
"例如:172.16.201.18"
, onCorrect:
"谢谢你的合作,你的ip4正确"
}).regexValidator({ regExp:
"ip4"
, dataType:
"enum"
, onError:
"ip4格式不正确"
});
23.
$(
"#fk"
).formValidator({ onShow:
"请输入非空字符"
, onCorrect:
"谢谢你的合作,你的非空字符正确"
}).regexValidator({ regExp:
"notempty"
, dataType:
"enum"
, onError:
"非空字符格式不正确"
});
24.
$(
"#tp"
).formValidator({ onShow:
"请输入图片名"
, onCorrect:
"谢谢你的合作,你的图片名正确"
}).regexValidator({ regExp:
"picture"
, dataType:
"enum"
, onError:
"图片名格式不正确"
});
25.
$(
"#rar"
).formValidator({ onShow:
"请输入压缩文件名"
, onCorrect:
"谢谢你的合作,你的压缩文件名正确"
}).regexValidator({ regExp:
"rar"
, dataType:
"enum"
, onError:
"压缩文件名格式不正确"
});
26.
$(
"#qq"
).formValidator({ onShow:
"请输入QQ号码"
, onCorrect:
"谢谢你的合作,你的QQ号码正确"
}).regexValidator({ regExp:
"qq"
, dataType:
"enum"
, onError:
"QQ号码格式不正确"
});
27.
$(
"#dh"
).formValidator({ onShow:
"请输入国内电话"
, onfocus:
"例如:0577-88888888或省略区号88888888"
, onCorrect:
"谢谢你的合作,你的国内电话正确"
}).regexValidator({ regExp:
"tel"
, dataType:
"enum"
, onError:
"国内电话格式不正确"
});
28.
$(
"#yhm"
).formValidator({ onShow:
"请输入用户名"
, onCorrect:
"谢谢你的合作,你的用户名正确"
}).regexValidator({ regExp:
"username"
, dataType:
"enum"
, onError:
"用户名格式不正确"
});
29.
$(
"#zm"
).formValidator({ onShow:
"请输入字母"
, onCorrect:
"谢谢你的合作,你的字母正确"
}).regexValidator({ regExp:
"letter"
, dataType:
"enum"
, onError:
"字母格式不正确"
});
30.
$(
"#dxzm"
).formValidator({ onShow:
"请输入大写字母"
, onCorrect:
"谢谢你的合作,你的大写字母正确"
}).regexValidator({ regExp:
"letter_u"
, dataType:
"enum"
, onError:
"大写字母格式不正确"
});
31.
$(
"#xxzm"
).formValidator({ onShow:
"请输入小写字母"
, onCorrect:
"谢谢你的合作,你的小写字母正确"
}).regexValidator({ regExp:
"letter_l"
, dataType:
"enum"
, onError:
"小写字母格式不正确"
});
32.
$(
"#sfz"
).formValidator({ onShow:
"请输入身份证"
, onCorrect:
"谢谢你的合作,你的身份证正确"
}).regexValidator({ regExp:
"idcard"
, dataType:
"enum"
, onError:
"身份证格式不正确"
});
33.
});
34.
</script>
5.效果图:
formValidator: | 用来做初始化的类型,必须先执行。("√"为showalert可用参数) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
inputValidator: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
compareValidator: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
regexValidator: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ajaxValidator: | 几乎所有的属性跟$.ajax()的属性一样,请参考$.ajax()函数的帮助 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
functionValidator | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
公共函数: | 主要是设置全局参数和判断是否通过校验 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
formValidator: | 用来做初始化的类型,必须先执行。("√"为showalert可用参数) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
inputValidator: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
compareValidator: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
regexValidator: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ajaxValidator: | 几乎所有的属性跟$.ajax()的属性一样,请参考$.ajax()函数的帮助 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
functionValidator | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
公共函数: | 主要是设置全局参数和判断是否通过校验 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
formValidator: | 用来做初始化的类型,必须先执行。("√"为showalert可用参数) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
inputValidator: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
compareValidator: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
regexValidator: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ajaxValidator: | 几乎所有的属性跟$.ajax()的属性一样,请参考$.ajax()函数的帮助 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
functionValidator | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
公共函数: | 主要是设置全局参数和判断是否通过校验 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
6.添加修改说明:
01.
$.formValidator.reloadAutoTip();
//重新加载表单验证样式
02.
if
(!$.formValidator.pageIsValid(
‘1‘
))
return
false
;
//如果不通过则不提交
03.
代码如下:
04.
$(document).ready(
function
() {
05.
$.formValidator.initConfig({ formID:
"form1"
, onError:
function
() { alert(
"校验没有通过,具体错误请看错误提示"
) } });
06.
$(
"#name"
).formValidator({ onShow:
"请输入姓名!"
, onFocus:
"输入一个到十个字符"
, onCorrect:
"输入正确,谢谢您的合作!"
}).inputValidator({ min: 1, max: 20, onError:
"输入长度,不对!"
});
07.
$(
"#timelong"
).formValidator({ onShow:
"请输入路演时长!"
, onFocus:
"输入格式为正整数!"
, onCorrect:
"输入正确,谢谢您的合作!"
}).regexValidator({ regExp:
"intege1"
,dataType:
"enum"
, onError:
"您输入的时长格式不正确!"
});
08.
$(
"#address"
).formValidator({ onShow:
"请输入路演平台名称!"
, onFocus:
"输入一个到五十个字符"
, onCorrect:
"输入正确,谢谢您的合作!"
}).inputValidator({ min: 1, max: 50, onError:
"输入长度,不对!"
});
09.
$(
"#urladdress"
).formValidator({ onShow:
"请输入路演链接地址!"
, onFocus:
"输入格式:http://www.baidu.com"
, onCorrect:
"输入正确,谢谢您的合作!"
}).regexValidator({ regExp:
"^(http|https|ftp)\://([a-zA-Z0-9\.\-]+(\:[a-zA-Z0-9\.&%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|localhost|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\‘\\\+&%\$#\=~_\-]+))*$"
, onError:
"输入格式不正确!"
});
10.
$(
"#time"
).formValidator({ onCorrect:
"格式正确"
}).functionValidator({fun:isDateTime, onError:
"输入格式,不对!"
});
11.
$(
"#txtcontent"
).formValidator({ onShow:
"请输入专家简介!"
, onFocus:
"输入一个到一百个字符"
, onCorrect:
"输入正确,谢谢您的合作!"
}).inputValidator({ min: 1, max: 100, onError:
"输入长度,不对!"
});
12.
});
以上是关于(转)强大的JQuery表单验证插件 FormValidator使用介绍的主要内容,如果未能解决你的问题,请参考以下文章
jQuery Validate为表单提供了强大的验证功能,让客户端表单验证变得更简单