深入理解Jquery表单验证(使用formValidator)

本篇文章使用插件:formValidator ,具体如下:

使用步骤:

1.首先在项目中添加必备js与css

深入理解Jquery表单验证(使用formValidator)

 

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>中的代码

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwjggy.html