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