今天用vue+elementUI做前端,要用到验证表单,我由于已经写了表单信息,所以在普通表单的基础上去做修改。但是发现验证表单的id输入两条验证要求【非空和输入长度】,只有第一条起作用,并且没有随着输入的改变而改变。经过一番查找发现以下几点需要修改的地方:
- 绑定:
包括两部分:整个表格的绑定以及属性的绑定:
整个表格使用【:model】绑定表格内容,使用【:rules】绑定规则,不可以使用v-model!!
属性绑定使用【prop】
举例:
<el-form :model="form" :rules="rules" style="text-align: left" ref="dataForm">
<el-form-item label="用户ID" :label-width="formLabelWidth" prop="userid">
<el-input v-model="form.userid" autocomplete="off" ></el-input>
</el-form-item>
上例中,在form标签中绑定了model和rule,这两个名字随便起,在属性item中绑定了prop,名字同样随便起。
需要注意,form的model、item中prop与input的v-model要对应!!
- 在data中写rules
这个可以参照elementUI官网的form验证表单进行
注意data中要写两部分:form属性定义以及rules定义