vee-validate插件的使用

最新推荐文章于 2023-08-30 11:39:37 发布

你算哪块小饼干啊呀呀

最新推荐文章于 2023-08-30 11:39:37 发布

阅读量316

点赞数

本文链接：https://blog.csdn.net/HANGSOME123/article/details/89448986

版权

1.npm install vee-validate

2.在main.js里面进行挂载 import validate from './Validate';

3.定义一个配置的相关js文件

import Vue from 'vue'
import VeeValidate, { Validator } from 'vee-validate'
import zh from 'vee-validate/dist/locale/zh_CN'// 引入中文文件
// 配置中文
Validator.addLocale(zh)
const config = {
  errorBagName: 'errors', // change if property conflicts.
  fieldsBagName: 'fieldBags',  // 报冲突时 可自定义修改字段名称
  delay: 0, // 错误提示的延迟时间
  strict: true, // 没有设置规则的表单不进行校验，
  enableAutoClasses: false,


  locale: 'zh_CN', // 对语言（中文）的配置



  classNames: {
    touched: 'touched', // the control has been blurred
    untouched: 'untouched', // the control hasn't been blurred
    valid: 'valid', // model is valid
    invalid: 'invalid', // model is invalid
    pristine: 'pristine', // control has not been interacted with
    dirty: 'dirty' // control has been interacted with
  },
  events: 'input', //* *input|blur** 在用户输入和表单失去焦点时都进行校验 可单独写  blur或input
  inject: true
}

//vue使用这个组件
Vue.use(VeeValidate, config)

// 自定义validate
const dictionary = {
  zh_CN: {
    messages: {
      email: () => '请输入正确的邮箱格式',
      required: (field) => '请输入' + field
    },
    attributes: {
      email: '邮箱',
      password: '密码',
      task_name: '任务名称',
      phone: '手机',
      task_type: '任务类型',
      task_template: '任务模板',
      task_tine_type: '时间类型',
      task_tine_value: '时间类型值',
      assisting_department: '协助单位',
      responsible_department: '责任单位',
      target_area: '目标新增面积',
      target_cahnge_number: '目标改造数量',
      implementation_plan: '实施方案',
      assessment_standard: '考核指标',
      grading_standard: '评分标准',
      score: '考核分值'
    }
  }
}

Validator.updateDictionary(dictionary)

Validator.extend('phone', {
  messages: {
    zh_CN: field => field + '必须是11位手机号码'
  },
  validate: value => {
    return value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  }
})

4.在相关的标签里面进行使用

<div class="info password">
              <label>密码</label>
              <input
                v-validate="'required|max:50'"
                type="password"
                autocomplete="new-password"
            name="password"//name一定要写 验证字段名，对应validate.js里dictionary中的字段名称
                id="userpsw"
                placeholder="请输入密码"
              //根据是否输入决定是否展示 相关的样式
                :class="errors.has('password')?'va':''"
                v-model="password"
              >
    <span v-show="errors.has('password')" class="validate">{{ errors.first('password') }}        
    </span>
</div>