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>中的代码
复制代码 代码如下: