VeeValidate form verification use case code analysis in vue project

<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>

<p class="enroll" id="recommend-box">
        <p class="title">请填写您要荐购的书籍信息：</p>
        <p class="content">
          <p class="info infoa">
            <p class="group-input">
              <span class="a">书 名：</span>
              <input v-model="title" v-validate="&#39;required&#39;" data-vv-as="书名" type="text" name="title" placeholder="请输入推荐书名" />
            </p>
            <p class="errors" v-show="errors.has(&#39;title&#39;)" v-cloak>{{ errors.first('title') }}</p>
          </p>
          <p class="info infoa">
            <p class="group-input">
              <span class="a">作 者：</span>
              <input v-model="author" v-validate="&#39;required&#39;" data-vv-as="作者" type="text" name="author" placeholder="请输入作者" />
            </p>
            <p class="errors" v-show="errors.has(&#39;author&#39;)" v-cloak>{{ errors.first('author') }}</p>
          </p>
          <p class="info infoa">
            <p class="group-input">
              <span class="a">出版社：</span>
              <input v-model="publisher" v-validate="&#39;required&#39;" data-vv-as="出版社" type="text" name="publisher" placeholder="请输入出版社" />
            </p>
            <p class="errors" v-show="errors.has(&#39;publisher&#39;)" v-cloak>{{ errors.first('publisher') }}</p>
          </p>
          <p class="info infob">         
            <p class="group-input">
              <span class="a">出版年：</span>
              <input v-model="pubYear" v-validate="&#39;required|pubYear|digits:4&#39;" data-vv-as="出版年" type="text" name="pubYear" placeholder="请输入出版年" />
            </p>
            <p class="errors" v-show="errors.has(&#39;pubYear&#39;)" v-cloak>{{ errors.first('pubYear') }}</p>
          </p>
          <p class="info infob">
            <p class="group-input">
              <span class="a">语言类型：</span>
              <input v-model="type" v-validate="&#39;required&#39;" data-vv-as="语言类型" type="text" name="type" placeholder="语言类型" />
            </p>
            <p class="errors" v-show="errors.has(&#39;type&#39;)" v-cloak>{{ errors.first('type') }}</p>
          </p>
          <p class="info infob">
            <p class="group-input">
              <span class="a">ISBN号：</span>
              <input v-model="isbn" v-validate="&#39;required|isbn&#39;" data-vv-as="ISBN号" type="text" name="isbn" placeholder="ISBN号" />
            </p>
            <p class="errors" v-show="errors.has(&#39;isbn&#39;)" v-cloak>{{ errors.first('isbn') }}</p>
          </p>
          <p class="info infob more">
            <p class="group-input">
              <span class="a">推荐理由：</span>
              <textarea v-model="remark" v-validate="&#39;max:200&#39;" data-vv-as="推荐理由" type="text" name="remark" placeholder="请输入推荐理由"></textarea>
            </p>
            <p class="errors" v-show="errors.has(&#39;remark&#39;)" v-cloak>{{ errors.first('remark') }}</p>
          </p>
           <p class="info info-btn">
             <p class="btton" @click="validateBeforeSubmit()">提交</p>
           </p>
         </p>
      </p>

<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>

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

validateBeforeSubmit() {
   this.$validator.validateAll().then((result) => {
        if (result) {
           //这里写具体的接口请求
            alert("推荐成功！")
           return;
          }
           alert("请输入完整推荐信息！")
        }
     }