当前位置：首页 > 前端教程

form表单elementui

2026-03-05 17:28:58前端教程

表单基础用法

Element UI 的表单组件通过 el-form 封装，需配合 el-form-item 和表单控件（如 el-input、el-select）使用。表单需绑定 model 对象，通过 rules 属性实现校验。

<template>
  <el-form :model="formData" :rules="rules" ref="formRef">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="formData.password" 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 {
      formData: { username: '', password: '' },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          console.log('表单验证通过', this.formData);
        }
      });
    }
  }
};
</script>

表单校验规则

校验规则通过 rules 配置，支持多种校验类型：

required：必填项。
min/max：输入长度限制。
pattern：正则校验。
validator：自定义校验函数。

rules: {
  email: [
    { required: true, message: '邮箱不能为空' },
    { type: 'email', message: '请输入正确的邮箱格式' }
  ],
  age: [
    { validator: (rule, value, callback) => {
      if (value < 18) callback(new Error('年龄需大于18岁'));
      else callback();
    }, trigger: 'blur' }
  ]
}

动态表单字段

通过 v-for 动态生成表单字段，需注意每个 el-form-item 的 prop 需与动态绑定的数据路径匹配。

<el-form-item 
  v-for="(item, index) in dynamicFields" 
  :key="index" 
  :label="'字段' + (index + 1)" 
  :prop="'items.' + index + '.value'"
>
  <el-input v-model="item.value"></el-input>
</el-form-item>

表单布局

Element UI 提供 inline（行内表单）、label-position（标签对齐方式）等布局配置：

<el-form :model="formData" label-position="top" inline>
  <el-form-item label="用户名">
    <el-input v-model="formData.username"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input v-model="formData.password"></el-input>
  </el-form-item>
</el-form>

表单重置与清除

通过 resetFields 方法重置表单至初始值，clearValidate 清除校验状态：

methods: {
  resetForm() {
    this.$refs.formRef.resetFields();
  },
  clearValidation() {
    this.$refs.formRef.clearValidate();
  }
}

表单提交与异步校验

提交时可结合 async-validator 进行异步校验，例如验证用户名是否已存在：

submitForm() {
  this.$refs.formRef.validate(async valid => {
    if (valid) {
      try {
        const res = await checkUsername(this.formData.username);
        if (res.exists) {
          this.$message.error('用户名已存在');
        } else {
          // 提交逻辑
        }
      } catch (error) {
        console.error(error);
      }
    }
  });
}

form表单elementui