vue表单验证，安装插件VeeValidate以及设置中文错误提示

1.安装vee-validate

cnpm install vee-validate --save

2.安装vue-i18n

cnpm install vue-i18n  --save

3.main.js中引入

import VeeValidate from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN'
import VueI18n from 'vue-i18n';
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: 'zh_CN',
})
Vue.use(VeeValidate, {
  i18n,
  i18nRootKey: 'validation',
  dictionary: {
    zh_CN
  }
});

全部配置

const config = {
  events: 'blur'
}
Vue.use(VeeValidate, config)

4.页面中使用

<input type="text" placeholder="邮箱" v-validate ="'required|email'" name="email"/>
<span class="errortip" v-show="errors.has('email')">{{ errors.first('email')}}</span>

5.设置自定义正则表达式规则

<input type="text" placeholder="手机号" v-validate="{ required: true, regex: /^(((13[0-9]{1})|(15[0-35-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/ }" name="phone"/>
<span class="errortip" v-show="errors.has('phone')">{{ errors.first('phone') }}</span>

6.表单提交验证

this.$validator.validateAll().then((msg)=>{
    if(msg){
      alert('验证成功！');
    }else{
      this.$message({
        message: '填写不完整！',
        type: 'warning'
      });
    }
})

7.部分验证

getSmsCode: async function () {
  const results = Promise.all([
    this.$validator.validate('mobile'),
    this.$validator.validate('captchaCode')
  ])
  const areValid = (await results).every(isValid => isValid)
  if (areValid) {
    ajaxPost('/auth/sms-code', {mobile: this.mobile, reqType: '10001', captchaCode: this.captchaCode, captchaToken: this.captchaToken}, function () {
      alert('666')
    })
  } else {
    showModalMsg('请填写完整', 'error')
  }
}

参考：https://github.com/baianat/vee-validate/issues/1089

8.错误提示

this.errors.remove('mobile') // 移除制定filed的错误提示
this.errors.clear() // 清除所有错误提示

errors.first('field') // 获取关于当前field的第一个错误信息
collect('field') // 获取关于当前field的所有错误信息(list)
has('field') // 当前filed是否有错误(true/false)
all() // 当前表单所有错误(list)
any() // 当前表单是否有任何错误(true/false)
add(String field, String msg) // 添加错误
clear() // 清除错误
count() // 错误数量
remove(String field) // 清除指定filed的所有错误

相关问题：https://github.com/baianat/vee-validate/issues/451

9.注意事项

报错：Uncaught (in promise) Error: [vee-validate] Validating a non-existent field: "". Use "attach()" first.
处理：通过v-if动态显示的部分,把v-if换为v-show

内置规则列表：

.
参考文章：
http://vee-validate.logaretm.com/examples.html
https://github.com/baianat/vee-validate
https://segmentfault.com/a/1190000011296437