表單驗證往往是網站開發者常所需要撰寫的功能之一, 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"> </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"> </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 資訊空間