2. 程式人生 > >nice-validator表單驗證外掛的簡單使用

nice-validator表單驗證外掛的簡單使用

阿新 • • 發佈：2019-06-27

　　前言

　　前端表單校驗是過濾無效資料、假資料、有毒資料的第一步，是資料安全的第一道關卡，雖然我們不能100%相信客戶端提交的資料（真正的校驗還得在服務端進行），但設定前端表單校驗也是至關重要的，自己寫邏輯程式碼一個一個表單欄位去校驗不現實，又不想自己造輪子，使用jquery外掛是不錯的選擇，這裡記錄一下在專案中使用到的nice-validator表單驗證外掛的簡單使用

　　nice-validator，簡單、智慧、令人愉悅的表單驗證方案，使用簡單、配置項豐富、自由度高，對開發者友好，更多介紹請看官網：https://validator.niceue.com/ 

 

　　程式碼編寫

　　我們在IM系統的登入、登錄檔單作為例子，測試使用nice-validator進行表單校驗

　　點選下載（https://github.com/niceue/nice-validator/releases/tag/1.1.4）下載nice-validator-1.1.4.zip，下載下來後只留下有關鍵檔案即可，其他的都刪掉，然後在公用頭部head.html引入

 

 

　　使用方法

　　nice-validator有兩種使用方式：

　　(1)、DOM 繫結規則，無需 JS 程式碼，參考：https://validator.niceue.com/docs/dom-bindings.html，一般使用第二種，在js配置規則

　　(2)、JS 配置規則，無侵入 DOM

//提交登入
function login() {
    $("#loginForm").validator({
        rules: {//定製規則

        },
        fields: {//配置規則
            userName:'required;',
            password:'required;'
        },
        messages: {//定製校驗失敗提示

        },
        valid: function () {//驗證通過，回撥
            $.post(ctx + "/imsUser/login", $("#loginForm").serializeObject(), function (data) {
                if (data.flag) {
                    window.location.href = ctx + "/imsUser/socketChart/" + data.data.userName + ".html"
                } else {
                    // tip提示
                    tip.msg(data.msg);
                }
            });
        }
    }).trigger("validate");
}

 

 　　內建規則

　　外掛內建 8 個規則：

  • required - 使欄位必填
  • checked - 必選，還可以控制選擇專案的數量
  • match - 當前欄位與另一個欄位比較
  • remote - 獲取伺服器端驗證的結果
  • integer - 只能填寫整數
  • range - 只能填寫指定範圍的數
  • length - 欄位值必須符合指定長度
  • filter - 過濾當前欄位的值，不做驗證

　　自定義規則如果與內建規則同名，則自定義規則優先

　　自定義規則

    $("#myForm").validator({
        rules: {//定製規則
                一、直接使用正則，適用於使用單個正則能搞定的驗證
                // 1、使用陣列包裹正則和錯誤訊息，規則不通過時提示該訊息
                mobile: [/^1[3458]\d{9}$/, '請檢查手機號格式'],
                // 2、或者，直接定義正則，需要另外定義錯誤訊息（寫在下方的messages引數裡），否則提示預設訊息
                mobile: /^1[3458]\d{9}$/

                二、使用函式，函式方式具有最大的靈活性，搞定任何驗證。不同返回值，導致不同驗證結果：
                // 1、使用內建的 .test() 方法檢測是否符合某個規則，如果通過返回true，否則返回錯誤訊息
                mobile: function(element, params) {
                    return /^1[3458]\d{9}$/.test(element.value) || '請檢查手機號格式';
                }
                // 2、自定義 ajax 驗證
                // 你只需要將 $.ajax 返回，並且保證 response 符合上面的返回值說明，其他的外掛都會自動處理。
                // 當然，你也可以加上 success 回撥做點別的，或者自己加上自定義 header
                mobile: function(element){
                    return $.ajax({
                        url: 'check/username.php',
                        type: 'post',
                        data: element.name +'='+ element.value,
                        dataType: 'json'
                    });
                }
                更多方式請參閱 自定義規則之函式：https://validator.niceue.com/docs/custom-rules.html
        },
        fields: {//配置規則（使用規則）
            phone:'required;mobile',
            username:'required;'
        },
        messages: {//定製校驗失敗提示
            mobile:'請檢查手機號格式'
        },
        valid: function () {//驗證通過的回撥
            
        }
    }).trigger("validate");

 

　　自定義主題

　　自帶的規則比較少，樣式比較醜，好在在我們引入的語言檔案裡面（zh-CN.js）定義了部分規則，已經部分主題

　　有幾種主題（效果請戳：）：https://validator.niceue.com/releases/1.1.4/demo/option-theme.html，我們使用yellow_right_effect，有個動畫效果，比較好看

　　但放到我們專案時發現超出div框的部分被遮擋

　　因此我們參考zh-CN.js，在head.html宣告一個自定義主題，並進行全域性配置

        <!-- nice validator-->
        <script>
            //宣告一個自定義主題
            $.validator.setTheme({
                'hz-theme': {
                    formClass: 'n-yellow',
                    msgClass: 'n-bottom',
                    msgArrow: '<span class="n-arrow"><b>◆</b><i>◆</i></span>',
                    msgShow: function ($msgbox, type) {
                        var $el = $msgbox.children();
                        if ($el.is(':animated')) return;
                        if (type === 'error') {
                            if ($el.parents('.input-group').length) {
                                $el.parent().css({position: 'initial'});
                            }
                            $el.css({left: '20px', opacity: 0}).addClass('keep-front')
                                .delay(100).show().stop()
                                .animate({left: '-4px', opacity: 1}, 150)
                                .animate({left: '3px'}, 80)
                                .animate({left: '0px'}, 80);
                        } else {
                            $el.css({left: 0, opacity: 1}).fadeIn(200);
                        }
                    },
                    msgHide: function ($msgbox, type) {
                        var $el = $msgbox.children();
                        $el.stop().delay(100).show()
                            .animate({left: '20px', opacity: 0}, 300, function () {
                                $msgbox.hide();
                            });
                    }
                }
            });

            //全域性配置
            $.validator.config({
                timely: 2,//觸發時機
                theme: 'hz-theme',//使用自定義主題
                rules: {//定製規則
                    //郵箱格式
                    email: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
                    //限制輸入整數
                    integer: function (element, params) {
                        //刪除非整數字符
                        element.value = element.value.replace(/[^0-9]/g, '');
                        //預設規則
                        var re, z = '0|',
                            p = '[1-9]\\d*',
                            key = params ? params[0] : '*';
                        switch (key) {
                            case '+':
                                re = p;
                                break;
                            case '-':
                                re = '-' + p;
                                break;
                            case '+0':
                                re = z + p;
                                break;
                            case '-0':
                                re = z + '-' + p;
                                break;
                            default:
                                re = z + '-?' + p;
                        }
                        re = '^(?:' + re + ')$';
                        return new RegExp(re).test(this.value) || (this.messages.integer && this.messages.integer[key]);
                    }
                }
            });
        </script>
head.html

 

　　規則作用範圍

　　(1). 全域性

　　使用 $.validator.config()，建議配置在 local 配置檔案（如：zh-CN.js）中，任何例項，任何欄位都能訪問到該規則

$.validator.config(
    rules: {
        mobile: [/^1[3-9]\d{9}$/, "請填寫有效的手機號"],
        chinese: [/^[\u0391-\uFFE5]+$/, "請填寫中文字元"]
    }
);

 

　　(2). 當前例項

　　在呼叫初始化驗證的時候傳參，只對呼叫時的例項有效

$("#myForm").validator(
    rules: {
        mobile: [/^1[3-9]\d{9}$/, "請填寫有效的手機號"],
        chinese: [/^[\u0391-\uFFE5]+$/, "請填寫中文字元"]
    }
);

 

　　(3). 當前欄位

　　只能通過 DOM 方式在表單元素上定義

<input name="demo" data-rule="required;xxx" data-rule-xxx="[/^\d{6}$/, '請輸入6位數字']">

 

　　效果演示

　　登入表單

 　　登入校驗簡單一點，就一個非空校驗就OK了

//提交登入
function login() {
    $("#loginForm").validator({
        rules: {//定製規則
            
        },
        fields: {//配置規則（使用規則）
            userName: 'required;',
            password: 'required;'
        },
        messages: {//定製校驗失敗提示

        },
        valid: function () {//驗證通過，回撥
            $.post(ctx + "/imsUser/login", $("#loginForm").serializeObject(), function (data) {
                if (data.flag) {
                    window.location.href = ctx + "/imsUser/socketChart/" + data.data.userName + ".html"
                } else {
                    // tip提示
                    tip.msg(data.msg);
                }
            });
        }
    }).trigger("validate");
}

　　效果

 

　　登錄檔單

　　註冊的時候判斷賬號是否已經存在，我們之前是這樣做的

　　現在做如下修改，先在controller新增一個查詢介面，去掉儲存方法裡面的校驗

 

 

　　修改js程式碼

//提交註冊
function register() {
    $("#registerForm").validator({
        rules: {//定製規則
            reusername: function (element) {
                return _ajax({
                    url: ctx + '/imsUser/reusername',
                    type: 'post',
                    data: element.name +'='+ element.value,
                    dataType: 'json'
                });
            }
        },
        fields: {//配置規則（使用規則）
            userName: 'required;reusername',
            password: 'required',
            nickName: 'required',
            email: 'required;email',
            phone: 'required;mobile',
        },
        messages: {//定製校驗失敗提示
            reusername:"賬號已存在！！！"
        },
        valid: function () {//驗證通過，回撥
            let newTime = commonUtil.getNowTime();
            $("#createdTime").val(newTime);
            $("#updataTime").val(newTime);
            $("#avatar").val("/image/logo.png");
            $.post(ctx + "/imsUser/save", $("#registerForm").serializeObject(), function (data) {
                if (data.flag) {
                    switchover();
                }
                // tip提示
                tip.msg(data.msg);
            });
        }
    }).trigger("validate");
}

　　效果

 

 　　後記

　　文章到這裡結束，更多nice validator校驗外掛的引數配置、方法、事件等介紹請具體查閱官方文件：https://validator.niceue.com/d

相關推薦

nice-validator表單驗證外掛的簡單使用

　　前言 　　前端表單校驗是過濾無效資料、假資料、有毒資料的第一步，是資料安全的第一道關卡，雖然我們不能100%相信客戶端提交的資料（真正的校驗還得在服務端進行），但設定前端表單校驗也是至關重要的，自己寫邏輯程式碼一個一個表單欄位去校驗不現實，又不想自己造輪子，使用jquery外掛是不錯的選擇，這裡記錄一下

jQuery Validator 表單驗證外掛

jQuery Validate 外掛為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定製選項，滿足應用程式各種需求。該外掛捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫使用者自定義方法的 API。所有的捆綁方法預設使用

jQuery表單驗證外掛Validator的使用方法

　　　from表單資料的合法性驗證是個很常見的需求，jQuery提供了一個外掛：jquery validate 官網下載。 　　　若想使用需先引用jquery.validate.js，並且要在jquery.js之後引用。 <script src="js

jquery表單驗證外掛

jquery表單驗證外掛 <form id="submit_form" action="/" method="post"> <input name="headPersonPhone" class="easyui-textbox" data-options="required

實現Vue表單驗證外掛

表單驗證存在於每一個後臺系統中，它承載了許多的邏輯以及狀態。但是，過於某些的場景，會導致程式碼臃腫，如何更好地梳理它，來解決開發的痛點。 1. 前言 上篇文章介紹了，如何函式式呼叫表單元件從而減少維護其狀態的方法基於Vue構造器建立Form元件的通用解決方案。現在來介紹下如何處理表單驗證問題，現

前端tab切換 和 validatejs表單驗證外掛

一、tab切換 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta na

【常用 JS 外掛】01 jQuery Validation 表單驗證外掛

表單驗證框架 jQuery Validation 前端表單驗證框架 頁面引用 <!-- jQuery Validation 1.14.0 --> <script src="/static/assets/plugins/jquery-valida

【常用 JS 外掛】01 jQuery Valdation 表單驗證外掛

表單驗證框架 jQuery Validation 前端表單驗證框架 頁面引用 <!-- jQuery Validation 1.14.0 --> <script src="/static/assets/plugins/jquery-valida

前端表單驗證的簡單封裝

做畢設做到表單驗證，一堆if else if return寫得我頭皮發麻，又不喜歡某些元件中自帶的驗證，寫起來不自由，我火起來就自己封裝了一個表單驗證。 功能：暫時只支援判空和正則表示式，目前的畢設專案夠用了，後期若遇到需求會繼續加 封裝 const formvalidate = (arr) =&g

表單驗證外掛jquery.validate.js

<spanstyle="white-space:pre"></span>class="required"   必須填寫     <spanstyle="white-space:pre"></span>class="required email"     

jQuery 表單驗證外掛jQuery Validation Engine用法詳解

功能強大的 jQuery 表單驗證外掛，適用於日常的 E-mail、電話號碼、網址等驗證及 Ajax 驗證，除自身擁有豐富的驗證規則外，還可以新增自定義的驗證規則。 jQuery Validatio

vue.js表單驗證外掛(vee-validate)的使用

vue.js表單驗證外掛的使用更多文章，請訪問我的部落格綜述名稱：vee-validate用途：簡單的 Vue.js 表單驗證外掛官網：地址github:地址特別提示配合laravel使用特別好使 因為驗證規則和laravel後端的驗證規則一樣外掛既可以應用於SPA也可以應用

Vue 表單驗證外掛的寫作過程

前言 前段時間，老大搭好了Vue的開發環境，於是我們愉快地從JQ來到了Vue。這中間做的時候，在表單驗證上做的不開心，看到vue的外掛章節，感覺自己也能寫一個，因此就自己開始寫了一個表單驗證外掛va.js。 當然為什麼不找個外掛呢？ vue-validator呀。 我

表單驗證外掛Validate.js的使用

表單驗證外掛（validate.js），是一款驗證常規表單資料合法性的外掛。使用該外掛可以極大的簡化了在表單上繁雜的驗證過程，並且錯誤提示顯示的完善也增加了使用者體驗。 1. 使用 validate.js 外掛 該外掛文件中最重要的檔案是 valid

表單驗證外掛 validate （基本表單驗證，自定義驗證規則）

步驟： (1) 將jquery的原始檔案和外掛檔案jquery.validate.js匯入到工程中 (2) 編寫js程式碼對錶單進行驗證 表單驗證格式： $("#form表單").validate(json資料格式); json資料格式： {     &n

【jQuery學習----表單驗證】簡單的EasyValidator驗證框架

一個簡單實用的EasyValidator驗證框架。 說明：由於本人下載的版本是舊的版本，所以驗證的效果和上面的DEMO演示的效果不一樣。 一、所需檔案 1、validate.css 2、jquery.js（自行選擇版本） 3、validate.pack.

jQuery html5Validate基於HTML5表單驗證外掛

解決了之前元件如下不足： 1. 自定義驗證順序有問題； 2. 即時驗證支援沒內建； 3. 不能隨意定製驗證規則； 等等。 今年會開源，大家稍安~ 更新於2016-07-08 又有不少人問了，開源還需要時日。不過大家現在是可以使用的，下面是最簡單使用，需要sea

validform表單驗證外掛最終版

做個筆記，以後直接用吧。 報名介面： <%@ page language="java"pageEncoding="UTF-8"contentType="text/html;charset=UTF-8"%> <%@ include file="/public/

【推薦】bootstrapValidator.min.js表單驗證外掛

/*表單驗證*/ var gets = true;//是否讓表單提交 $(function(){ // 提示資訊=========================================== $("inp

不是一般地好用的jquery表單驗證外掛-Validform

之前博主推薦過jQuery Validate，因為之前也在用，但是配置稍微顯得有些麻煩，直到最近的這個專案用到了validform，才讓我大開眼界，整個介面突然感覺太友好了，先來幾張效果圖吧。 整個過程引用的css及js非常少。 c