Vee-validate组件使用

2017-06-14 本文已影响1026人王宝花

项目地址

vee-validate

写在前面

笔者在写项目时，使用了vue-cli构建工具，默认使用了vue-router，笔者在项目中也使用到了其他组件，element-ui、vuex、vee-validate。

vee-validate组件与其他组件使用时，可能会出现一个问题computed property fields already taken，我的第一篇文章讲到了，如果不巧你也遇到了，请移步解决方案。

为什么选择这个？

因为笔者PHP出身，Laravel忠实粉丝。vee-validate的语法借鉴于laravel的validate组件。
比起vue-validate而言，它更加迷你、实用。（这个是在网上说的，笔者没有亲自去使用，列位看官可以亲自去实践）

让我们来进行实战吧

在这里，基本的使用笔者就不再说明，这里只是说几点，笔者在项目中使用的到的几点。

本地化实战

提示信息本地化
在没有进行本地化之前，你的提示信息是这样的：

image.png

在使用之后，你的效果是这样的:

aaa

可以看到，本地化的提示信息是多么舒服，这是在生产环境我们需要的提示信息。

其实在官方文档中，已经给我们提供了本地化的代码，如下所示：

// 加载vee-validate下面本地化文件zh_CN（中文提示信息），默认是加载en（英文提示信息）
import zh_CN from 'vee-validate/dist/locale/zh_CN';
import VeeValidate, { Validator } from 'vee-validate';

// 添加一个本地化文件
Validator.addLocale(zh_CN);

// 让Vue使用VeeValidate插件，并且使用本地化文件zh_CN
Vue.use(VeeValidate, {
  locale: 'zh_CN'
});

这样做了，基本上就可以了。

属性本地化
在项目中，我们可能需要业务需要去定义字段，而这些字段可能是默认字段不存在的，比如beigin_time开始时间，而在本地化后，他不会自动解析为开始时间,那么它的报错信息就是这样的

begin_time 是必填选项

这样显然是不友好的，这就需要我们自己手动进行更改，如何更改呢？手册也给了我们相关demo。

import { Validator } from 'vee-validate';
const dictionary = {
  zh_CN: {
    attributes: {
      begin_time: '开始时间'
    }
  },};
// 组件的字典进行更新
Validator.updateDictionary(dictionary);

在我们完成上面代码后，它的显示就是这样的:

开始时间 是必填选项

显然，这才是我们需要的。

自定义规则实战

在vee-validate组件中只有20多条验证规则，不过也好，太过臃肿会导致文件过大。那么这种情况下，我们很可能会自己写验证规则，来实现我们要的验证。幸运的是，官方手册也给我们提供了相关方法。以下是笔者写的一个demo：

# validate/dictionary.js
export const isMobile = {
    messages: {
        zh_CN: '手机 格式错误',
    },
    validate: (value, args) => {
        return value.length === 11 && /^1[3-8]{1}\d{9}$/.test(value);
    }
};

# main.js
import * as rules from './validate/rules';
Validator.extend('mobile', rules.isMobile);// 添加手机号验证规则

这时，我们就可以为在表单中进行验证了。

我的HTML文件是这样的

<div class="login-container">
        <el-form autoComplete="on" v-model="loginForm" label-position="left" label-width="0px"
                 class="card-box login-form">
            <el-form-item>
                <el-input v-validate="'required|mobile'" v-model="loginForm.tel"
                          :class="{'input': true, 'is-danger': errorsBag.has('tel') }" name="tel" type="text"
                          placeholder="Account"></el-input>
                <span v-show="errorsBag.has('tel')" class="el-form-item__error">{{ errorsBag.first('tel') }}</span>
            </el-form-item>

            <el-form-item>
                <el-input v-validate="'required|min:6'" v-model="loginForm.password"
                          :class="{'input': true, 'is-danger': errorsBag.has('password') }" name="password" type="password"
                          placeholder="Password"></el-input>
                <span v-show="errorsBag.has('password')" class="el-form-item__error">{{ errorsBag.first('password') }}</span>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" style="width:100%;">
                    登录
                </el-button>
            </el-form-item>
        </el-form>
    </div>