Vue 的表单校验validate()函数

最新推荐文章于 2025-04-28 10:15:58 发布

辞言绪

最新推荐文章于 2025-04-28 10:15:58 发布

阅读量372

点赞数 4

文章标签：前端 javascript html elementui

本文链接：https://blog.csdn.net/CSDN17607545463/article/details/147478652

版权

学element的时候看到一段代码，主要内容是实现表单提交功能，包括表单校验、提交、处理响应结果以及相应的用户提示。代码和我查询资料以及所带的疑问点如下：

`deptFormRef` 的定义

const dept=ref({name:''});

const deptFormRef = ref();

const save = async () => {
  // 表单校验
  if (!deptFormRef.value) return;
  deptFormRef.value.validate(async (valid) => { // valid 表示是否校验通过，true 表示通过，false 表示不通过
    if (valid) {
      const result = await addApi(dept.value);
      if (result.code) { // 成功
        // 提示信息
        ElMessage.success('操作成功');
        // 关闭对话框
        dialogFormVisible.value = false;
        // 查询
        search();
      } else {
        ElMessage.error(result.msg);
      }
    } else { // 不通过
      ElMessage.error('表单校验不通过');
    }
  });
};

ref() 是 Vue 3 的响应式 API，用于创建一个响应式引用。在这里，它用于存储表单元素的引用。
deptFormRef 用于获取表单组件实例，以便后续进行表单校验。

问题一：为什么const deptFormRef = ref();就能够获取表单组件实例，这里不是直接定于一个空的ref类型吗？

表单校验 ：调用 deptFormRef.value.validate() 方法进行表单校验。这个方法会根据表单的校验规则检查用户输入是否合法。

问题二：validate()函数返回的是true和false，这里他是用什么进行比较得到true或false？

校验通过 ：如果校验通过（valid 为 true），则调用 addApi(dept.value) 发送请求到后端，添加新部门。
- 如果后端返回的成功标志 result.code 存在且为成功状态：
  - 使用 ElMessage.success 显示成功提示。
  - 关闭对话框，通过设置 dialogFormVisible.value = false。
  - 调用 search() 方法刷新部门列表。
- 如果后端返回的不是成功状态，则使用 ElMessage.error 显示错误信息。
校验不通过 ：如果校验不通过（valid 为 false），则显示错误提示 “表单校验不通过”。

表单模板

<el-form :model="dept" :rules="rules" ref="deptFormRef">
  <el-form-item label="部门名称" label-width="80px" prop="name">
    <el-input v-model="dept.name"></el-input>
  </el-form-item>
</el-form>

el-form ：Element Plus 的表单组件，用于创建表单。
- :model="dept" ：将表单数据绑定到 dept 对象。
- :rules="rules" ：定义表单的校验规则。
- ref="deptFormRef" ：将表单组件实例绑定到 deptFormRef，以便在 JavaScript 中获取表单实例。
el-form-item ：表单项组件，表示表单中的一个字段。
- label="部门名称" ：设置表单项的标签文本。
- label-width="80px" ：设置标签的宽度。
- prop="name" ：将表单项与 rules 中的校验规则关联，指定校验规则对应的字段。
el-input ：表单输入框组件，用于输入部门名称。
- v-model="dept.name" ：将输入框的值双向绑定到 dept.name。