Vue+Element大型表单解决方案（6）——自动标识

前端

2023-09-07 13:51:24

概述

大型表单在许多应用中都很常见，例如电子商务网站、客户关系管理（CRM）系统和企业资源规划（ERP）系统。这些表单通常包含大量字段，需要用户输入大量信息。为了确保表单填写准确无误，需要对表单进行验证，以确保用户输入的数据符合一定的规则。

自动标识功能

自动标识功能是一种帮助用户快速发现表单错误的有效方法。当用户提交表单时，系统会自动检查表单中所有字段的值，并将不符合规则的字段标记出来。这样，用户就可以立即看到哪些字段需要修改，从而避免提交不正确的表单。

实现自动标识功能

要实现自动标识功能，需要在表单中使用 Element UI 的 Form 和 Field 组件。Form 组件负责管理表单的整体状态，Field 组件则负责管理单个表单字段的状态。

在 Form 组件中，可以使用 rules 属性来指定表单字段的验证规则。例如，要验证某个字段是否为空，可以使用以下规则：

{ required: true, message: '该字段不能为空', trigger: 'blur' }

在 Field 组件中，可以使用 v-model 指令来绑定表单字段的值。当用户修改表单字段的值时，v-model 指令会自动更新表单字段的状态。

当表单提交时，Form 组件会自动检查表单中所有字段的值，并将不符合规则的字段标记出来。可以使用 error 属性来获取表单中所有错误字段的列表。

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="120px">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model="form.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: ''
      },
      rules: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '年龄不能为空', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过
        } else {
          // 表单验证失败
        }
      })
    }
  }
}
</script>