js插件使用：jQuery-Validate 表單驗證插件的使用

業務上須要進行驗證判斷，感受一個一個寫太麻煩，因而乎在網上搜索到jQuery-Validate這個表單插件

首先須要引入jquery包

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

在https://jqueryvalidation.org/官網下載好插件後引入使用。

使用下載後包中的 messages_zh.js或者messages_zh.min.js 就是簡體中文的消息語言包

引入jquery.validate.min.js和messages_zh.min.js 開始使用
默認校驗規則
1 required:true 必須輸入的字段。
2 remote:"check.php" 使用 ajax 方法調用 check.php 驗證輸入值。
3 email:true 必須輸入正確格式的電子郵件。
4 url:true 必須輸入正確格式的網址。
5 date:true 必須輸入正確格式的日期。日期校驗 ie6 出錯，慎用。
6 dateISO:true 必須輸入正確格式的日期（ISO），例如：2009-06-23，1998/01/22。只驗證格式，不驗證有效性。
7 number:true 必須輸入合法的數字（負數，小數）。
8 digits:true 必須輸入整數。
9 creditcard: 必須輸入合法的信用卡號。
10 equalTo:"#field" 輸入值必須和 #field 相同。
11 accept: 輸入擁有合法後綴名的字符串（上傳文件的後綴）。
12 maxlength:5 輸入長度最可能是 5 的字符串（漢字算一個字符）。
13 minlength:10 輸入長度最小是 10 的字符串（漢字算一個字符）。
14 rangelength:[5,10] 輸入長度必須介於 5 和 10 之間的字符串（漢字算一個字符）。
15 range:[5,10] 輸入值必須介於 5 和 10 之間。
16 max:5 輸入值不能大於 5。
17 min:10 輸入值不能小於 10。

demo：

$('#add-admin-form').validate({
    rules:{
        role: "required",
        userName:{
            required: true,
            maxlength: 20
        },
        realName:{
            required: true,
            maxlength: 20
        }
    },
    messages:{
        role: "請選擇您的角色",
        userName:{
            required: "請輸入用戶名",
            maxlength: "用戶名過長"
        },
        realName:{
            required: "請輸入用戶名",
            maxlength: "真是姓名過長"
        }
    }
})

rlues表明驗證規則；
messages:標驗證錯誤後顯示的文字
其中role、realName等字段都是表單中input的name值

用如下方法使用自定義驗證，這裏的自定義驗證有點不太同樣，須要先新增自定義方法 而後進行form表單驗證的時候進行試用

jQuery.validator.addMethod("isPhone", function (value, element) {
            return /^0?(13[0-9]|15[012356789]|17[0135678]|18[0-9]|14[57])[0-9]{8}$/.test(value);
        }, "請正確填寫您的手機號碼");

經過以上方法進行驗證能夠實現自定義；

分類使用，有時候咱們須要進行多個input 或者select的聯合驗證 這時候就可使用groups

$('#add-admin-form').validate({
            groups: {
                username: "province city district"   //username定義的組名，province city district 是元素name
            },
            rules: {
                role: "required",
                userName: {
                    required: true,
                    maxlength: 20
                },
                realName: {
                    required: true,
                    maxlength: 20
                },
                phone: {
                    isPhone: true
                },
                gender: {
                    isGender: true,
                },
                province: {
                    isPlace: true
                },
                city: {
                    isPlace: true
                },
                district: {
                    isPlace: true
                },
                school: "required"
            },
            messages: {
                role: "請選擇您的角色",
                userName: {
                    required: "請輸入用戶名",
                    maxlength: "用戶名過長"
                },
                realName: {
                    required: "請輸入用戶名",
                    maxlength: "真是姓名過長"
                },
                phone: "請輸入正確的手機號",
                gender: {
                    isGender: "請選擇您的性別"
                },
                province: "請選擇您的所在地",
                city: "請選擇您的所在地",
                district: "請選擇您的所在地",
                school: "請選擇您的學校"
            },
            errorPlacement: function (error, element) {  //錯誤提示在什麼地方
                if (element.attr("name") == "province" || element.attr("name") == "city" || element.attr("name") == "district") {
                    error.insertAfter("#district");    //若是是fname和lname呢，就#lastname後面
                } else {
                    error.insertAfter(element);
                }
            },
        })

其中groups和errorPlacement是必不可少的，前者進行關於元素的分組處理，後者進行處理操做後error的位置問題

用空格隔開後分別定義多個元素

在rules中也要定義它本身的規則 一樣可以使用required或者自定義判斷均可以

一樣消息也是用一樣的方法

errorPlacement書體不過if else 進行分類處理 定位error的表示位置

radiobox和checkbox效果好像沒出來 我使用自定義函數實現的 之後琢磨琢磨