發佈日期：
分類：
如何使用jQuery及jQuery.validate‧檢查表格(form)內容是否正確
只要一涉及到表格(form)，就近乎要檢查內容是否正確。以前的方法，總是用JavaScript一項項去檢查，既浪費時間，效率亦低。來到jQuery，只要配合jQuery.validate使用，只要幾行，便可解決問題。
01. 除了要載入jquery-1.6.1.min.js”檔案外，還需要載入jquery.validate.min.js檔案。建立表格(form)，只需要留意設定class為required、required email、url，便會根據您的輸入，顯示相對的回應。(測試效果)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
label {
width: 120px;
float: left;
}
label.error {
float: none;
color: red;
padding-left: 5px;
vertical-align: top;
font-size: 75%;
}
p {
clear: both;
}
em {
font-weight: bold;
float: left;
width: 15px;
padding: 5px 0 0 0;
vertical-align: top;
}
fieldset {
width: 550px;
}
</style>
<script src="jquery-1.6.1.min.js"></script>
<script src="jquery.validate.min.js"></script>
</head>
<body>
<form id="comment" method="post" action="">
<p>Form submit:</p>
<fieldset>
<p>
<label for="cname">Your name:</label>
<em>*</em><input id="cname" name="name" size="25" class="required" minlength="5" />
</p>
<p>
<label for="cemail">Your email:</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" minlength="7"/>
</p>
<p>
<label for="curl">URL:</label>
<em></em><input id="curl" name="url" size="25" class="url" value="" />
</p>
<p>
<label for="ccomment">Your comment:</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
<script>
$(document).ready(function(){
$("#comment").validate();
});
</script>
</body>
</html>
註：jQuery版本為1.6.1，jQuery.validate版本為1.8.1。
發佈留言