1. 没有绑定 ref 2. 没有绑定校验对象 3. 调用提交表单的时候,参数没传对 4. 没有绑定表单 大体这四点吧! <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm...
如下: 第一个表单的输入框都触发blur提示语后,切换至第二个表单 第二个表单的输入框触发blur后,第一个输入框的校验失效了。 返回后,第一个输入框触发blur,校验又失效了,如下: 解决方法: 在切换表单之后触发blur,有时并未调用表单的validator。这时,需要给待校验的表单元素的外层el-form-item标签上添加一个唯一...
先去网上搜索这个问题,发现挺多人都碰到过这个问题,解决的方法也是很统一,就是通过 el-form-item的“ref”属性,如下 <el-form-item label="图片" prop="imgs" ref="headimgUpload"> 1. 然后使用el-upload的 :on-success:“headimgUpload” 成功触发的方法清除掉form表单的校验,不过我这里用的是on-change ...
在<el-form>中,通过【ref="loginForm"】引用表单,在【doLogin(form)】方法中通过【 this.$refs[form].validate((valid) =>...】判断表单校验的结果,当valid=true时才能向后台发送http请求。 另外,可在提交表单时自定义校验规则,在【doLogin()】/【doRegister()】方法处首先进行表单合法性校验。 代码解读 /...
表单中每个item项v-model绑定的data的字段,必须必须必须,和rules中的对应字段,名字名字名字,一样,否则校验时取不到值(undefined),所以无论输入什么或者选择什么都校验不过。 正确代码方式如下 <el-form label-width="100px" :model="addForm" :rules="rules" ref="addForm"> <el-form-item label="报表" prop...
详情页有个编辑按钮,点击进入编辑页,由于详情页和编辑页是同一个页面,只是后面通过type参数来进行区分(detail和edit),这样就是导致路径未变,只是参数变化了。详情页的数据只是展示,编辑页则是换成了表单,但是表单元素的blur和change的校验失效,点击提交时,表单校验还是生效的。
造成这种现象的原因也很简单,就是忘记给el-form加model属性了 <el-form ref="ruleFormRef" :model="editStaff" :rules="rules" label-width="100px"> 添加后就会恢复正常 总结:使用el-form组件的校验时需要配置 <el-form>的配置属性: ref(指定组件唯一标识),model(表单数据对象),rules(校验规则对象) ...
因此,使用v-show可以避免因元素销毁和重建而导致的表单校验失效问题。 html <el-form :model="form" :rules="rules" ref="formRef"> <el-form-item label="Name" prop="name"> <el-input v-show="isVisible" v-model="form.name"></el-input> </el-form-item&...
当提交表单时,检查手机号有没有修改过,如果有修改过并且还带有星号就去校验,但是因为form是循环,只要出现一个带有星号的所有的该字段都会校验并报错,如何只校验我form数组某一项的这个字段