jQuery plugin: Validation 表單驗證

From: Polin Wei

表單驗證往往是網站開發者常所需要撰寫的功能之一， jQuery 的 plugin:validation是一個不錯的工具，撰寫的程式很少，功能卻能符合所需。 首先，先準備一般 HTML 的表單

<form id="userform" name="userform" method="post" class="validateform">
<table width="600" border="0" cellspacing="3" cellpadding="1" class="table">
 <tr>
  <th>欄位名稱</th>
  <th>內容</th>
 </tr>
 <tr>
  <td>姓名 *</td>
  <td><input type="text" name="username" id="username"  required/></td>
 </tr>
 <tr>
  <td>信箱 *</td>
  <td><input type="text" name="useremail" id="useremail" size="35" value="" class="required email"/></td>
 </tr>
 <tr>
  <td height="50">&nbsp;</td>
  <td>
   <input class="submit" type="submit" value="Submit"/>
  </td>
 </tr>
</table>

然後再啟動驗證即可

<script type="text/javascript">   
$().ready(function() {
 //設定驗證
 $("#userform").validate();
});
</script>

但有時為了作一些處理，在 Form 裡我們並沒有<input class="submit" type="submit" value="Submit"/>，如：

<form id="userform" name="userform" method="post" class="validateform">
<table width="600" border="0" cellspacing="3" cellpadding="1" class="table">
 <tr>
  <th>欄位名稱</th>
  <th>內容</th>
 </tr>
 <tr>
  <td>姓名 *</td>
  <td><input type="text" name="username" id="username"  required/></td>
 </tr>
 <tr>
  <td>信箱 *</td>
  <td><input type="text" name="useremail" id="useremail" size="35" value="" class="required email"/></td>
 </tr>
 <tr>
  <td height="50">&nbsp;</td>
  <td>
   <a id="fsubmit" name="fsubmit" class="sexybutton"><span><span><span class="save">儲存</span></span></span></a> 
   <a id="freset"  name="freset"  class="sexybutton"><span><span><span class="reload">重設</span></span></span></a>
  </td>
 </tr>
</table>

這時 jQuery 要改成

<script type="text/javascript">   
$().ready(function() {
 設定驗證
 var frmValidate=$('#userform').validate({
  rules:{
   username: {
    required: true,
    maxlength: 10
   }
  },
  messages:{
   username: {
    required: "請輸入您的中文姓名"
   }
  }
 });
 
 $('#fsubmit').click(function() {
    var chkResult=frmValidate.form();
 });
});
</script>

這樣才能成功

 

進階閱讀： MIS Workplace 資訊空間