注釋：這邊包含以下幾個VeeValidate知識點：

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

v-validate：

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

data-vv-as：

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

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

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

errors.first('remark')

獲取關(guān)于當前remark的第一個錯誤信息

js部分：

    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("請輸入完整推薦信息！")
            });
          }
        }
      })
    }
  

好，接下來我們一起來讀一下這個代碼

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

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

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); }
    })

注釋：上代碼修改自定義規(guī)則 getMessage ： 提示語。 validate： 就是匹配規(guī)則，通常就正則咯。

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

注釋：上代碼創(chuàng)建一個提交按鈕事件，監(jiān)聽是否正常填寫選項，實現(xiàn)校驗

以上是“VeeValidate有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！