【Element入门】表单组件详解

一只小爪磕
85 阅读5分钟

【Element入门】表单组件详解

前言

表单是 Web 应用中最常见的交互形式之一，几乎每个项目都会涉及到表单的创建和处理。Element UI 提供了强大的表单组件，可以帮助我们快速构建表单并实现复杂的表单验证和提交逻辑。本篇文章将详细介绍 Element UI 中的 Form 组件的基本使用方法，以及如何实现表单验证与提交。

Form组件基本使用

创建基础表单

Element UI 提供的 el-form 组件可以帮助我们快速创建表单。在 el-form 组件中，我们可以使用 el-form-item 组件来定义表单项，el-input 等其他组件来实现具体的表单控件。

<template>
  <div id="app">
    <el-form :model="form" label-width="120px">
      <el-form-item label="Username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="Password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: ''
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('Form data:', this.form);
    }
  }
};
</script>

在上述代码中，我们创建了一个包含用户名、电子邮件和密码输入框的表单，并在点击提交按钮时输出表单数据。

表单布局

在 el-form-item 组件中，我们可以通过 label 属性设置表单项的标签，通过 label-width 属性设置标签的宽度。Element UI 还提供了多种布局方式，如行内布局和分栏布局等。

行内布局

我们可以通过设置 inline 属性来实现行内布局：

<template>
  <div id="app">
    <el-form :model="form" inline label-width="120px">
      <el-form-item label="Username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
分栏布局

我们可以使用 el-row 和 el-col 组件来实现分栏布局：

<template>
  <div id="app">
    <el-form :model="form" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="First Name">
            <el-input v-model="form.firstName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Last Name">
            <el-input v-model="form.lastName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="Email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      form: {
        firstName: '',
        lastName: '',
        email: ''
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('Form data:', this.form);
    }
  }
};
</script>

表单验证与提交

基本表单验证

Element UI 提供了强大的表单验证功能。我们可以通过在 el-form-item 组件中使用 rules 属性来定义验证规则，并通过 el-form 组件的 rules 属性将这些规则应用到表单中。

<template>
  <div id="app# 【Element入门】表单组件详解

## 前言

表单是 Web 应用中最常见的交互形式之一，几乎每个项目都会涉及到表单的创建和处理。Element UI 提供了强大的表单组件，可以帮助我们快速构建表单并实现复杂的表单验证和提交逻辑。本篇文章将详细介绍 Element UI 中的 `Form` 组件的基本使用方法，以及如何实现表单验证与提交。

## Form组件基本使用

### 创建基础表单

Element UI 提供的 `el-form` 组件可以帮助我们快速创建表单。在 `el-form` 组件中，我们可以使用 `el-form-item` 组件来定义表单项，`el-input` 等其他组件来实现具体的表单控件。

```vue
<template>
  <div id="app">
    <el-form :model="form" label-width="120px">
      <el-form-item label="Username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="Password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: ''
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('Form data:', this.form);
    }
  }
};
</script>

在上述代码中，我们创建了一个包含用户名、电子邮件和密码输入框的表单，并在点击提交按钮时输出表单数据。

表单布局

在 el-form-item 组件中，我们可以通过 label 属性设置表单项的标签，通过 label-width 属性设置标签的宽度。Element UI 还提供了多种布局方式，如行内布局和分栏布局等。

行内布局

我们可以通过设置 inline 属性来实现行内布局：

<template>
  <div id="app">
    <el-form :model="form" inline label-width="120px">
      <el-form-item label="Username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
分栏布局

我们可以使用 el-row 和 el-col 组件来实现分栏布局：

<template>
  <div id="app">
    <el-form :model="form" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="First Name">
            <el-input v-model="form.firstName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Last Name">
            <el-input v-model="form.lastName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="Email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      form: {
        firstName: '',
        lastName: '',
        email: ''
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('Form data:', this.form);
    }
  }
};
</script>

表单验证与提交

基本表单验证

Element UI 提供了强大的表单验证功能。我们可以通过在 el-form 组件中定义验证规则，并将这些规则应用到表单项 (el-form-item) 上。以下示例展示了如何为表单项添加基本的验证规则：

<template>
  <div id="app">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="Username" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Email" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: 'Please input username', trigger: 'blur' }
        ],
        email: [
          { required: true, message: 'Please input email', trigger: 'blur' },
          { type: 'email', message: 'Please input correct email', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: 'Please input password', trigger: 'blur' },
          { min: 6, message: 'Password must be at least 6 characters', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

在上述代码中：

  • rules 对象定义了每个表单项的验证规则。
  • el-form-item 组件的 prop 属性与 rules 对象中的字段对应。
  • this.$refs.form.validate 方法用于触发验证，验证通过时执行提交逻辑。

自定义验证规则

除了内置的验证规则外，Element UI 还支持自定义验证规则。我们可以通过定义一个函数来实现复杂的验证逻辑。以下示例展示了如何添加自定义验证规则：

<template>
  <div id="app">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="Username" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item label="Confirm Password" prop="confirmPassword">
        <el-input type="password" v-model="form.confirmPassword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      form: {
        username: '',
        password: '',
        confirmPassword: ''
      },
      rules: {
        username: [
          { required: true, message: 'Please input username', trigger: 'blur' }
        ],
        password: [
          { required: true, message: 'Please input password', trigger: 'blur' },
          { min: 6, message: 'Password must be at least 6 characters', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: 'Please confirm password', trigger: 'blur' },
          { validator: this.validateConfirmPassword, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    validateConfirmPassword(rule, value, callback) {
      if (value === '') {
        callback(new Error('Please confirm password'));
      } else if (value !== this.form.password) {
        callback(new Error('Passwords do not match'));
      } else {
        callback();
      }
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

在上述代码中，我们为 confirmPassword 字段添加了一个自定义验证规则 validateConfirmPassword。该函数检查确认密码是否为空，以及是否与密码字段的值匹配。

表单提交

在表单验证通过后，我们可以执行表单提交操作。这通常涉及到将表单数据发送到服务器。以下示例展示了如何在验证通过后提交表单数据：

<template>
  <div id="app">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="Username" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Email" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'App',
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: 'Please input username', trigger: 'blur' }
        ],
        email: [
          { required: true, message: 'Please input email', trigger: 'blur' },
          { type: 'email', message: 'Please input correct email', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: 'Please input password', trigger: 'blur' },
          { min: 6, message: 'Password must be at least 6 characters', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          axios.post('/api/register', this.form)
            .then(response => {
              console.log('Form data submitted:', response.data);
            })
            .catch(error => {
              console.error('Form submission error:', error);
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

在上述代码中，我们使用 axios 库发送表单数据到 /api/register 端点。只有在验证通过 (valid 为 true) 的情况下，才会执行提交操作。

表单重置

有时我们需要在用户提交表单后重置表单数据。Element UI 提供了 resetFields 方法来重置表单数据和验证状态。以下示例展示了如何重置表单：

<template>
  <div id="app">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="Username" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Email" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
        <el-button @click="onReset">Reset</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: 'Please input username', trigger: 'blur' }
        ],
        email: [
          { required: true, message: 'Please input email', trigger: 'blur' },
          { type: 'email', message: 'Please input correct email', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: 'Please input password', trigger: 'blur' },
          { min: 6, message: 'Password must be at least 6 characters', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    onReset() {
      this.$refs.form.resetFields();
    }
  }
};
</script>

在上述代码中，我们添加了一个名为 onReset 的方法，该方法调用 this.$refs.form.resetFields() 来重置表单数据和验证状态。同时，我们在表单底部添加了一个重置按钮，点击该按钮时会触发 onReset 方法。

完整表单示例

为了更直观地展示表单的验证、提交和重置功能，以下是一个完整的表单示例，包含用户名、电子邮件、密码和确认密码字段，并实现了简单的提交和重置逻辑：

<template>
  <div id="app">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="Username" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Email" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item label="Confirm Password" prop="confirmPassword">
        <el-input type="password" v-model="form.confirmPassword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
        <el-button @click="onReset">Reset</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: '',
        confirmPassword: ''
      },
      rules: {
        username: [
          { required: true, message: 'Please input username', trigger: 'blur' }
        ],
        email: [
          { required: true, message: 'Please input email', trigger: 'blur' },
          { type: 'email', message: 'Please input correct email', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: 'Please input password', trigger: 'blur' },
          { min: 6, message: 'Password must be at least 6 characters', trigger: 'blur' }
        ],
        confirmPassword: [
         ```vue
          { required: true, message: 'Please confirm password', trigger: 'blur' },
          { validator: this.validateConfirmPassword, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    validateConfirmPassword(rule, value, callback) {
      if (value === '') {
        callback(new Error('Please confirm password'));
      } else if (value !== this.form.password) {
        callback(new Error('Passwords do not match'));
      } else {
        callback();
      }
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    onReset() {
      this.$refs.form.resetFields();
    }
  }
};
</script>

在这个示例中，我们实现了以下功能：

  1. 表单验证：每个表单项都有相应的验证规则，例如用户名和电子邮件是必填项，密码至少需要 6 个字符，确认密码需要与密码匹配。
  2. 表单提交：点击提交按钮时，会触发 onSubmit 方法，该方法调用 this.$refs.form.validate 进行表单验证。如果验证通过，则执行提交逻辑（这里简单地弹出一个提示）。
  3. 表单重置：点击重置按钮时，会触发 onReset 方法，该方法调用 this.$refs.form.resetFields 重置表单数据和验证状态。

结语

通过本章的学习，我们详细了解了 Element UI 中 el-form 组件的基本使用方法、表单验证以及表单提交和重置的实现方法。Element UI 提供了简洁而强大的表单功能，帮助我们快速构建健壮的表单系统。

在接下来的章节中，我们将继续深入探讨 Element UI 的其他组件和高级功能，敬请期待！希望这篇文章对你有所帮助，祝你在前端开发的道路上越走越远！

avatar
文章
阅读
粉丝