最近會把一些公司常用的套件做一些整理
下次在使用時可以避免在文檔裡迷路
使用jQuery進行表單驗證
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/additional-methods.min.js"></script>
在submit表單前,針對form表單內有設定name屬性的控制項,進行驗證,若沒有達成條件,則會在該控制項下方append一個label.error顯示錯誤原因,可以將label.error設成紅色字體,讓錯誤訊息更加顯眼。
<form id="myForm" method="post">
<label>姓名:</label>
<input type="text" name="NAME" />
<br />
<label>年齡:</label>
<input type="text" name="AGE" />
<br />
<button type="submit">註冊</button>
</form>
var validate = $("#myForm").validate({
rules: {
NAME: {
required: true
},
AGE: {
required: true,
number: true,
max: 100,
min: 1
},
}
});
這時候送出表單,會出現簡單的錯誤訊息,告知你此欄位是必填等。
此套件可以輸出客製化的錯誤提示,或是累積出錯的項目數。
var validate = $("#myForm").validate({
rules: {
NAME: {
required: true
},
AGE: {
required: true,
number: true,
max: 3,
min: 1
},
},
//錯誤提示
messages: {
NAME: "請填寫姓名",
AGE: {
required: "請提供年齡",
number: "請輸入有效的數值",
max: "最大不能超過99歲",
min: "至少1歲"
}
},
//出錯的項目數
invalidHandler: function () {
alert("尚有 " + validate.numberOfInvalids() + " 項目未填");
}
});
參考資料