当前位置: article > 正文

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

作者：神奇cpp | 2024-07-19 05:10:50

踩

element 组件

【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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

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

表单布局

在 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

分栏布局

我们可以使用 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

表单验证与提交

基本表单验证

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

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

表单布局

行内布局

我们可以通过设置 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

分栏布局

我们可以使用 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

表单验证与提交

基本表单验证

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

在上述代码中：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

在上述代码中，我们为 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

在上述代码中，我们使用 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

在上述代码中，我们添加了一个名为 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

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

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

结语

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

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

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】