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定义
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值