jquery.validate 表單驗證

外掛：jquery.validate + jquery

背景：我們在使用表單的時候，通常會在提交之前，或者輸入框失去焦點的時候，對錶單進行驗證，實現下圖的效果：

下面介紹一下通過第三方 jquery.validate 這個外掛進行表單提交前驗證並給出警告提示⚠️

1.引入依賴

  <script src="/webjars/jquery/3.2.1/jquery.min.js"></script>
  <script src="/webjars/jquery-validation/1.17.0/jquery.validate.min.js"></script>複製程式碼

2.HTML

<form id="form1" method="post" action="......">
 <input type="text"  name="name"/>
 <button type="submit">提交</button>
</form>複製程式碼

3.JS

這個外掛庫預設了一些規則，非空，長度...等等，如果想自定義規則就執行這句話：

jQuery.validator.addMethod("not_number_start", function(value, element) {
            return !(/^\d/.test(value.charAt(0))) // return false 的條件 才會觸發警告提示
        }, "不能以數字開頭，請修改");

        jQuery.validator.addMethod("not_include_space", function(value, element) {
            return value.indexOf(' ') === -1
        }, "不能含有空格，請修改");複製程式碼

                $().ready(function() {

                    $("#form1").validate({                        rules: {
                            name: {
                                required: true,
                                not_number_start: true,
                                not_include_space: true
                            }
                        },
                        messages: {
                            name: {
                                required: "請輸入 track group 名稱"   // 自定義提示語
                            }
                        },
                        submitHandler: function() { // 如果通過驗證條件會執行這裡
                          document.getElementById('form1').submit()                        }
                    });
                });複製程式碼

ok～小夥伴們可以測試一下！

jquery.validate 表單驗證

相關文章