VeeValidate在vue項目裏表單校驗應用案例

時間 2019-11-15

標籤 veevalidate vue 項目表單校驗應用案例欄目 HTML 简体版

原文原文鏈接

VeeValidate是什麼：

VeeValidate是Vue.js的驗證庫，它有不少驗證規則，並支持自定義規則。它基於模板，所以它與HTML5驗證API類似而且很熟悉。您能夠驗證HTML5輸入以及自定義Vue組件。它也是以本地化爲基礎構建的，實際上咱們有大約44種語言由精彩的社區成員支持和維護。javascript

本文包含VeeValidate包含如下幾點應用：

一、基本安裝使用
二、本地化支持
三、自定義規則和錯誤消息
四、驗證HTML5輸入和自定義Vue組件
五、統一提交按鈕處理

先看看頁面效果：

若是須要這個校驗案例源碼的老鐵，移步個人github地址:VeeValidate校驗應用（歡迎★star），能夠運行。下面步入主題：html

基本安裝使用

VeeValidate的使用支持兩種方式：一種是：NPM/yarn（npm install vee-validate --save），一種是：CDN。vue

本文是以CDN的方式引用：

<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <script type="text/javascript" src="js/vue.min.js" ></script>
    <script type="text/javascript" src="js/vee-validate.min.js" ></script>
    <script type="text/javascript" src="js/zh_CN.js" ></script>
複製代碼

註釋：引入了四個js文件，前面兩個略講，後面的兩個分別是vee-validata和zh_CN中文語言包文件

html頁面部分：

<div class="enroll" id="recommend-box">
                <div class="title">請填寫您要薦購的書籍信息：</div>
                <div class="content">
                    <div class="info infoa">
                        <div class="group-input">
                            <span class="a">書&nbsp;名：</span>
                            <input v-model="title" v-validate="'required'" data-vv-as="書名" type="text" name="title" placeholder="請輸入推薦書名" />
                        </div>
                        <div class="errors" v-show="errors.has('title')" v-cloak>{{ errors.first('title') }}</div>
                    </div>
                    <div class="info infoa">
                        <div class="group-input">
                            <span class="a">做&nbsp;者：</span>
                            <input v-model="author" v-validate="'required'" data-vv-as="做者" type="text" name="author" placeholder="請輸入做者" />
                        </div>
                        <div class="errors" v-show="errors.has('author')" v-cloak>{{ errors.first('author') }}</div>
                    </div>
                    <div class="info infoa">
                       <div class="group-input">
                           <span class="a">出版社：</span>
                            <input v-model="publisher" v-validate="'required'" data-vv-as="出版社" type="text" name="publisher" placeholder="請輸入出版社" />
                        </div>
                       <div class="errors" v-show="errors.has('publisher')" v-cloak>{{ errors.first('publisher') }}</div>
                    </div>
                    <div class="info infob">                  
                        <div class="group-input">
                            <span class="a">出版年：</span>
                            <input v-model="pubYear" v-validate="'required|pubYear|digits:4'" data-vv-as="出版年" type="text" name="pubYear" placeholder="請輸入出版年" />
                        </div>
                        <div class="errors" v-show="errors.has('pubYear')" v-cloak>{{ errors.first('pubYear') }}</div>
                    </div>
                    <div class="info infob">
                        <div class="group-input">
                            <span class="a">語言類型：</span>
                            <input v-model="type" v-validate="'required'" data-vv-as="語言類型" type="text" name="type" placeholder="語言類型" />
                        </div>
                        <div class="errors" v-show="errors.has('type')" v-cloak>{{ errors.first('type') }}</div>
                    </div>
                    <div class="info infob">
                        <div class="group-input">
                            <span class="a">ISBN號：</span>
                            <input v-model="isbn" v-validate="'required|isbn'" data-vv-as="ISBN號" type="text" name="isbn" placeholder="ISBN號" />
                        </div>
                        <div class="errors" v-show="errors.has('isbn')" v-cloak>{{ errors.first('isbn') }}</div>
                    </div>

                    <div class="info infob more">
                        <div class="group-input">
                            <span class="a">推薦理由：</span>
                            <textarea v-model="remark" v-validate="'max:200'" data-vv-as="推薦理由" type="text" name="remark" placeholder="請輸入推薦理由"></textarea>
                        </div>
                        <div class="errors" v-show="errors.has('remark')" v-cloak>{{ errors.first('remark') }}</div>
                    </div>
                     <div class="info info-btn">
                         <div class="btton" @click="validateBeforeSubmit()">提交</div>
                     </div>
                 </div>
            </div>
複製代碼

註釋：這邊包含如下幾個VeeValidate知識點：

一、input/textarea標籤中的v-validate、data-vv-as、name屬性。（v-model我這裏是雙向綁定，方便把這些參數傳遞給接口請求，不作過多介紹）二、錯誤提示標籤裏面的v-show="errors.has('remark')" 和**{{ errors.first('remark') }}**java

v-validate：

v-validate指令添加到您但願驗證的輸入中，並確保您的輸入具備name用於生成錯誤消息的屬性。而後，傳遞給指令一個rules字符串，其中包含由管道' |' 分隔的驗證規則列表。好比上面的出版年份的校驗，使用required這個選項是必填項，pubYear以代表該字段必須爲年的格式（固然這裏是自定義的），digits:4，數字長度是4。要結合這兩個規則，咱們指定字符串值required|pubYear|digits:4的v-validate表達式的值。jquery

data-vv-as：

當爲這個輸入生成任何錯誤消息時，它將使用該data-vv-as值而不是實際的字段名稱，默認的錯誤提示都是英文，若是你設置了這個，錯誤提示字段名稱它會提示data-vv-as值git

v-show="errors.has('remark')

默認錯誤提示的標籤不加載出來github

errors.first('remark')

獲取關於當前remark的第一個錯誤信息ajax

js部分：

<script type="text/javascript">
        var IndexPage = "http://localhost:8080/xxxx.html"
        var AuthCode = "12131";
        $(function () {
            recommend(AuthCode);
        })
        VeeValidate.Validator.localize('zh_CN');
        Vue.use(VeeValidate);

        VeeValidate.Validator.localize({
            zh_CN: {
                messages: {
                    required: function (name) { return name + '不能爲空' },
                }
            }
        })
        VeeValidate.Validator.extend('isbn',{
            getMessage: function () { return " 請輸入正確格式的isbn號" },
            validate: function (value) { return /^[\d-]*$/.test(value);}
        })
        VeeValidate.Validator.extend('pubYear', {
            getMessage: function () { return " 請輸入正確的年份" },
            validate: function (value) { return /^(19|20)\d{2}$/.test(value); }
        })

        function recommend(AuthCode) {
            var classList = new Vue({
                el: '#recommend-box',
                data: function () {
                    return {
                        title: "",
                        author: "",
                        publisher: "",
                        pubYear: "",
                        type: "",
                        remark: "",
                        isbn: ""

                    }
                },
                methods: {
                    validateBeforeSubmit() {
                        this.$validator.validateAll().then((result) => {
                            if (result) {
                                $.ajax({
                                    url: '/xxxx',
                                    data: {
                                        Request: "xxxxx",
                                        title: this.title,
                                        author: this.author,
                                        publisher: this.publisher,
                                        pubYear: this.pubYear,
                                        type: this.type,
                                        remark: this.remark,
                                        isbn: this.isbn,
                                        certId: AuthCode
                                    },
                                    type: 'POST',
                                    dataType: "json",
                                    success: function (data) {
                                        var msg = data.msg;
                                        alert(msg);
                                        window.location.href = IndexPage;
                                    }
                                });
                                return;
                            }
                            alert("請輸入完整推薦信息！")
                        });
                    }
                }
            })
        }
    </script>
複製代碼

好，接下來咱們一塊兒來讀一下這個代碼npm

VeeValidate.Validator.localize('zh_CN');
        Vue.use(VeeValidate);
複製代碼

####註釋：這以上代碼的意思是 一、改變成zh_CN中午的語言環境，若是不改默認提示是英文二、安裝VeeValidate插件，也能夠理解是初始化json

VeeValidate.Validator.localize({
            zh_CN: {
                messages: {
                    required: function (name) { return name + '不能爲空' },
                }
            }
        })
複製代碼

####註釋：上代碼修改默認提示語，name屬性加不能爲空，也就是必填項的非空判斷

VeeValidate.Validator.extend('isbn',{
            getMessage: function () { return " 請輸入正確格式的isbn號" },
            validate: function (value) { return /^[\d-]*$/.test(value);}
        })
        VeeValidate.Validator.extend('pubYear', {
            getMessage: function () { return " 請輸入正確的年份" },
            validate: function (value) { return /^(19|20)\d{2}$/.test(value); }
        })
複製代碼

####註釋：上代碼修改自定義規則 getMessage ：提示語。 validate：就是匹配規則，一般就正則咯。

validateBeforeSubmit() {
      this.$validator.validateAll().then((result) => {
                if (result) {
                      //這裏寫具體的接口請求
                       alert("推薦成功！")
                      return;
                    }
                     alert("請輸入完整推薦信息！")
               }
          }
複製代碼

####註釋：上代碼建立一個提交按鈕事件，監聽是否正常填寫選項，實現校驗

一個完整的校驗應用案例到這裏已經講解的差很少了，小夥伴們能夠根據本身的實際狀況應用在本身的項目中，若是須要校驗案例源碼的老鐵，移步個人github地址:VeeValidate校驗應用（歡迎★star）若是須要深刻了解，能夠移步到:VeeValidate官網