Bootstrap

vue roleForm的rules不起作用/部分起作用【限制表单中输入的长度】【普通表单变验证表单】

今天用vue+elementUI做前端,要用到验证表单,我由于已经写了表单信息,所以在普通表单的基础上去做修改。但是发现验证表单的id输入两条验证要求【非空和输入长度】,只有第一条起作用,并且没有随着输入的改变而改变。经过一番查找发现以下几点需要修改的地方:

  1. 绑定:
    包括两部分:整个表格的绑定以及属性的绑定:
    整个表格使用【: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要对应!!

  1. 在data中写rules
    这个可以参照elementUI官网的form验证表单进行
    注意data中要写两部分:form属性定义以及rules定义
;