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

超、凢脫俗 2022-06-02 00:59 216阅读 0赞

# vee-validate vue 2.0自定义表单验证 #

##### 亲测可用 #####

#### 学习vee-validate，首先可以去阅读[官方文档][Link 1]，更为详细可以阅读官网中的[规则][Link 2]。 ####

## 一、安装 ##

您可以通过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.

## 完整例子 ##

<template> <div class=""> <form @submit.prevent="applyCoupon" class=""> <label class="">手机号</label> <p class=""> <input v-model="phone" name="phone" :class="" type="text" placeholder="请输入手机号"><br> <span v-show="errors.has('phone')" class="error">{ { errors.first('phone') }}</span> </p> <label class="">姓名</label> <p class=""> <input v-model="name" name="name" :class="" type="text" placeholder="请输入手机号"><br> <span v-show="errors.has('name')" class="error">{ { errors.first('name') }}</span> </p> <p class=""> <button type="submit" class="" name="button">确定</button> </p> </form> </div> </template> <script> 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}不能为空!`}} } Validator.localize(dict); export default { name: 'coupon-example', validator: null, data: () => ({ phone: '', name: '', errors: null }), computed: {}, methods: { applyCoupon() { // 提交执行函数 this.validator.validate('name', this.name).then((result) => this.discounted = result); this.validator.validate('phone', this.phone).then((result) => this.discounted = result); } }, created() { this.validator = new Validator({}); Validator.extend('mobile', { getMessage: field => "请输入正确的手机号码", validate: value => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value) }); Validator.extend('name', { getMessage: field => "请输入正确姓名", validate: value => value == 'tom' }); this.validator.attach({name: 'name', rules: 'required|name', alias: '姓名'}); this.validator.attach({name: 'phone', rules: 'required|mobile', alias: '手机'}); // 使用attach以FieldOptions作为其第一个参数的方法添加验证规则。 this.$set(this, 'errors', this.validator.errors); } }; </script> <style> .error { font-size: 12px; color: #ff1c13; } </style>

> 第一次使用vee-validate，勿喷。有什么好的建议请联系博主邮箱  
> `15517072173@163.com`

[Link 1]: http://vee-validate.logaretm.com/index.html#about%20%E5%AE%98%E6%96%B9%E6%96%87%E6%A1%A3
[Link 2]: http://vee-validate.logaretm.com/index.html#about