ElementUi中form组件使用中的注意事项及巧妙用法

2023-10-19 01:49:03

1. form组件的基本用法

form组件的基本用法非常简单，只需在标签中包裹需要验证的表单元素即可，如：

<el-form :model="form">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="form.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

在上面的代码中，<el-form>标签包裹了需要验证的表单元素，<el-form-item>标签是表单项的容器，每个<el-form-item>标签内包含一个<label>标签和一个或多个表单元素，<el-input>标签是用于输入文本的表单元素。当用户点击<el-button>标签时，<el-form>组件会自动收集表单数据并触发submitForm方法。

2. form组件的验证规则

form组件提供了丰富的表单验证规则，可以帮助开发者快速对表单数据进行验证，如：

required：必填字段
type：字段类型，如string、number、date等
min：最小值
max：最大值
pattern：正则表达式
message：验证失败时的提示信息

这些验证规则可以在<el-form-item>标签中使用，如：

<el-form-item label="用户名" prop="username">
  <el-input v-model="form.username" :rules="[{ required: true, message: '用户名不能为空' }]"></el-input>
</el-form-item>

在上面的代码中，<el-form-item>标签中添加了rules属性，该属性的值是一个数组，数组中的每一个元素都是一个验证规则对象。当用户填写表单时，form组件会自动对表单数据进行验证，如果某个字段不符合验证规则，则会显示相应的提示信息。

3. form组件的提交

当用户点击<el-button>标签提交表单时，form组件会自动收集表单数据并触发submitForm方法。开发者可以在submitForm方法中对表单数据进行进一步处理，如将表单数据发送到服务器。

submitForm() {
  this.$refs['form'].validate((valid) => {
    if (valid) {
      // 表单验证通过，将表单数据发送到服务器
      this.$http.post('/api/submitForm', this.form).then(() => {
        this.$message.success('提交成功');
      }).catch((error) => {
        this.$message.error('提交失败');
      });
    } else {
      // 表单验证失败，提示用户填写正确的信息
      this.$message.error('请填写正确的信息');
    }
  });
}

在上面的代码中，<el-form>组件的ref属性设置为form，这样就可以在submitForm方法中通过this.$refs['form']获取form组件的实例。然后调用validate方法对表单数据进行验证，如果表单数据通过验证，则将表单数据发送到服务器，否则提示用户填写正确的信息。

4. form组件的注意事项

在使用form组件时，需要注意以下几点：