vee-validate使用

Vee-Validate表单验证

最新推荐文章于 2025-09-10 19:44:49 发布

weixin_33894640

最新推荐文章于 2025-09-10 19:44:49 发布

阅读量92

点赞数

CC 4.0 BY-SA版权

文章标签： javascript php ViewUI

原文链接：https://my.oschina.net/cqqqqq/blog/1617975

本文介绍如何使用Vee-Validate实现表单验证，并针对中文环境进行国际化配置。通过实例展示了如何设置验证规则及错误消息展示，同时提供了错误信息本地化的详细步骤。

为什么80%的码农都做不了架构师？>>>

https://github.com/baianat/vee-validate

npm install vee-validate --save

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

<input v-validate="{ required: true, email: true }" type="text" name="email">

laravel风格的表单错误提示判断

        <div class="form-group" :class="{'has-error' : errors.has('name')}">
            <label for="name" class="col-md-3 control-label">用户名</label>

            <div class="col-md-7">
                <input id="name" v-validate="{ required: true, min: 4}" v-model="name" type="text" class="form-control" name="name" value="" required autofocus>
                <span class="help-block" v-show="errors.has('name')">{{ errors.first('name')}}</span>
            </div>
        </div>

此时报错信息为 name is requried.

import zh_CN from 'vee-validate/dist/locale/zh_CN';
import VeeValidate, { Validator } from 'vee-validate';

// Localize takes the locale object as the second argument (optional) and merges it.
Validator.localize('zh_CN', zh_CN);

// Install the Plugin.
Vue.use(VeeValidate);

使用汉化包，对报错信息进行修改