vee-validate

使用vee-validate将标题加入错误提示

通过 data-vv-as 指令标示当前字段的语言名称
data-vv-name="名称" name="名称" :error-message="errors.first(名称)"

<van-field
      input-align="left"
      error-message-align="right"
      v-model="form[itemData.name]"
      :label="itemData.label"
      :data-vv-name="itemData.label"
      :name="itemData.label"
      :placeholder="itemData.placeholder"
      v-validate="'required|max:10'"
      :error-message="errors.first(itemData.label)"
      @change="handleChange"
    />

image.png

自定义校验规则

Validator.extend('phone', {
  getMessage: field => field + '格式错误',
  validate: value => {
    return value.length === 11 && /^1(1|2|3|4|5|6|7|8|9)\d{9}$/.test(value)
  }
})

光标离开输入框焦点就验证

参考https://curder.gitbooks.io/blog/content/vue/vee-validate/how-does-vee-validate-start-the-verification-when-the-mouse-is-removed.html

获取第一个错误信息并自动焦点到该表单字段

https://curder.gitbooks.io/blog/content/vue/vee-validate/how-to-use-vee-validate-throw-the-first-error-message-and-foucs-the-first-field.html