张龙豪 通过本文主要向大家介绍了Jquery表单验证,Jquery表单验证插件,表单验证插件formValidator等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
使用步骤：
1.首先在项目中添加必备js与css
2.代码中添加引用（必备引用）
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库--> <script src="formValidator1/formValidator-4.0.1.min.js" type="text/javascript"></script> <!--表单验证必须库--> <script src="formValidator1/formValidatorRegex.js" type="text/javascript"></script> <!--表单验证扩展库--> <link href="formValidator1/style/validator.css" rel="stylesheet" type="text/css" /><!--表单验证样式表-->
3.<body>中要验证的标签（做一些常用的演示）
<table border="0px" style="font-size:12px"> <tr> <td colpan="3"><input type="submit" name="button" id="button" value="提交" /></td> </tr> <tr> <td align="right">身份证(正则表达式库):</td> <td><input name="sfz" type="text" id="sfz" /></td> <td><div id="sfzTip" style="width:300px"></div></td> <!--必须注意这里提示验证信息中的div的id值，跟要验证控件中的id值多了一个Tip，下面的都是这样。必须多的是Tip，也必须要多。--> </tr> <tr> <td align="right">身份证(外部函数):</td> <td><input type="text" id="sfz1" style="width:120px" /></td> <td><div id="sfz1Tip" style="width:300px"></div></td> </tr> <tr> <td align="right">整数:</td> <td><input type="text" id="zs" style="width:120px" /></td> <td><div id="zsTip" style="width:300px"></div></td> </tr> <tr> <td align="right">正整数:</td> <td><input type="text" id="zzs" style="width:120px" /></td> <td><div id="zzsTip" style="width:300px"></div></td> </tr> <tr> <td align="right">负整数:</td> <td><input type="text" id="fzs" style="width:120px" /></td> <td><div id="fzsTip" style="width:300px"></div></td> </tr> <tr> <td align="right">数字:</td> <td><input type="text" id="sz" style="width:120px" /></td> <td><div id="szTip" style="width:300px"></div></td> </tr> <tr> <td align="right">正数（正整数 + 0）:</td> <td><input type="text" id="zs1" style="width:120px" /></td> <td><div id="zs1Tip" style="width:300px"></div></td> </tr> <tr> <td align="right">负数（负整数 + 0）:</td> <td><input type="text" id="fs" style="width:120px" /></td> <td><div id="fsTip" style="width:300px"></div></td> </tr> <tr> <td align="right">浮点数:</td> <td><input type="text" id="fds" style="width:120px" /></td> <td><div id="fdsTip" style="width:300px"></div></td> </tr> <tr> <td align="right">正浮点数:</td> <td><input type="text" id="zfds" style="width:120px" /></td> <td><div id="zfdsTip" style="width:300px"></div></td> </tr> <tr> <td align="right">负浮点数:</td> <td><input type="text" id="ffds" style="width:120px" /></td> <td><div id="ffdsTip" style="width:300px"></div></td> </tr> <tr> <td align="right">非负浮点数（正浮点数 + 0）:</td> <td><input type="text" id="fffds" style="width:120px" /></td> <td><div id="fffdsTip" style="width:300px"></div></td> </tr> <tr> <td align="right">非正浮点数（负浮点数 + 0）:</td> <td><input type="text" id="fzfds" style="width:120px" /></td> <td><div id="fzfdsTip" style="width:300px"></div></td> </tr> <tr> <td align="right">颜色:</td> <td><input type="text" id="ys" style="width:120px" /></td> <td><div id="ysTip" style="width:300px"></div></td> </tr> <tr> <td align="right">你的EMAIL:</td> <td><input type="text" id="email" style="width:120px" /></td> <td><div id="emailTip" style="width:300px"></div></td> </tr> <tr> <td align="right">手机:</td> <td><input type="text" id="sj" style="width:120px" /></td> <td><div id="sjTip" style="width:300px"></div></td> </tr> <tr> <td align="right">邮编:</td> <td><input type="text" id="yb" style="width:120px" /></td> <td><div id="ybTip" style="width:300px"></div></td> </tr> <tr> <td align="right">非空:</td> <td><input type="text" id="fk" style="width:120px" /></td> <td><div id="fkTip" style="width:300px"></div></td> </tr> <tr> <td align="right">图片:</td> <td><input type="text" id="tp" style="width:120px" /></td> <td><div id="tpTip" style="width:300px"></div></td> </tr> <tr> <td align="right">压缩文件:</td> <td><input type="text" id="rar" style="width:120px" /></td> <td><div id="rarTip" style="width:300px"></div></td> </tr> <tr> <td align="right">ip4:</td> <td><input type="text" id="ip4" style="width:120px" /></td> <td><div id="ip4Tip" style="width:300px"></div></td> </tr> <tr> <td align="right">QQ号码:</td> <td><input type="text" id="qq" style="width:120px" /></td> <td><div id="qqTip" style="width:300px"></div></td> </tr> <tr> <td align="right">国内电话:</td> <td><input type="text" id="dh" style="width:120px" /></td> <td><div id="dhTip" style="width:300px"></div></td> </tr> <tr> <td align="right">用户名:</td> <td><input type="text" id="yhm" style="width:120px" /></td> <td><div id="yhmTip" style="width:300px"></div></td> </tr> <tr> <td align="right">字母:</td> <td><input type="text" id="zm" style="width:120px" /></td> <td><div id="zmTip" style="width:300px"></div></td> </tr> <tr> <td align="right">大写字母:</td> <td><input type="text" id="dxzm" style="width:120px" /></td> <td><div id="dxzmTip" style="width:300px"></div></td> </tr> <tr> <td align="right">小写字母:</td> <td><input type="text" id="xxzm" style="width:120px" /></td> <td><div id="xxzmTip" style="width:300px"></div></td> </tr> <tr> <td align="right">身份证:</td> <td><input type="text" id="sfz" style="width:120px" /></td> <td><div id="sfzTip" style="width:300px"></div></td> </tr>