jQuery Validation — jquery.validate.js

jQuery Validation 插件為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定制選項，滿足應用程序各種需求。功能如下：

  • 自帶多種規則，譬如 email url number 等
  • 自定義 錯誤提示 標籤
  • 自定義 錯誤提示 內容
  • 自定義 驗證函數

加載&安裝

<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>

列子：

 $(function (){
    $.validator.methods.length4 = function(value, element, param) {
        return value.length == param;
    };
    $("#contactForm").validate({
        // errorClass: "check",
        errorElement: "span",
        errorPlacement: function(error, element) {
            error.appendTo(element.parent());
        },
        submitHandler: function(form) {
            jQuery(form).ajaxSubmit({
                dataType:'json',
                success: sendSuccess
            });
        }
    });
});
  • length4 是自定義 判斷長度的規則。
  • errorElement 定義錯誤信息的標籤。
  • errorClass 定義錯誤內容的 css 樣式
  • errorPlacement 定義錯誤信息出現在哪裡。

以上設定會在指定的地方出現：

<span id="lastName-error" class="error">Required</span>

submitHandler 自定義了當 驗證都通過後需要執行的內容。