vee-validate的使用

1.关于vee-validate配置中文
2.vee-validate在项目中的使用

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)
Vue.use({
  i18n,
  i18nRootKey: 'validation',
  dictionary: {
    zh_CN
  }
})

1.npm install vee-validate
2.npm install vue-i18n // 安装中文包

页面中使用

 <div class="info">
         输入姓名：
         <input
           type="text"
           v-model="formData.name"
           data-vv-as="field"
           name="userName"
           v-validate="'required|min:1|max:10'"  // 校验规则 required表示必填
         />
   <div class="err">{{errors.first('userName')}}</div>
 </div>
 
 <div class="info">
    输手机号：
    <input
      type="number"
      v-model="formData.mobile"
      data-vv-as="field"
      v-validate="'required|min:11|max:11'"
      name="mobile"
    />
    <div class="err">{{errors.first('mobile')}}</div>
 </div>
  
  <div class="handle">
    <div id="affirm" @click.stop="getPrePayId">确认支付</div>
    <div id="cancel" @click.stop="cancel">取消支付</div>
  </div>

const validate = {
  custom: {
    userName: {
      required: () => "昵称不得为空", //写法1
      min: "昵称不得小于1个字符", //写法2
      max: () => "昵称不得大于15个字符"
    },
    mobile: {
      required: () => "手机号不得为空",
      min: "请输入正确的手机号", //写法2
      max: () => "请输入正确的手机号"
    }
  }
};
export default {
data() {
    return {}
    },
mounted() {
    this.$validator.localize("zh_CN", validate);  // 加载中文
  },
methods: {
	getPrePayId (){
	this.$validator.validate().then(valid => {
		// 校验通过，写你的代码逻辑
	}
  }
}