vue vee-validate验证插件使用

vee-validate是vue项目中前端用到的一个表单验证插件

安装

npm install vee-validate --save

引入

假如我们的验证都是放在一个统一的验证文件validate.js中
直接上代码吧

import Vue from "vue";
import VeeValidate, { Validator } from "vee-validate";
// vee-validate配置
const config = {
    aria: true,
    classNames: {},
    classes: false,
    delay: 0,
    dictionary: null,
    errorBagName: "errors", // change if property conflicts
    events: "blur",
    fieldsBagName: "fields",
    i18n: null, // the vue-i18n plugin instance
    i18nRootKey: "validations", // the nested key under which the validation messages will be located
    inject: true,
    // 这一荐项目跟后面的dictionary.zh_CN对应
    locale: "zh_CN",
    validity: false
};
Vue.use(VeeValidate, config);
// 自定义相关提示
const dictionary = {
    zh_CN: {
        // attributes对应form表单的name值
        attributes: {
            loginUsername: "帐号",
            loginPassword: "密码",
            captcha: "图形验证码"
        },
        // 对应各个rule返回的提示信息，这里自定义一些中文提示
        // ${field}对应 attributes各属性的值
        messages: {
            required: field => `${field}不能为空`,
            min: (field, value) => `${field}不能少于${value}位字符`,
            max: (field, value) => `${field}不能多于${value}位字符`,
            length: (field, value) => `${field}必须是${value}位字符`
        }
    }
};
Validator.localize(dictionary);

vue组件中应用

通过v-validate属性绑定各个input输入框，v-validate通过”|”竖线隔开各个验证规则

下面组件使用的是mint-ui框架，登录按钮绑定一个login方法，login方法触发的时候，进行各项验证

<template>
    <div class="login-container">
        <div  class="g-input" ref="loginForm">
            <!-- user -->
            <mt-field label=" " v-model.trim="loginForm.username" placeholder="手机号/用户名/邮箱" class="login-user" v-validate="'required|min:6|max:20'" name="loginUsername" :attr="{maxlength:20}"></mt-field>
            <!-- password -->
            <mt-field label=" " v-model="loginForm.password" placeholder="请输入登录密码" :type="passwordType" class="login-pwd" v-validate="'required|min:6'" name="loginPassword">
                <div :class="toggleClass" @click="togglePassword"></div>
            </mt-field>
            <mt-field label="验证码" v-model.trim="loginForm.code" placeholder="请输入验证码" v-validate="'required|length:6'" name="captcha" :attr="{maxlength:6}">
                <img :src="captcha" height="35px" width="80px" @click="getCode" style="margin-left:10px;">
            </mt-field>
        </div>
    </div>
</template>
<script scoped>
import Vue from "vue";
import { mapGetters } from "vuex";
import "@/utils/security";
import { Spinner } from "mint-ui";
import { Toast } from "mint-ui";
import "@/utils/validate";
Vue.component(Spinner.name, Spinner);
export default {
    name: "Login",
    methods: {
        // 登录
        login() {
            // 先关闭已有的toast，否则会重叠
            this.toast && this.toast.close();
            this.$validator.validate().then(flag => {
                // 验证
                // 验证不通过时，flag返回false,验证通过时，flag返回true
                if (!flag) {
                    const errors = this.$validator.errors;
                    // 这里还可以通过遍历errors对象，完全自定义提示
                    // errors.items.forEach(item => {
                    //     let field = item.field;
                    //     let rule = item.rule;
                    //     // switch (field) {
                    //     //     case "username":
                    //     //         if (rule == "required") {
                    //     //             item.msg = "用户名不能为空";
                    //     //         } else if (rule == "min") {
                    //     //             item.msg = "用户名不能少于6个字符";
                    //     //         } else if (rule == "max") {
                    //     //             item.msg = "用户名不能多于20个字符";
                    //     //         }
                    //     //         break;
                    //     //     case "password":
                    //     //         if (rule == "required") {
                    //     //             item.msg = "密码不能为空";
                    //     //         } else if (rule == "min") {
                    //     //             item.msg = "密码不能少于6位字符";
                    //     //         }
                    //     //         break;
                    //     //     case "code":
                    //     //         if (rule == "required") {
                    //     //             item.msg = "验证码不能为空";
                    //     //         } else if (rule == "length") {
                    //     //             item.msg = "验证码必须是6位字符";
                    //     //         }
                    //     //         break;
                    //     // }
                    // });
                    // console.log(errors);
                    // 从items中取第一个错误，toast方法提示
                    this.toast = Toast(errors.items[0].msg);
                    return;
                }
                // 前端验证通过
                // 提交
                this.$store
                    .dispatch("loginByUsername", {
                        username: this.loginForm.username,
                        password: this.encryptPassword,
                        code: this.loginForm.code
                    })
                    .then(res => {
                       ...
                    });
            });
        },
    }
};
</script>

直接转中文提示的方法

还是在validate.js文件中，这样设置,需要安装vue-i18n依赖

import zh_CN from "vee-validate/dist/locale/zh_CN";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
const i18n = new VueI18n({
    locale: "zh_CN"
});
Vue.use(VeeValidate, {
    i18n,
    i18nRootKey: "validation",
    dictionary: {
        zh_CN
    }
});

内置相关方法

来源网络

after{target} - 比target要大的一个合法日期，格式(DD/MM/YYYY)
alpha - 只包含英文字符
alpha_dash - 可以包含英文、数字、下划线、破折号
alpha_num - 可以包含英文和数字
before:{target} - 和after相反
between:{min},{max} - 在min和max之间的数字
confirmed:{target} - 必须和target一样
date_between:{min,max} - 日期在min和max之间
date_format:{format} - 合法的format格式化日期
decimal:{decimals?} - 数字，而且是decimals进制
digits:{length} - 长度为length的数字
dimensions:{width},{height} - 符合宽高规定的图片
email - 不解释
ext:[extensions] - 后缀名
image - 图片
in:[list] - 包含在数组list内的值
ip - ipv4地址
max:{length} - 最大长度为length的字符
mimes:[list] - 文件类型
min - max相反
mot_in - in相反
numeric - 只允许数字
regex:{pattern} - 值必须符合正则pattern
required - 不解释
size:{kb} - 文件大小不超过
url:{domain?} - (指定域名的)url

官方参考： https://baianat.github.io/vee-validate/