默认表单校验

在 ElementPlus 中，表单校验是一个非常实用的功能，它可以帮助我们在用户提交表单数据之前对输入内容进行验证，确保数据的完整性和准确性。下面为你详细介绍如何在 ElementPlus 中进行表单校验：

1. 基本使用步骤

（1）引入必要的组件

在你的 Vue 3 项目中，首先要确保已经安装了 ElementPlus，然后引入所需的组件，一般是 ElForm 、 ElFormItem 、 ElInput 等。示例代码如下：

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" type="password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue';
import type { FormRules, FormInstance } from "element-plus/lib";

// 表单数据
const form = ref({
  username: '',
  password: ''
});

// 表单引用
const formRef = ref<FormInstance>();

// 校验规则
const rules = ref<FormRules>({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '用户名长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ]
});

// 提交表单方法
const submitForm = async () => {
  const valid = await formRef.value?.validate();
  if (valid) {
    console.log('表单验证通过，提交数据:', form.value);
  } else {
    console.log('表单验证失败');
  }
};

// 重置表单方法
const resetForm = () => {
  formRef.value?.resetFields();
};
</script>

自定义表单校验

除了基本的校验规则，你还可以自定义校验函数。以下是一个自定义邮箱格式校验的示例：

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue';
import { ElForm } from 'element-plus';

const form = ref({
  email: ''
});

const formRef = ref<InstanceType<typeof ElForm>>();

// 自定义校验函数
const validateEmail = (rule, value, callback) => {
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  if (value === '') {
    callback(new Error('请输入邮箱'));
  } else if (!emailRegex.test(value)) {
    callback(new Error('请输入有效的邮箱地址'));
  } else {
    callback();
  }
};

const rules = ref({
  email: [
    { validator: validateEmail, trigger: 'blur' }
  ]
});

const submitForm = async () => {
  const valid = await formRef.value?.validate();
  if (valid) {
    console.log('表单验证通过，提交数据:', form.value);
  } else {
    console.log('表单验证失败');
  }
};
</script>

在这个示例中，定义了一个 validateEmail 函数作为自定义校验器，它接收三个参数： rule （当前的校验规则）、 value （要校验的值）、 callback （校验结果回调函数）。根据校验逻辑调用 callback 并传入错误信息或直接调用 callback() 表示校验通过。

通过以上方法，你可以在 ElementPlus 中实现灵活的表单校验功能。