亲测可用
学习vee-validate,首先可以去阅读
,更为详细可以阅读官网中的
。
一、安装
您可以通过npm或通过CDN安装此插件。
1. NPM
rush:js;">
npm install vee-validate --save
2. CDN
rush:js;">
或者你可以使用ES6导入它:
二、使用中文提示
没有配置过的错误提示默认使用英文显示的,如果想要用中文显示需要我们手动配置一下,首先还是在main.js中引入
rush:js;">
import veevalidate,{Validator} from 'vee-validate';
import cn from 'vee-validate/dist/locale/zh_CN';
Validator.localize('cn',cn);
三、修改默认的错误提示信息
`${name}不能为空!`}} // name接受alias的值.
}
Validator.localize(dict);
demo中修改了required的错误提示信息,因为使用的中文(前面引入的),所以是cn。最后用localize方法加入到Validator中。
四、使用自定义规则
"请输入正确的手机号码",validate: value => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
});
extend的第一个参数就是自定义的规则的名字,可以像使用默认规则一样使用它,getMessage中是错误提示信息,validate是验证规则,返回一个布尔值或promise.
完整例子
rush:js;">
irst('phone') }}
以上这篇vee-validate vue 2.0自定义表单验证的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。
原文地址:https://www.jb51.cc/vue/30658.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。