快捷導(dǎo)航

VeeValidate在vue項(xiàng)目里表單校驗(yàn)應(yīng)用案例

更新時(shí)間：2018年05月09日 11:08:28 作者：codercao

這篇文章主要介紹了VeeValidate在vue項(xiàng)目里表單校驗(yàn)應(yīng)用案例，VeeValidate是Vue.js的驗(yàn)證庫(kù)，它有很多驗(yàn)證規(guī)則，并支持自定義規(guī)則，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

VeeValidate是什么：

VeeValidate是Vue.js的驗(yàn)證庫(kù)，它有很多驗(yàn)證規(guī)則，并支持自定義規(guī)則。它基于模板，因此它與HTML5驗(yàn)證API相似并且很熟悉。您可以驗(yàn)證HTML5輸入以及自定義Vue組件。它也是以本地化為基礎(chǔ)構(gòu)建的，實(shí)際上我們有大約44種語(yǔ)言由精彩的社區(qū)成員支持和維護(hù)。

本文包含VeeValidate包含以下幾點(diǎn)應(yīng)用：

1、基本安裝使用

2、本地化支持

3、自定義規(guī)則和錯(cuò)誤消息

4、驗(yàn)證HTML5輸入和自定義Vue組件

5、統(tǒng)一提交按鈕處理

先看看頁(yè)面效果：

如果要看gif效果的可以在我的github（https://github.com/HongqingCao/My-Code/tree/master/VeeValidate）觀看，并提供有實(shí)例源碼下載，下面步入主題：

基本安裝使用

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

本文是以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>

注釋?zhuān)阂肓怂膫€(gè)js文件，前面兩個(gè)略講，后面的兩個(gè)分別是vee-validata和zh_CN中文語(yǔ)言包文件

html頁(yè)面部分：

<div class="enroll" id="recommend-box">
        <div class="title">請(qǐng)?zhí)顚?xiě)您要薦購(gòu)的書(shū)籍信息：</div>
        <div class="content">
          <div class="info infoa">
            <div class="group-input">
              <span class="a">書(shū) 名：</span>
              <input v-model="title" v-validate="'required'" data-vv-as="書(shū)名" type="text" name="title" placeholder="請(qǐng)輸入推薦書(shū)名" />
            </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">作 者：</span>
              <input v-model="author" v-validate="'required'" data-vv-as="作者" type="text" name="author" placeholder="請(qǐng)輸入作者" />
            </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="請(qǐng)輸入出版社" />
            </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="請(qǐng)輸入出版年" />
            </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">語(yǔ)言類(lèi)型：</span>
              <input v-model="type" v-validate="'required'" data-vv-as="語(yǔ)言類(lèi)型" type="text" name="type" placeholder="語(yǔ)言類(lèi)型" />
            </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號(hào)：</span>
              <input v-model="isbn" v-validate="'required|isbn'" data-vv-as="ISBN號(hào)" type="text" name="isbn" placeholder="ISBN號(hào)" />
            </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="請(qǐng)輸入推薦理由"></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>

注釋?zhuān)哼@邊包含以下幾個(gè)VeeValidate知識(shí)點(diǎn)：

1、input/textarea標(biāo)簽中的 v-validate、data-vv-as、name 屬性。（v-model我這里是雙向綁定，方便把這些參數(shù)傳遞給接口請(qǐng)求，不做過(guò)多介紹） 2、錯(cuò)誤提示標(biāo)簽里面的 v-show="errors.has('remark')" 和**{{ errors.first('remark') }}**

v-validate：

v-validate指令添加到您希望驗(yàn)證的輸入中，并確保您的輸入具有name用于生成錯(cuò)誤消息的屬性。然后，傳遞給指令一個(gè)rules字符串，其中包含由管道' |' 分隔的驗(yàn)證規(guī)則列表。比如上面的 出版年 份的校驗(yàn)，使用 required 這個(gè)選項(xiàng)是必填項(xiàng)， pubYear 以表明該字段必須為年的格式（當(dāng)然這里是自定義的），digits:4，數(shù)字長(zhǎng)度是4。要結(jié)合這兩個(gè)規(guī)則，我們指定字符串值required|pubYear|digits:4的v-validate表達(dá)式的值。

data-vv-as：

當(dāng)為這個(gè)輸入生成任何錯(cuò)誤消息時(shí)，它將使用該data-vv-as值而不是實(shí)際的字段名稱(chēng)，默認(rèn)的錯(cuò)誤提示都是英文，如果你設(shè)置了這個(gè)，錯(cuò)誤提示字段名稱(chēng)它會(huì)提示data-vv-as值

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

默認(rèn)錯(cuò)誤提示的標(biāo)簽不加載出來(lái)

errors.first('remark')

獲取關(guān)于當(dāng)前remark的第一個(gè)錯(cuò)誤信息

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 " 請(qǐng)輸入正確格式的isbn號(hào)" },
      validate: function (value) { return /^[\d-]*$/.test(value);}
    })
    VeeValidate.Validator.extend('pubYear', {
      getMessage: function () { return " 請(qǐng)輸入正確的年份" },
      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("請(qǐng)輸入完整推薦信息！")
            });
          }
        }
      })
    }
  </script>

好，接下來(lái)我們一起來(lái)讀一下這個(gè)代碼

VeeValidate.Validator.localize('zh_CN');
    Vue.use(VeeValidate);

注釋?zhuān)哼@以上代碼的意思是 1、改變成zh_CN中午的語(yǔ)言環(huán)境，如果不改默認(rèn)提示是英文 2、安裝VeeValidate插件，也可以理解是初始化

VeeValidate.Validator.localize({
      zh_CN: {
        messages: {
          required: function (name) { return name + '不能為空' },
        }
      }
    })

注釋?zhuān)荷洗a修改默認(rèn)提示語(yǔ)，name屬性加不能為空，也就是必填項(xiàng)的非空判斷

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

注釋?zhuān)荷洗a修改自定義規(guī)則 getMessage ：提示語(yǔ)。 validate：就是匹配規(guī)則，通常就正則咯。

validateBeforeSubmit() {
   this.$validator.validateAll().then((result) => {
        if (result) {
           //這里寫(xiě)具體的接口請(qǐng)求
            alert("推薦成功！")
           return;
          }
           alert("請(qǐng)輸入完整推薦信息！")
        }
     }

注釋?zhuān)荷洗a創(chuàng)建一個(gè)提交按鈕事件，監(jiān)聽(tīng)是否正常填寫(xiě)選項(xiàng)，實(shí)現(xiàn)校驗(yàn)

一個(gè)完整的校驗(yàn)應(yīng)用案例到這里已經(jīng)講解的差不多了，小伙伴們可以根據(jù)自己的實(shí)際情況應(yīng)用在自己的項(xiàng)目中，如果需要深入了解，可以移步到官網(wǎng)https://baianat.github.io/vee-validate/guide/。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: