Vue3 Element Plus el-form表单组件示例详解

2023年6月10日下午3:56 • JavaScript

下面是“Vue3 Element Plus el-form表单组件示例详解”的完整攻略：

1. 简介

Vue3 Element Plus是一套基于Vue 3和Element Plus组件库的前端解决方案。它提供了丰富的UI组件和工具，用于开发高质量的Web应用程序。

其中，el-form表单组件是Element Plus中的一个常用组件之一，用于收集和验证用户输入的数据。它可以根据表单的结构自动生成表单组件，并提供一系列的事件和属性，方便我们对表单进行操作和管理。

2. 示例说明

为了更好地理解和使用el-form表单组件，我们提供以下两个示例说明：

示例1：基本用法

在这个示例中，我们将展示如何使用el-form组件来创建一个简单的登录表单。该表单包括两个字段：用户名和密码。我们将使用v-model指令和el-input组件来绑定表单的数据和输入框。

<template>
  <el-form ref="loginForm" :model="loginForm" label-width="80px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="loginForm.password" placeholder="请输入密码" type="password"></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 {
        loginForm: {
          username: '',
          password: ''
        }
      }
    },
    methods: {
      submitForm() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            // 提交表单
          } else {
            return false;
          }
        });
      }
    }
  }
</script>

在上面的示例中，我们首先定义了一个el-form组件，并使用v-model指令来绑定数据模型。同时，我们也设置了表单的“label-width”属性，以设置表单标签的宽度。

接下来，我们使用el-form-item组件来定义表单的每个字段，包括“用户名”和“密码”。在el-form-item中，我们使用el-input组件来创建输入框，并使用v-model指令将其绑定到数据模型中。

最后，我们使用el-button组件创建一个提交表单的按钮，并在点击事件中调用“validate”方法来验证表单。如果表单验证通过，则可以提交表单数据到服务器。

示例2：自定义表单校验器

在这个示例中，我们将展示如何使用自定义的表单校验器来验证el-form表单的数据。具体来说，我们将创建一个简单的表单，其中包含一个“手机号”字段，我们将使用自定义的校验器来验证该字段的数据格式。

<template>
  <el-form ref="registerForm" :model="registerForm" :rules="registerRules" label-width="80px">
    <el-form-item label="手机号" prop="mobile">
      <el-input v-model="registerForm.mobile" placeholder="请输入手机号"></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 {
        registerForm: {
          mobile: ''
        },
        registerRules: {
          mobile: [
            { required: true, message: '手机号不能为空', trigger: 'blur' },
            { validator: this.checkMobile, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      submitForm() {
        this.$refs.registerForm.validate(valid => {
          if (valid) {
            // 提交表单
          } else {
            return false;
          }
        });
      },
      checkMobile(rule, value, callback) {
        if (!value) {
          callback(new Error('手机号不能为空'));
        } else if (!/^1[34578]\d{9}$/.test(value)) {
          callback(new Error('手机号格式不正确'));
        } else {
          callback();
        }
      }
    }
  }
</script>

与示例1类似，我们首先定义了一个el-form组件，并使用v-model指令来绑定数据模型。同时，我们也设置了表单的“label-width”属性，以设置表单标签的宽度。

不同之处在于，在这个示例中，我们将创建一个叫做“registerRules”的对象，用于定义表单的验证规则。其中，“mobile”字段的校验规则包括两个部分：1）必填；2）自定义校验器。

接下来，我们定义了一个“checkMobile”方法，用于实现自定义的校验规则。在这个方法中，我们通过正则表达式来验证手机号的格式，并根据验证结果调用回调函数。如果验证通过，则不需要传递任何参数给回调函数；如果未通过，则需要传递一个错误提示信息。

最后，在组件的“submitForm”方法中，我们调用了表单的“validate”方法，并在回调函数中判断表单是否通过验证。如果验证通过，则可以提交表单数据到服务器。