问题场景:
input框里已经有内容,但校验仍然出现不通过
问题描述:
写好表单校验规则后,表单中输入内容,但校验仍然不通过。
解决问题:
表单校验常见问题
1.写好验证规则,但不校验
解决方法:<el-form-item>标签上写prop="数组内要验证的属性"或者<el-input>标签中加入type="数组内要验证的属性".
2.input框里已经有内容,但校验仍然出现不通过
问题效果如下:
经过搜索多种解决方案,发现了问题所在,原因是我prop后面的属性与input中绑定的值名称不一样引起的。
解决方法:<el-form-item prop="input">中prop后面的字符必须和<el-form-item>标签中需要验证的值的参数名一样
3.<el-form>标签绑定内容必须通过 :model='form' 绑定,不能使用v-model="form"
正确的验证格式书写:
<el-form :model="nodeName(数组名)" ref="nodeName(数组名)">
<el-form-item prop="name(数组内的属性)" label="内容:" :rules="[{ required: true, message: '不能为空'}]">
<el-input type="name(数组内的属性)" v-model="nodeName.name(数组内的属性)"></el-input>
</el-form-item>
</el-form>