iT邦幫忙

1

前端套件 validate.js 為你的表單做驗證

  • 分享至 

  • xImage
  •  

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

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

參考資料



圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言