[Vue]vee-validate的使用——自定义校验规则及校验message

2018/09/04 13:01
阅读数 606

 

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

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部