Jquery-Validation插件

1. Jquery-Validation插件

安裝

首先需要安裝jquery.js

<script src="XXX/jquery.js"></script>

<script src=" XXX/jquery-validation-1.17.0/dist/jquery.validate.min.js"></script>

官網地址：https://jqueryvalidation.org/

使用參考地址：http://www.runoob.com/jquery/jquery-plugin-validate.htmlhttp:/www.runoob.com/jquery/jquery-plugin-validate.html

使用方式

常見有兩種,一種是在html中使用，另外一種是使用JavaScript調用。

使用方式一【HTML】：

 

 

使用方式二【JavaScript】

 

在rules內部寫每個驗證元素的驗證規則【可能是多個】。

在messages中寫每個驗證規則不通過時的提示信息，否則顯示默認提示信息。

推薦使用最新的html5語法for和元素匹配。如上圖中的“classify-name”,全局設置了提示信息更加for屬性查找並將提示信息顯示在label上。

添加驗證規則 

事件觸發表單驗證

validate 方法返回一個 Validator 對象。Validator 對象有很多方法可以用來引發校驗程序或者改變 form 的內容，

使用setDefaults()設置錯誤信息提示未知 

$.validator.setDefaults({
    errorPlacement: function(error, element) { //錯誤信息顯示位置
        $( element )
            .closest( "form" )
            .find( "label[for='" + element.attr( "id" ) + "']" )
            .append( error );
    },
    errorClass: "form-error",
    validClass: "form-success",
    errorElement: "span"
});

 

1. 觸發方式可能是直接表單內部submit觸發，這個時候可使用submitHandler回調處理。 

2. 如果是外部函數觸發的話，使用$().validate().form(); 判斷是否驗證通過。