jQuery插件Validate验证表单实现javascript表单验证功能

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

validate_right

验证成功的效果
使用说明
一，需要使用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验证和密码验证等，但对于大部分验证来说，以上几个表单验证基本上能满足需求。