vue3邮箱的表单校验

Vue3中对邮箱地址的表单验证通常会利用HTML5的内置`<input>`元素的`pattern`属性结合自定义的JavaScript或Vue的响应式特性来完成。以下是简单的步骤：

1. **HTML**:

<input v-model="email" type="email" placeholder="请输入邮箱" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" required>

这里，`type="email"`确保浏览器自带验证，`pattern`设置了一般邮箱地址的正则表达式，`required`属性表示必填。

2. **Vue**:

<script setup>
import { ref } from 'vue';

const email = ref('');
</script>

<!-- 如果有错误提示 -->
<div v-if="!$v.email.$valid" class="error">请输入有效的邮箱地址</div>

<script>
// 使用Vue的验证规则
const rules = {
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
};

const validate = (rule, value) => {
  if (!value || !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) {
    return false;
  }
};

const formValidations = useForm({
  email,
  rules,
  validationOnBlur: true,
  validate,
});
</script>

这里使用了`v-model`双向绑定数据到输入框，并通过` useForm`库（如` vuelidate`或` Vuelidate`）来进行全局或局部验证。