文章參考自：鏈接
1. 導(dǎo)入 js 庫(kù)：
<!-- jquery庫(kù) -->
<script src="../js/jquery.js"></script>
<!-- jQuery表單驗(yàn)證插件 -->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<!-- 表單驗(yàn)證漢化插件 -->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
2. 使用方式：
-
將校驗(yàn)規(guī)則寫(xiě)到控件中
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function() {
$("#commentForm").validate();
});
</script>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>輸入您的名字进鸠，郵箱响谓，URL，備注访诱。</legend>
<p>
<label for="cname">Name (必需, 最小兩個(gè)字母)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (必需)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (可選)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">備注 (必需)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
-
將校驗(yàn)規(guī)則寫(xiě)到 js 代碼中
$().ready(function() {
// 在鍵盤(pán)按下并釋放及提交后驗(yàn)證提交表單
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "請(qǐng)輸入您的名字",
lastname: "請(qǐng)輸入您的姓氏",
username: {
required: "請(qǐng)輸入用戶名",
minlength: "用戶名必需由兩個(gè)字母組成"
},
password: {
required: "請(qǐng)輸入密碼",
minlength: "密碼長(zhǎng)度不能小于 5 個(gè)字母"
},
confirm_password: {
required: "請(qǐng)輸入密碼",
minlength: "密碼長(zhǎng)度不能小于 5 個(gè)字母",
equalTo: "兩次密碼輸入不一致"
},
email: "請(qǐng)輸入一個(gè)正確的郵箱",
agree: "請(qǐng)接受我們的聲明",
topic: "請(qǐng)選擇兩個(gè)主題"
}
});
