Vue2.0表单校验组件vee-validate的使用详解

下面是关于Vue2.0表单校验组件vee-validate的使用详解：

1. 简介

• vee-validate是一款基于Vue2.0开发的表单校验组件，可以方便地在Vue项目中实现表单校验功能。
• 它支持动态校验规则、i18n国际化等特性。

2. 安装

npm install vee-validate

3. 引入

在Vue项目中，需要使用以下代码进行引入：

import { Validator } from 'vee-validate';

4. 配置

• 在使用vee-validate之前，需要对其进行配置，通过Vue.use()方法调用，可配置全局或局部。

• Vue.use(Validator, [config])，其中config为可选项，补充字段为fieldsBagName、errorBagName、delay、locale和dictionary。

示例代码如下：

import { Validator } from 'vee-validate';

const config = {
  locale: 'zh_CN',
  events: 'input|blur',
};

Vue.use(Validator, config);

5. 使用

• 通过v-validate指令对表单元素进行标记，设置校验规则参数。
• v-model获取表单中输入值，通过v-validate:blur对blur事件进行校验触发，如果不合法则显示ErrorMessage。
• 当表单提交时，判断整体校验结果是否正确。

示例代码如下：

<template>
  <form>
    <p>
      用户名：<input type="text" v-model="username" v-validate:blur="'required|alpha_num|min:5|max:10'">
      <span>{{ errors.first('username') }}</span>
    </p>
    <p>
      邮箱：<input type="email" v-model="email" v-validate:blur="'required|email'">
      <span>{{ errors.first('email') }}</span>
    </p>
    <p>
      密码：<input type="password" v-model="password" v-validate:blur="'required|min:6|max:20'">
      <span>{{ errors.first('password') }}</span>
    </p>
    <p>
      <button type="button" @click="handleSubmit">登录</button>
    </p>
  </form>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      email: '',
      password: '',
    };
  },
  methods: {
    handleSubmit () {
      // 通过 this.$validator.errors.any() 判断表单是否存在错误信息
      if (! this.$validator.errors.any()) {
        alert('表单验证通过');
      }
    },
  },
};
</script>

6. 自定义校验规则

• 可通过addMethod方法动态添加自定义规则。
• 第一个参数为规则名称，第二个参数为规则实现的函数。

示例代码如下：

import { Validator } from 'vee-validate';

Validator.extend('username', {
  validate: value => /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test(value),
  getMessage: field => `用户名格式不正确`,
});

Vue.use(Validator);

以上就是关于Vue2.0表单校验组件vee-validate的使用攻略，希望对你有所帮助。