使用element中表单组件时发现当字段项比较多时点击提交,校验提示信息只会在该字段项下方显示,用户体验非常不好,优化方式是让表单校验时自动定位到未通过验证字段位置 代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 this.$refs['form'].validate((valid, object) =...
checkBasicForm() { returnnewPromise((resolve) =>this.$refs.basicForm.validate((valid, object) => { if(valid) {<br>// 校验通过 resolve(this.formatterForm()) }else{ // resolve(false)<br> // 校验未通过,滚动到指定位置 letstr = [] for(letkeyinobject) { object[key].map((item) =>...
1、<el-form>标签绑定内容必须通过 :model='form' 绑定,不能使用v-model="form" 2、<el-form-item prop="input">中prop后面的字符必须和<el-form-item>标签中需要验证的值的参数名一样 3、需要验证的值必须是包含在<el-form>标签:model绑定的值里面,比如 form.input是form的参数 4:prop一定必须要写在<...
1. el-form表单添加ref属性(el-form-item最好也添加下ref属性) <template><el-form:model="form":rules="rules"ref="ruleForm"><el-form-itemlabel="用户名"prop="username"ref='username'><el-inputv-model="form.username"></el-input></el-form-item><el-form-itemlabel="密码"prop="password"re...
// el-form校验失败滚动到对应的错误位置 export function elFormErrorScrollIntoView() { // 获取第一个校验错误的元素 const element = document.querySelectorAll('.el-form-item__error')[0] // 滚动到错误元素对应位置 element.scrollIntoView({ behavior: 'smooth', block: 'center' }) } form.vue <...
1:el-form中使用v-model="ruleForm"代替了:model="ruleForm",正确的应为后者。 2:el-form-item中的prop属性设置错误,官网给出了解释。即prop=a,v-model=Form.a,Js中表单数据字段Form:{ a:'', b: [] },需要一一对应,不能出现差错。 3:<el-button @click="resetForm('ruleForm')">重置</el-butt...
// 表单验证不通过 } }); ``` 通过调用validate方法,我们可以手动触发表单校验,并在回调函数中处理校验结果。 3. 使用自定义指令 我们还可以通过自定义指令的方式来解决失去焦点未触发校验规则的问题。通过自定义指令,我们可以监听表单元素的失去焦点事件,并在事件触发时手动触发校验规则。 针对el-form组件失去焦点...
校验方法 el-input组件实现 el-form-item组件实现 el-form组件实现 组件实现中遗留的问题 源码解析 参考文献 前言 最近在用elementUI的form表单组件的时候,在实现嵌套表单的校验的时候,遇到了一些困难,我想之所以困难的原因在于我对elementui里的form表单组件不够熟悉,于是就深入了解了一下源码,并尝试自己去实...
Vue 的 el-form 提供了表单校验功能,通过 :rules 属性设置校验规则,并通过 el-form-item 的 prop 属性绑定校验规则。通过封装,让前端校验更方便。具体使用过程中,有几个容易出错的地方,本文来整理一下。每一个坑都是笔者亲自趟过的,写完本文后,以后应该不会再踏入相同的坑。