必优博客

本博客所有文章均属原创作品，如有转载，请注明作者：biuuu，来源：http://www.biuuu.com/?p=694

程序开发中经常需要对表单进行验证，对表单进行验证有两种形式，一种是在客户端，另一种是在服务器端。一般来说，考虑到数据的安全性与合法性，这两种验证都需要，这里主要是讨论在客户端实现表单验证，采用javascript表单验证的方式，这里介绍一个jQuery插件Validate验证表单工具，可实现邮箱Email、字符chars、电话号码、文本区域textarea和复选框checkbox有效性验证，效果图如下：

验证失败的效果

验证成功的效果
使用说明
一，需要使用jQeury库和validate库
二，可自定义表单验证失败提示样式

使用实例
一，包含文件部分

1. <script type="text/javascript" src="jquery.js"></script>
2. <script type="text/javascript" src="jquery.validate.js"></script>

二，表单验证失败CSS样式部分

1. <style type="text/css">
2. .invalid{background-color:#FFCCCC}
3. </style>

三，javascript部分(javascript表单验证)

1. <script type="text/javascript">
2. $(document).ready(function(){
3. $('.validate').validate();
4. });
5. </script>

四，HTML部分

1. <div class="validate">
2. <div>必优博客 jQuery Validate表单验证测试</div>
3. 文本[必填]：<input type="text" id="user" class="required" /><br />
4. 邮箱：<input type="text" id="email" class="required email" /><br />
5. 复选框：<input type="checkbox" id="biuuu" class="required" /><br />
6. 电话号码：<input type="text" id="phone" class="required phone" /><br />
7. 文本[字符]：<input type="text" id="chars" class="required chars" /><br />
8. 文本区域[必填]：<textarea rows="1" cols="10" class="required"></textarea><br />
9. <button type="submit" name="bt" id="bt">测试</button><br />
10. </div>

jQuery插件Validate验证表单只需要在实现javascript验证的表单中增加类似class="required"，即可实现javascript表单验证功能。

邮箱Email，如上：class="required email"
字符chars，默认3-18个字符，如上：class="required chars"
电话号码，默认数字8-11位，如上：class="required phone"
文本区域textarea，如上：class="required"

目前jQuery插件Validate只支持以上几种验证，在下一版本中将增加ajax验证和密码验证等，但对于大部分验证来说，以上几个表单验证基本上能满足需求。

相关文章：jQuery插件Validation验证表单实现javascript表单智能验证功能