1.首先在项目中添加必备js与css
2.代码中添加引用（必备引用）
<script src="https://www.jb51.net/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库--> <script src="https://www.jb51.net/formValidator1/formValidator-4.0.1.min.js" type="text/javascript"></script> <!--表单验证必须库--> <script src="https://www.jb51.net/formValidator1/formValidatorRegex.js" type="text/javascript"></script> <!--表单验证扩展库--> <link href="https://www.jb51.net/formValidator1/style/validator.css" type="text/css" /><!--表单验证样式表-->
3.<body>中要验证的标签（做一些常用的演示）
<table> <tr> <td colpan="3"><input type="submit" value="提交" /></td> </tr> <tr> <td>身份证(正则表达式库):</td> <td><input type="text" /></td> <td><div></div></td> <!--必须注意这里提示验证信息中的div的id值，跟要验证控件中的id值多了一个Tip，下面的都是这样。必须多的是Tip，也必须要多。--> </tr> <tr> <td>身份证(外部函数):</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>整数:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>正整数:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>负整数:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>数字:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>正数（正整数 + 0）:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>负数（负整数 + 0）:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>浮点数:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>正浮点数:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>负浮点数:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>非负浮点数（正浮点数 + 0）:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>非正浮点数（负浮点数 + 0）:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>颜色:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>你的EMAIL:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>手机:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>邮编:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>非空:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>图片:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>压缩文件:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>ip4:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>QQ号码:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>国内电话:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>用户名:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>字母:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>大写字母:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>小写字母:</td> <td><input type="text" /></td> <td><div></div></td> </tr> <tr> <td>身份证:</td> <td><input type="text" /></td> <td><div></div></td> </tr> </table>
4.<script>中的代码