6.el-form表单验证规则
leezozz 2/4/2023 笔记
# el-form表单验证规则
- 当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 '
' 标签上添加 @submit.prevent。 - Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
<el-form
ref="ruleFormRef"
:model="modelValue"
label-position="top"
:rules="dialogCreateRules"
@submit.prevent
>
<el-form-item
label="任务名称"
prop="dialogInput"
class="createTaskTitle"
>
<el-input
v-model="modelValue.dialogInput"
placeholder="请输入"
class="dialog-create-input"
autofocus
/>
</el-form-item>
</el-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
