【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>