【JS常用插件】表单验证插件jquery.validate.js

• 我自己修改后的一个jquery.validate.js表单验证插件，这个比较简单，大家改起来也方便。复杂的功能演示我都去掉了，当然如果想了解全面jquery.validate.js的强大功能，我也提供了jquery-validation-1.9.0.zip的最新版本，欢迎学习交流。
  
  以下介绍jquery.validate.js的使用方法
  
  //导入jquery库
  <script src="http://www.zhiliren.net/js/jquery.js" type="text/javascript"></script>
  //导入jquery.validate.js表单验证插件
  <script src="../jquery.validate.js" type="text/javascript"></script>
  //导入支持中文语言的插件，jquery.validate.js插件提供了很多国家的语言
  <script src="../messages_cn.js" type="text/javascript"></script>
  
  //绑定需要验证的表单
  <script type="text/javascript">
  $(document).ready(function() {
  $("#commentForm").validate();
  });
  </script>
  
  //以下HTML代码的样式
  <style type="text/css">
  #commentForm {width:800px; margin:auto; padding:30px;}
  #commentForm label {width: 200px; display:inline-block; text-align:right;}
  //这个就是那个错误消息的显示位置
  #commentForm label.error{margin-left: 10px;width: auto;display: inline;}
  #commentForm input.submit{margin-left:200px;}
  .red{color:#F00}
  </style>
  
  //HTML代码
  //重点是在表单控件的class上，以下介绍这几种不同的验证形式
  required: "必选字段",
  remote: "请修正该字段",
  email: "请输入正确格式的电子邮件",
  url: "请输入合法的网址",
  date: "请输入合法的日期",
  dateISO: "请输入合法的日期 (ISO).",
  number: "请输入合法的数字",
  digits: "只能输入整数",
  creditcard: "请输入合法的信用卡号",
  equalTo: "请再次输入相同的值",
  accept: "请输入拥有合法后缀名的字符串",
  maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),
  minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),
  rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
  range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
  max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
  min: jQuery.validator.format("请输入一个最小为 {0} 的值")
  ​
  <form id="commentForm" method="post" action="">
  <fieldset>
  <legend>表单验证</legend>
  <p>
  <label for="cname"><span class="red">*</span>用户名：</label>
  <input id="cname" name="name" class="required" minlength="2" />
  </p>
  <p>
  <label for="cemail"><span class="red">*</span>邮箱：</label>
  <input id="cemail" name="email" class="required email" />
  </p>
  <p>
  <label for="curl">网址：</label>
  <input id="curl" name="url" class="url" value="" />
  </p>
  <p>
  <label for="ccomment"><span class="red">*</span>内容：</label>
  <textarea id="ccomment" name="comment" class="required"></textarea>
  </p>
  <p>
  <input class="submit" type="submit" value="提交"/>
  </p>
  </fieldset>
  </form>