Vee Validate 基本使用

一、前言

以前在项目中主要使用的是 Element-ui ，这里用到的数据验证主要是在 form 中绑定 rules，进行一些数据的验证。

最近在新的项目中接触到 Vee Validate 这个验证数据的。

二、导入基本使用

1、添加包

# install with npm
npm install vee-validate --save

# install with yarn
yarn add vee-validate

2、在项目中引入

（这里是用 Vue）

// VeeValidate
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)

这样简单配置后就可以使用了。

3、简单验证

    <vs-row class="py-4" vs-w="12">
      <vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="12">
        <vs-input v-validate="'required|email'" v-model="email" style="95%" type="email" label-placeholder="Email" name="email" />
      </vs-col>
    </vs-row>

上面代码中使用了 v-validate 指令绑定了对应的验证规则（required 和 email 是自带的验证规则）

下面是在提交的时候看是否验证通过

    handleSignUpClick() {
      const _this = this
      this.$validator.validateAll().then(result => {
        if (result) {
　　　　　// 验证通过后具体操作
　　　　　}
      })
    }

基本的用法这些就可以了，下面介绍些其他用法。

三、中文配置

这个库默认的错误提示都是英文的，下面是进行中文的配置。

直接全局进行配置

import VeeValidate, {Validator} from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN';
Vue.use(VeeValidate, {
  dictionary: {
    zh_CN: zh_CN
  }
});
Validator.localize('zh_CN');

这样在提示错误的时候就是中文了。

四、自定义验证规则和错误提示

在实际使用中，会遇到一些定制性的验证、提示等功能。

Vee Validate 支持自定义定义这些。

// Vue 组件中使用
<script>
const validate = {
  custom: {
    code: {
      required: () => '验证码不能为空', // 写法1
      length: '验证码必须为6位数字'// 写法2
    }
  }
}

export default {
  mounted() {
    // 加载自定义错误提示
    this.$validator.localize('zh_CN', validate)
    // 添加自定义验证规则
    this.$validator.extend('mobile', {
      getMessage: field => '请输入正确手机号',
      validate: value => {
        return /^((13|14|15|17|18)[0-9]{1}d{8})$/.test(value)
      }
    })
  }
}

从上面看出，加载自定义错误提示是通过 locallize 函数加载的，添加自定义规则是通过 extent。

上面介绍的这些在日常项目中基本都够用了。

只是在添加自定义的验证规则时，主要还是靠正则表达式才能达到效果。

下面是项目中用到的密码验证规则（拿来参考）

// 验证密码规则    
this.$validator.extend('passwordrule', {
      getMessage: field => '密码需要是一个至少包含一个大写字母、小写字母、数字的字符串',
      validate: value => {
        return /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[^]{8,16}$/.test(value)
      }
    })

 最后

Vee Validate 官方文档 

借鉴文章