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

亲测可用

学习vee-validate,首先可以去阅读

,更为详细可以阅读官网中的

一、安装

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

1. NPM

rush:js;"> npm install vee-validate --save

2. CDN

rush:js;">

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

rush:js;"> import Vue from 'vue'; import veevalidate from 'vee-validate';

Vue.use(veevalidate);

二、使用中文提示

没有配置过的错误提示认使用英文显示的,如果想要用中文显示需要我们手动配置一下,首先还是在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;">

以上这篇vee-validate vue 2.0自定义表单验证的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

相关文章

可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
<el-form-item label="入库类型" ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...