携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第2天,点击查看活动详情
前言
表单校验在前端工作中非常常见,表单校验可以规范用户的输入,以及防止用户的误操作,确保用户提交数据的有效性。
表单验证属性
做表单验证离不开这三个属性model
、rules
、prop
,当然也别忘了ref
哈;
model
是待校验的对象:rules
定义校验规则;prop
绑定要校验的表单域;
其中,rules
和prop
是一一对应的。
知道了,这些属性是干什么的,表单校验就学会一半了。
首先,在el-form标签里面添加:model="ruleForm",:rules="rules";
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" >
然后在需要校验的el-form-item标签,加上prop
属性绑定好表单域;
ps: 在el-form-item里面添加的prop属性,要与:model="ruleForm"的ruleFormm的属性一一对应。
<el-form-item prop="name">
最后,设置校验规则,校验待校验对象,提交的时候判断一下即可完成验证;
``` const rules = reactive ({ name: [ { // 必传项 required: true, // 提示文本 message: '请输入姓名', // 触发方式 trigger: 'blur' }, { // 最小长度 min: 2, // 最大长度 max: 8, message: '长度应为 2 到 8', trigger: 'blur' }, ], })
```
示例代码
```
提交
<el-button @click="resetForm(ruleFormRef)">重置</el-button>
</el-form-item>
```
本文到此结束
如果大家还有什么其他想法,欢迎在评论区交流!