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

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;
});

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>