资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

vee-validatevue2.0自定义表单验证的实例

亲测可用

成都创新互联主营青铜峡网站建设的网络公司,主营网站建设方案,重庆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自定义表单验证的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持创新互联。


分享文章:vee-validatevue2.0自定义表单验证的实例
分享路径:http://cdkjz.cn/article/pggdcp.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220