当前位置： 代码网 > it编程>编程语言>Javascript > 【Element入门】3、Element UI 表单组件详解

【Element入门】3、Element UI 表单组件详解

2024年08月01日 • Javascript •我要评论
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。

【element入门】表单组件详解

element入门系列导航

【element入门】1、element ui 介绍与安装
【element入门】2、element ui 的基本使用
【element入门】3、element ui 表单组件详解（本文）
【element入门】4、element ui 布局组件详解
【element入门】5、element ui 导航组件详解
【element入门】6、element ui 数据展示组件详解
【element入门】7、element ui 反馈组件详解
【element入门】8、element ui 自定义主题

前言

表单是 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 的其他组件和高级功能，敬请期待！希望这篇文章对你有所帮助，祝你在前端开发的道路上越走越远！

赞 (0)

相关文章:

版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。

发表评论

验证码：
最近更新的文章
推荐阅读
大家感兴趣的文章
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱：2386932994@qq.com