最近會把一些公司常用的套件做一些整理
下次在使用時可以避免在文檔裡迷路

Validation Plugin

使用jQuery進行表單驗證

CDN

<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>

github

載點-有提供語言包

作法

在submit表單前，針對form表單內有設定name屬性的控制項，進行驗證，若沒有達成條件，則會在該控制項下方append一個label.error顯示錯誤原因，可以將label.error設成紅色字體，讓錯誤訊息更加顯眼。

form

        <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>

js

        var validate = $("#myForm").validate({
            rules: {
                NAME: {
                    required: true
                },
                AGE: {
                    required: true,
                    number: true,
                    max: 100,
                    min: 1
                },              
            }        
        });

這時候送出表單，會出現簡單的錯誤訊息，告知你此欄位是必填等。

js

此套件可以輸出客製化的錯誤提示，或是累積出錯的項目數。

        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() + " 項目未填");
            }            
        });

參考資料

• validate.js官網
• jQuery Validation Plugin表單驗證使用介紹