正文

掌握Element UI：轻松实现多个表单提交与数据验证

/0 浏览量
0411

Element UI 是一个基于 Vue 2.0 的前端UI库，它提供了丰富的组件，包括按钮、表单、表格、弹窗等，使得开发者可以快速构建美观且功能齐全的网页界面。在Element UI中，表单组件是非常实用的，它可以帮助我们轻松实现数据的收集和验证。本文将详细介绍如何在Element UI中实现多个表单的提交与数据验证。

一、Element UI 表单组件简介

在Element UI中，表单组件主要分为以下几个部分：

  • el-form：表单的容器，用于包裹所有的表单项。
  • el-form-item：表单项的容器，每个表单项都需要包裹在el-form-item中。
  • el-input、el-select、el-radio、el-checkbox等：各种输入组件，用于收集用户输入的数据。

二、多个表单的创建

在Element UI中，创建多个表单非常简单。以下是一个示例：

<template>
  <div>
    <el-form :model="form1" ref="form1">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form1.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form1.password"></el-input>
      </el-form-item>
      <el-button type="primary" @click="submitForm('form1')">提交</el-button>
    </el-form>
    <el-form :model="form2" ref="form2" style="margin-top: 20px;">
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form2.email"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form2.phone"></el-input>
      </el-form-item>
      <el-button type="primary" @click="submitForm('form2')">提交</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form1: {
        username: '',
        password: ''
      },
      form2: {
        email: '',
        phone: ''
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

在这个例子中，我们创建了两个表单，分别对应form1和form2。每个表单都包含用户名、密码、邮箱和手机号四个字段。

三、数据验证

Element UI 提供了丰富的验证规则，我们可以通过el-form-item的prop属性来指定验证规则。以下是一个示例：

<el-form-item label="用户名" prop="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 15, message: '用户名长度在 3 到 15 个字符', trigger: 'blur' }]">
  <el-input v-model="form1.username"></el-input>
</el-form-item>

在这个例子中，我们为用户名字段设置了两个验证规则：必填和长度限制。

四、总结

通过Element UI，我们可以轻松实现多个表单的创建和数据验证。只需按照上述步骤，就可以快速构建出美观且功能齐全的表单界面。希望本文能帮助你更好地掌握Element UI的表单组件。

-- 展开阅读全文 --