vee-validate 3.2.1

本文"vee-validate": "^3.2.1"

详情请翻阅 官网地址

初衷

vant UI Field 有错误插槽，但是没有校验规则（Form有）。你可以自定义一些规则，if else,你应该懂我的意思吧。关键是不优雅，再加上面试的时候，你总不能这样跟面试官说吧。所以促使有了这篇文章。

安装

npm install vee-validate --save

使用

你可以在main.js中引用，当然最好新建一个文件，单独抽离出来

import { ValidationProvider, extend} from "vee-validate";
import { email } from "vee-validate/dist/rules"; 
// vee-validate没有默认导出规则，使用还要单独导出规则
extend("email", email);

login.vue

<ValidationProvider rules="email" v-slot="{ errors }">
     <van-field
         v-model="form.account"
         required
         label="邮箱"
         placeholder="请输入用户名"
         :error-message="errors[0]"
     />
</ValidationProvider>

输入一个符合邮箱的格式

汉化

import { ValidationProvider, extend, localize } from "vee-validate";
import { email } from "vee-validate/dist/rules";
import zh_CN from "vee-validate/dist/locale/zh_CN.json";
localize("zh_CN", zh_CN);
extend("email", email);

ps ：ts默认不识别json
shims-vue.d.ts

declare module "*.json" {
  const value: any;
  export default value;
}

修改官网规则

{_field_}规则我暂时不知道怎么去掉，有大佬知道望告知

我用如下方式替代，重置

extend("email", {...email,message:"请输入有效的邮箱格式"});

自定义规则

extend("QQ", {
  message: "请输入有效的QQ",
  validate: value => {
    return /^[1-9][0-9]{4,14}$/.test(value);
  }
});

多层校验

验证三组，写三个，最好有层级关系

<ValidationProvider rules="rule1| reul2 | rule3" v-slot="{ errors }">

表单提交

<template>
  <ValidationObserver v-slot="{ invalid }"> // ValidationObserver 要注册一下
    <form @submit.prevent="onSubmit">
      <ValidationProvider name="E-mail" rules="required|email" v-slot="{ errors }">
        <input v-model="email" type="email">
        <span>{{ errors[0] }}</span>
      </ValidationProvider>
      <button type="submit" :disabled="invalid">Submit</button>
    </form>
  </ValidationObserver>
</template>

<script>
export default {
  data: () => ({
    email: '',
    firstName: '',
    lastName: ''
  }),
  methods: {
    onSubmit () {
      alert('Form has been submitted!');
    }
  }
};
</script>

这样，对于日常的开发就够了，详情请看官网。