vue-validator 使用详解

Posted 2020-10-20 smileself

自定义配置文件(validateConfig):

　　

import Vue from ‘vue‘
import VeeValidate, { Validator } from ‘vee-validate‘

const dictionary = {
  en: {
    messages: {
      // <input type="text" v-model="phoneNumber" name="phone" v-validate="‘required|phone‘">
      // 不满足required条件时，显示的提示对应下面的设置
      required: (field) => `${field} is necessary!`,
    },
    attributes: {
      // <input type="text" v-model="phoneNumber" name="phone" v-validate="‘required|phone‘">
      // 上述messages提示信息中field显示的内容在此设置，对应标签的name属性
      phone: ‘Phone Number‘,
    }
  }
}

// 引用上述设置
Validator.localize(dictionary)

// 自定义验证规则,取名为phone, 通过该方式使用v-validate="‘required|phone‘"
Validator.extend(‘phone‘, {
  // 验证规则，符合规则通过，否则不通过 (规则为美国电话号码)
  validate: (value, ref) => {
    return /^(\d3|^\d{3}[.-]?)?\d{3}[.-]?\d{4}$/.test(value)
  },
  // 提示信息，不符合规则提示语
  // <span v-show="errors.has(‘phone‘)" class="error-message"> {{ errors.first(‘phone‘) }} </span>
  getMessage: (field) => ‘The ‘ + field + ‘ is invalid.‘
})

// 事件触发规则，在输入框中输入后点击事件触发验证，默认为实时验证
Vue.use(VeeValidate, { events: ‘blur‘ })

　

main.js中引入文件
 import ‘@/assets/js/validateConfig‘

页面使用:

    <label>Phone Number</label>
    <input type="text" v-model="phoneNumber" name="phone" v-validate="‘required|phone‘">
    <span v-show="errors.has(‘phone‘)" class="error-message"> {{ errors.first(‘phone‘) }} </span>

提交方法中引入，进行校验，不通过中断执行

update () {
  let result = await this.$validator.validateAll()
  if (!result) {
     return
  }
  ....
}

对自定义的组件(自定义select)，数据发生变化，validate拿不到新的数据，需要使用 v-validate:userId="‘required|phone‘"
指定检测userId，并在触发事件中使用 await this.$validator.validateAll()来对提示语关闭或显示(基于事件触发验证情况)

eg:
        <my-select :select="users" :value="userId" @input="idChanged"
          name="userId" v-validate:userId="‘required‘"></my-select>
        <span v-show="errors.has(‘userId‘)" class="error-message"> {{ errors.first(‘userId‘) }} </span>

        idChanged (value) {
            this.userId = value
            this.$validator.validateAll()
        }