(转)强大的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格式,例如:wzmaodong@126.com"
, 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.
});
转载于:https://www.cnblogs.com/wanshutao/p/4155834.html
(转)强大的JQuery表单验证插件 FormValidator使用介绍相关推荐
- 强大的JQuery表单验证插件 FormValidator使用介绍
jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...
- jQuery 表单验证插件,jQuery Validation Engine用法详解
jQuery 表单验证插件,jQuery Validation Engine用法详解 功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身 ...
- 12个方便易用的jquery表单验证插件
绝大部分网站都是开放注册的,而注册就需要使用表单验证,因为网站都需要对注册用户的信息安全性和合理性做出判断,表单的注册都应该具备完善的验证方式,比如注册使用的手机号是否是真实的?用户填写的验证码是否正 ...
- jQuery 表单验证插件jQuery Validation Engine用法详解
功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则. jQuery Validation ...
- 轻量级的jQuery表单验证插件 - HAPPY.js
为什么80%的码农都做不了架构师?>>> 日期:2012-9-14 来源:GBin1.com 在线演示 本地下载 功能强大的表单验证插件很多,以前我们介绍过validati ...
- 一款比较实用齐全的jQuery 表单验证插件
一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网 ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
- 10个强大的Javascript表单验证插件推荐
创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...
- html中表单的校验的插件,jquery表单验证插件validationEngine
插件的特色: 封装强悍.例子充足(基本都验证类型都被囊括).调用轻便 注意事项: 1.演示版本为 v2.2.4: 2.v2.0 以下的版本参数并不完全通用: 对 validationEngine.jq ...
最新文章
- YOLO算法史上最全综述:从YOLOv1到YOLOv5
- spring 两次进入拦截器_Spring Boot+Redis 扛住,瞬间千次重复提交(实例)
- 【杂谈】白身,初识,不惑,有识,不可知,你处于深度学习工程师哪一重境界了...
- jquery ajax的post、get方式
- linux系统服务设置命令--chkconfig命令参数及用法详解
- Erlang注册进程名称-tut16.erl
- 简述linux系统的安全性,Linux操作系统的安全性有哪些过人之处
- 技术动态 | 67 亿美金搞个图,创建知识图谱的成本有多高你知道吗?
- c语言程序设计中三子棋游戏,C语言实现简易版三子棋游戏
- python怎么发送邮件_Python面试题之如何用Python来发送邮件?
- Windows 11彻底禁用IE浏览器后,银行网银系统完全解决方案!
- 云计算在我们日常生活中,主要有哪些应用
- ubuntu 安装dep文件
- Java小题精炼训练营(篇十三)
- ReactNative 刘海屏适配iPhoneX
- 16、Mediator 仲裁者模式
- mac上传文件到阿里云ECS及scp命令使用
- graphql_GraphQL简介
- 上位机(地面站)之地图航线创建的摸索总结
- Unity中通过场景切换但音乐继续播放
热门文章
- 阳光系统下载 移动硬盘打开很慢怎么办
- 智能家居创意DIY之智能通断器
- Search Guard 1.3 测试配置
- 三代honeypot连外网
- 【XSY2912】reo(构造)
- Sphinx-for-chines中文分词安装配置及API调用
- python(按地名)批量获取经纬度坐标
- 抖音计算机表白文档,抖音上的表白代码是什么 抖音表白代码自动生成方法
- Linux read only 檔案,動手玩Windows 10 Docker(4) - 有關Docker的儲存空間和檔案系統
- 系统检测到您正在使用网页抓取工具访问_SEO优化:搜索引擎蜘蛛抓取异常,原来是这个原因!...