jquery-validation的使用

時隔多年再開始寫前端程式碼，遇到的問題都有點弱，記錄一下。

官網：https://jqueryvalidation.org/

我只引入了兩個js，因為我們的系統只需要英文環境。如果需要做國際化或者切換其他語言環境，需要引入localization下的js。

<script src="../../plugin/jquery-validation-1.17.0/jquery.validate.min.js"></script>
<script src="../../plugin/jquery-validation-1.17.0/additional-methods.min.js"></script>

當然jquery是必須引入的：

<script src="../../plugin/jquery-3.3.1.min.js"></script>

這裡特別說明一下：

jquery-validation是對錶單form的驗證，所以必須使用form標籤，其他div之類的標籤是不起作用的，會報錯：

jquery.validate.min.js:4 Uncaught TypeError: Cannot read property 'jQuery3310068674721021678262' of null

頁面元素必須新增name屬性，驗證是根據name來查詢元素的：

<form id="testForm">
<div>
   <span>E-mail<sup></sup></span>
   <input v-model="emailAddr" name="emailAddr">
</div>
<div>
   <span>Repeat E-mail<sup></sup></span>
   <input id="repeatMail" name="repeatMail">
</div>
</form>

初始化頁面時載入驗證方法：
$(function(){
    $( "#testForm").validate({
        rules: {
            emailAddr: {
                required: true,   // 必填項
                email: true       // 輸入為email格式
            },
            repeatMail: {
                required: true,
                email: true,
                equalTo: '#emailAddr'  // 輸入和emailAddr必須一致
            }，
            curNationality: {
                required: true,
                isOther: true    // 自定義方法
            }
        },
        messages: {                   // 驗證失敗的提示資訊
            emailAddr: {
                email: "Email format error."
            },
            repeatMail: {
                email: "Email format error.",
                equalTo: "The two E-mails do not match.",
            }
        },
        errorElement: "em",                  // 驗證失敗時在元素後增加em標籤，用來放錯誤提示
        errorPlacement: function (error, element) {   // 驗證失敗呼叫的函式
            error.addClass( "error_tip" );   // 提示資訊增加樣式

            if ( element.prop( "type" ) === "checkbox" ) {
                error.insertAfter(element.parent("label"));  // 待驗證的元素如果是checkbox，錯誤提示放到label中
            } else {
                error.insertAfter(element);
            }
        },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass("has-error");     // 驗證失敗時給元素增加樣式
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass("has-error");  // 驗證成功時去掉元素的樣式
        }
    });
});

提交表單時增加驗證方法：

var flag = $('#testForm').valid();
if(!flag) {
    return;
}

自定義驗證方法：必須返回this.optional(element)和其他判斷條件

jQuery.validator.addMethod(自定義方法名，方法{}，驗證失敗返回的提示資訊)

jQuery.validator.addMethod("isOther", function(value, element){
    if(value == 'Other') {
        return this.optional(element) || ($('#otherCountry').val().trim() != '');  
    } else {
        return this.optional(element);
    }
}, "This field is required.");