妙用Element-UI 2中ElForm组件，彻底搞定校验

前端

2023-10-04 14:49:37

用 Element-UI 2 ElForm 组件构建强大且易于验证的表单

在当今数字时代，用户体验是应用程序成功的关键因素。Element-UI 2 是一个功能强大的 UI 组件库，其中包括 ElForm 组件，它为构建美观且交互性强的表单提供了便捷的方式。

什么是 ElForm 组件？

ElForm 组件是一个用于创建表单的 Vue.js 组件。它支持广泛的表单元素，例如输入框、单选框、复选框和下拉列表。此外，它提供了丰富的配置选项，允许您轻松定制表单的外观和行为。

触发 ElForm 组件验证

为了确保用户输入数据的准确性，ElForm 组件提供了内置的验证功能。要触发验证，您需要在表单元素上添加 rules 属性并指定验证规则。这些规则可以是字符串或对象，用于指定数据类型、正则表达式或自定义函数。

示例代码

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <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>
import { ref } from 'vue';

export default {
  setup() {
    const form = ref({});
    const rules = {
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
      ],
      age: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
        { type: 'number', message: '年龄必须为数字', trigger: 'blur' },
        { min: 18, message: '年龄必须大于 18 岁', trigger: 'blur' }
      ]
    };

    const submitForm = () => {
      form.value.validate((valid) => {
        if (valid) {
          // 表单验证通过，提交表单
        } else {
          // 表单验证未通过，提示用户修改数据
        }
      });
    };

    return {
      form,
      rules,
      submitForm
    };
  }
};
</script>