扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
亲测可用
成都创新互联主营青铜峡网站建设的网络公司,主营网站建设方案,重庆APP开发,青铜峡h5小程序定制开发搭建,青铜峡网站营销推广欢迎青铜峡等地区企业咨询
学习vee-validate，首先可以去阅读官方文档，更为详细可以阅读官网中的规则。
一、安装
您可以通过npm或通过cdn安装此插件。
1. NPM
npm install vee-validate --save
2. CDN
或者你可以使用ES6导入它：
import Vue from 'vue'; import VeeValidate from 'vee-validate'; Vue.use(VeeValidate);
二、使用中文提示
没有配置过的错误提示默认使用英文显示的，如果想要用中文显示需要我们手动配置一下，首先还是在main.js中引入
import VeeValidate, {Validator} from 'vee-validate';
import cn from 'vee-validate/dist/locale/zh_CN';
Validator.localize('cn', cn);
三、修改默认的错误提示信息
// 修改默认错误提示
const dict = {
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-validate vue 2.0自定义表单验证的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持创新互联。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网