vee-validate使用

1.安装

    npm

    npm install vee-validate --save

2.引入

import Vue from ' vue'

import zh_CN from ' vee-validate/dist/locale/zh_CN';

import VeeValidate, { Validator } from ' vee-validate';

Validator. localize(' zh_CN', zh_CN);//使用中文语言

Vue. use( VeeValidate);

3.使用

< input label=" 注册地址" placeholder=" 注册地址" type=" text" v-model=" formData. address"

   data-vv-as=" 注册地址"  name=" address" v-validate="{ required: true,}" />

< span class=" errTips" v-show=" errors. has(' address')">

  {{ errors. first(' address')}}

</ span>

name->校验的标识, data-vv-as: 绑定对应的别名(设置了默认语言的时候会用到,默认为英文提示en)

v-validate:设置使用的规则 两种方式

v-validate="{ required: true,isMobile: true}"

v-validate="'required|isMobile'"

提醒：错误信息里面的名称通常就是表单的name属性，除非是通过Vue实例传递进来的。

提醒：养成好习惯，给每个field添加name属性，如果没有name属性，validator可能不会对其进行正确的校验

4.添加自定义规则

//添加自定义规则

Validator. extend(' isMobile', {

getMessage: field => " 请输入正确的手机号码",

validate: value => {

return value.length == 11 && / ^ ((13| 14| 15| 17| 18) [0-9]{1} \d{8} ) $/. test( value)

}

});

Validator. extend(' isMobile', ( value, args) => {

// Return a Boolean or a Promise that resolves to a boolean.

});

5.修改内置规则的错误提示

// 修改默认规则的错误提示

const dictionary = {

zh_CN: {

messages: { required: ( name) => ` ${ name }不能为空!`} // name接受aliases(data-vv-as属性)的值.

}

};

const dictionary = {

    en: {

        messages:{

            alpha : () => ' Some English Message '

        }

    },

    zh_CN : {

        messages: {

            alpha: ' 不能为空 '

        }

    }

};

Validator. localize( dictionary);

zh_CN:中文提示(需要引入中文语言包)

自定义规则和修改提示都可以在main.js里添加,也可以在当前vue组件里添加.