拯救手残党：史上最全Vue.js el-form组件清除校验提示指南

2023-11-27 20:09:54

清除 el-form 组件中的校验提示

一、概述

在 el-form 组件中，校验提示是至关重要的功能，它可以帮助用户及时发现和更正表单中的错误。但是，有时我们可能需要清除这些校验提示，使表单外观更简洁。本文将介绍两种清除 el-form 校验提示的方法：

二、使用 clearValidate() 方法

clearValidate() 方法是 el-form 组件提供的用于清除表单中所有校验提示的方法。只需在表单提交之前调用此方法即可：

this.$refs['form'].clearValidate();

代码示例：

<template>
  <el-form ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="password"></el-input>
    </el-form-item>
    <el-button type="primary" @click="onSubmit">提交</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 表单验证通过，提交表单
          this.$refs['form'].clearValidate(); // 清除表单中的所有校验提示
          this.$message({
            type: 'success',
            message: '提交成功！'
          });
        } else {
          // 表单验证未通过，提示用户
          this.$message({
            type: 'error',
            message: '表单验证失败，请检查表单中的错误！'
          });
        }
      });
    },
  },
}
</script>

三、使用 resetFields() 方法

resetFields() 方法是 el-form 组件提供的用于重置表单中所有字段的方法。使用此方法时，表单中的所有校验提示也会被清除：

this.$refs['form'].resetFields();

代码示例：

<template>
  <el-form ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="password"></el-input>
    </el-form-item>
    <el-button type="primary" @click="onReset">重置</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    onReset() {
      this.$refs['form'].resetFields(); // 重置表单中的所有字段，包括校验提示
      this.$message({
        type: 'success',
        message: '重置成功！'
      });
    },
  },
}
</script>