elementui form
ElementUI Form 基础用法
ElementUI 的 Form 组件提供了表单验证、布局和样式支持。通过 el-form 标签包裹表单项，结合 el-form-item 和 el-input 等组件快速构建表单。
<template>
<el-form :model="formData" :rules="formRules" 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: '' },
formRules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
}
},
methods: {
submitForm() {
this.$refs.formRef.validate(valid => {
if (valid) { alert('验证通过'); }
});
}
}
}
</script>表单验证规则配置
ElementUI 表单验证通过 rules 属性实现，支持多种校验类型：
required: 必填字段pattern: 正则表达式校验min/max: 长度限制validator: 自定义校验函数
formRules: {
email: [
{ required: true, message: '邮箱不能为空' },
{ type: 'email', message: '邮箱格式不正确' }
],
phone: [
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }
],
age: [
{ validator: (rule, value, callback) => {
if (value > 18) callback();
else callback(new Error('年龄需大于18岁'));
}}
]
}动态表单实现
通过 v-for 动态生成表单项，需注意每个动态项的 prop 需要与数据模型匹配：
<el-form :model="dynamicForm">
<el-form-item
v-for="(item, index) in dynamicForm.items"
:key="index"
:label="'字段' + index"
:prop="'items.' + index + '.value'"
:rules="{ required: true, message: '不能为空' }">
<el-input v-model="item.value"></el-input>
<el-button @click="removeItem(index)">删除</el-button>
</el-form-item>
<el-button @click="addItem">新增字段</el-button>
</el-form>表单布局方式
ElementUI Form 支持三种布局方式：
- 横向布局（默认）:
label-position="right" - 纵向布局:
label-position="top" - 行内布局: 添加
inline属性
<!-- 纵向布局示例 -->
<el-form label-position="top">
<el-form-item label="用户名">
<el-input></el-input>
</el-form-item>
</el-form>
<!-- 行内表单 -->
<el-form inline>
<el-form-item label="日期">
<el-date-picker></el-date-picker>
</el-form-item>
</el-form>自定义表单验证
通过 validator 实现复杂验证逻辑时，注意回调函数的使用：
const validatePass = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error('密码不能少于6位'));
} else if (!/[A-Z]/.test(value)) {
callback(new Error('需包含大写字母'));
} else {
callback();
}
};表单重置与清除验证
通过 resetFields 方法重置表单，clearValidate 清除验证状态：
methods: {
resetForm() {
this.$refs.formRef.resetFields();
},
clearValidation() {
this.$refs.formRef.clearValidate(['username']);
}
}
