veevalidate配置

最新推荐文章于 2025-02-26 17:33:08 发布

o0__0

最新推荐文章于 2025-02-26 17:33:08 发布

阅读量401

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/o0__0/article/details/79468059

本文介绍如何使用VeeValidate进行表单验证配置，包括语言包设置、自定义验证规则及错误消息等。通过具体示例展示了如何实现常见字段如IP地址、电子邮件和手机号码的有效性验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

veevalidate配置

import Vue from 'vue'
import VeeValidate from 'vee-validate';
  //修改语言包
import zh_CN from 'vee-validate/dist/locale/zh_CN';
  //自定义规则
  //import Validator from './assets/js/customValidate';

  //VeeValidate语言包切换,放自定义提示前
Validator.addLocale(zh_CN);

//自定义提示
const dictionary = {
    zh_CN: {
        messages: {
            required: () => '不能为空',
            ip:()=>'请输入有效的IP地址',
            email:()=>'请输入正确格式的邮箱',
        }
    }
};
Validator.updateDictionary(dictionary);

//customValidate.js
import { Validator } from 'vee-validate';

Validator.extend('mobile', {
    messages: {
      zh_CN:field => '手机号码输入不正确',
    },
    validate: value => {
        return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
    }
});

//export default Validator;

//载入
Vue.use(VeeValidate, {
  locale: 'zh_CN',
});