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

wenyiweb 發布于2019-08-20 19:00 / 3302人閱讀

摘要：使用下載后包中的或者就是簡體中文的消息語言包引入和開始使用默認校驗規則必須輸入的字段。使用方法調用驗證輸入值。日期校驗出錯，慎用。必須輸入合法的信用卡號。輸入擁有合法后綴名的字符串上傳文件的后綴。

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

首先需要引入jquery包

在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效果好像沒出來我使用自定義函數實現的以后琢磨琢磨

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85012.html

表單驗證工具 jquery-validation Vs Parsley

摘要：號稱不用寫一行代碼就能驗證表單。動態表單驗證現在更聰明，它會自動檢測您的表單的修改并相應地調整其驗證。簡單地添加，刪除或編輯字段，將會自動驗證。還有好多手機號碼格式有誤請填寫手機號驗證表單注意是我自定義的驗證規則，添加到里面的基本對比名稱 gitbub地址 stars 文檔地址 jquery-validation 這里 7859(截止7/21) 這里 Parsley....

bluesky 2019-08-20 18:12 評論0 收藏0
前端插件庫

摘要：原文鏈接前端插件庫站點前端開發文檔博客前端插件庫前端插件庫官網是的函數庫，目的是強化表格操作如搜索排序，并自動加入組件引入表格中，使用非常靈活簡便。由推出，靈活扎實的建議列表函數庫。原文鏈接：前端插件庫站點：前端開發文檔博客：前端插件庫前端插件庫 DataTables 官網：https://www.datatables.net/ DataTables是jQuery的JavaScr...

高勝山 2019-08-26 13:44 評論0 收藏0
前端插件庫

摘要：原文鏈接前端插件庫站點前端開發文檔博客前端插件庫前端插件庫官網是的函數庫，目的是強化表格操作如搜索排序，并自動加入組件引入表格中，使用非常靈活簡便。由推出，靈活扎實的建議列表函數庫。原文鏈接：前端插件庫站點：前端開發文檔博客：前端插件庫前端插件庫 DataTables 官網：https://www.datatables.net/ DataTables是jQuery的JavaScr...

shusen 2019-08-30 10:53 評論0 收藏0
前端相關匯總

摘要：簡介前端發展迅速，開發者富有的創造力不斷的給前端生態注入新生命，各種庫框架工程化構建工具層出不窮，眼花繚亂，不盲目追求前沿技術，學習框架和庫在滿足自己開發需求的基礎上，然后最好可以對源碼進行調研，了解和深入實現原理，從中可以獲得更多的收獲隨 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...

BenCHou 2019-08-23 12:31 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

netmou 2019-08-23 12:28 評論0 收藏0