Vue3(ts)使用vee-validate表单校验，自定义全局验证规则

注意：这篇文章代码里的样式引入了tailwindcss

目录

安装并引入

定义全局校验规则 

使用

---

安装并引入

yarn add vee-validate

或者 npm i vee-validate --save

或者 pnpm add vee-validate

定义全局校验规则 

在utils目录下新建一个validate.ts文件（这里我使用的是ts，如果用js就创建js文件），内容示例如下： 

import { defineRule } from 'vee-validate';


defineRule('required', (value: string ) => {
    if (!value || !value.length) {
        return '该字段不能为空';
    }

    return true;
});

defineRule('email', (value: string ) => {
    if (!value || !value.length) {
        return '邮箱地址不能为空';
    }
    if (!/[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}/.test(value)) {
        return '请输入有效的邮箱地址';
    }
    return true;
});

 然后在main.ts里引入

import '@/utils/validate'

使用

<template>
      <Form class="flex flex-col text-white w-full px-8" @submit="onLogin()">
        <div class="flex items-center pb-2 relative" style="border-bottom: 1px solid white">
          <label>邮箱</label>
          <Field class="border-none ml-3 bg-transparent focus:outline-none text-primary-smallTitle" name="email" rules="email" type="email" v-model="formState.email"></Field>
          <ErrorMessage name="email" class="error" />
        </div>
        <button class="w-full text-white bg-purple-300 py-3 mt-12 border-none rounded-lg hover:bg-purple-400 cursor-pointer">登录</button>
      </Form>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import { Form, Field, ErrorMessage } from 'vee-validate';


interface UserForm {
  email: string;
}

const formState = reactive<UserForm>({
  email: ''
});

const onLogin =() => {
  console.log(formState);
  
};

</script>
<style scoped>
.error {
  color: red;
  position: absolute;
  bottom: -20px;
  left: 0;
  font-size: 14px;
}
</style>