vee-validata的使用

• 下载
  npm install vee-validate@2

• 创建validate.js

    import Vue from 'vue'
    import VeeValidate from 'vee-validate'
    Vue.use(VeeValidate)
    VeeValidate.Validator.localize({
        attributes: { // 给校验的field属性名映射中文名称
            phone: '手机号',
        }
    })
    // 注意:需要在在main.js中引入
  

• 组件当中使用

  <div class="content">
    <label>手机号:</label>
    <input
      v-model="phone"
      name="phone"
      v-validate="{ required: true, regex: /^1[3-9]\d{9}$/ }"
      :class="{ invalid: errors.has('phone') }"
    />
    <span class="error-msg">手机校验失败</span>
  </div>