微客导航 » 文章资讯 » vee-validate vue 2.0自定义表单验证的实例

vee-validate vue 2.0自定义表单验证的实例

2023-09-08 14:40:24 190

亲测可用

学习vee-validate，首先可以去阅读官方文档，更为详细可以阅读官网中的规则。

一、安装

您可以通过npm或通过CDN安装此插件。

1.NPM

npminstallvee-validate--save

2.CDN

或者你可以使用ES6导入它：

importVuefrom'vue';
importVeeValidatefrom'vee-validate';

Vue.use(VeeValidate);

二、使用中文提示

没有配置过的错误提示默认使用英文显示的，如果想要用中文显示需要我们手动配置一下，首先还是在main.js中引入

importVeeValidate,{Validator}from'vee-validate';
importcnfrom'vee-validate/dist/locale/zh_CN';

Validator.localize('cn',cn);

三、修改默认的错误提示信息

//修改默认错误提示
constdict={
cn:{messages:{required:(name)=>`${name}不能为空!`}}//name接受alias的值.
}
Validator.localize(dict);

demo中修改了required的错误提示信息，因为使用的中文（前面引入的），所以是cn。最后用localize方法加入到Validator中。

四、使用自定义规则

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

extend的第一个参数就是自定义的规则的名字，可以像使用默认规则一样使用它，getMessage中是错误提示信息，validate是验证规则，返回一个布尔值或promise.

完整例子

以上这篇vee-validatevue2.0自定义表单验证的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。