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...
在官网中的实例中,我们在绑定方法的时候,将ref绑定的名称ruleForm字符串传入: 点击提交按钮触发的submitForm方法: 这里要注意到,传入的是一个字符串,所以方法中用的是this.$refs[formName] =》this.$refs['ruleForm'],这种形式等同于this.$refs.ruleForm,而我的代码: 没有传入字符串,而是将表单绑定的form对象...
//form表单样式:外面一层<el-form>标签---> //里面有几个<el-input>,就用几个<el-form-item>包着 // :model="ruleForm" :model是data中定义的存储的是用户名和密码(obj) // :rules="rules" :rules是data中定义的对象,目的是校验用户名和密码的规则 // :ref="ruleForm1" 可以通过ref来获取el-fo...
第一个表单的输入框都触发blur提示语后,切换至第二个表单 第二个表单的输入框触发blur后,第一个输入框的校验失效了。 返回后,第一个输入框触发blur,校验又失效了,如下: 解决方法: 在切换表单之后触发blur,有时并未调用表单的validator。这时,需要给待校验的表单元素的外层el-form-item标签上添加一个唯一的key值...
详情页有个编辑按钮,点击进入编辑页,由于详情页和编辑页是同一个页面,只是后面通过type参数来进行区分(detail和edit),这样就是导致路径未变,只是参数变化了。详情页的数据只是展示,编辑页则是换成了表单,但是表单元素的blur和change的校验失效,点击提交时,表单校验还是生效的。
遇到一个问题,适用elementUI的表单校验时,select校验总是不通过 代码如下: <el-formlabel-width="100px":model="addForm":rules="rules"ref="addForm"><el-form-itemlabel="报表":label-width="formLabelWidth"prop="report"><el-selectv-model="addForm.reportValue"placeholder="请选择报表"style="width:275...
点击搜索后正常显示搜索的数据,本来应该点击重置后回到原来展示所有数据的样子。 但是点击重置后并没有用。 我原来以为重置是自己写了额外的方法,但是我查看methods里面的方法发现,这个按钮是调用的查询方法,只不过查询之前,他使用resetForm()方法去清空表单中的所有数据。
可以看到,按照官网的写法动态渲染的表单项是无法进行校验验证的。这里就是无论选中没选中值都校验不通过。 解决 修改prop、rules 代码语言:javascript 复制 <el-form-item v-for="(teaclass,index) in addFom.classIds":label="`班级${index+1}`":prop="'classIds.'+ index + '.classId'":rules="rules...
ElementUI封装了组件el-form来收集、校验和提交数据,其中的rules属性就是用来做数据校验的。ElementUI提供了一些常用的表单验证规则,我们可以直接使用该规则来实现数据校验。rules根据rules给出的规则会对prop中的值进行校验,当不满足要求时会弹出message相应的提示信息。