1.安装vee-validate
npm install vee-validate --save
2.main.js里引用vee-validate插件
import Vue from 'vue' import VeeValidate,{ Validator } from 'vee-validate' Vue.use(VeeValidate); new Vue({ ... }).$mount('#app')
3.自定义校验规则,包含格式为[1~9999]的正则表达式
this.$validator.extend('customReg', { validate: value => { return /[1-9]\d*/.test(value) }, })
4.自定义违反校验规则时提示的error messages
mounted() {
//this.$validator为Validator的实例方法 this.$validator.localize("en", { custom: {
//numberBest需与组件的name属性值保持一致 numberBest: { customReg: "error number", between:"error between", }, }, }) }
(定义规则可参照官方文档:https://baianat.github.io/vee-validate/guide/messages.html#field-names)
5.组件中使用
<input v-validate="'customReg|between:1,999'" name="numberBest">