尝试打印该表单项绑定的校验规则发现,其中的自定义校验规则没有被调用到,undifined 同理,如果试着将校验规则传一个空对象,发现会报同样XXX is not String的错误: computed:{ ruleList() {return[ { required:this.baseForm.status === '2'?false:true, type:'array', message:'活动一和活动二必须二选一',...
目前el-form的model主要用表单验证的,也就是配合el-form的rules和el-form-item的prop来使用的。你如果增加一个rules和prop(为了调用验证方法,el-form也加一个ref属性,相当于id或者class选择器的意思),但是不写model,然后验证的话,会提示缺少model,导致无法验证成功。 所以el-form的model干嘛用的?目前看来主要是为...
简介:el-form中el-form-item的error属性监听的是watch方法,也就是两次重复的错误操作,提示的错误信息一致,就不会触发watch方法。就会导致第一次获取error信息,信息正常显示在了页面中,第二次获取到了同样的error信息,信息却不显示在页面中了。 问题 el-form中el-form-item的error属性监听的是watch方法,也就是两次...
() { this.$refs.form.validate((valid) => { if (valid) { // 数据校验成功 ... } else { // 数据校验失败 // 使用$nextTick的原因是,错误提示的元素是在视图更新后出现的,不使用$nextTick获取元素是undefined this.$nextTick(() => { elFormErrorScrollIntoView() }) } }) } } } </script...
当用户提交表单时,el-form 会自动触发验证,并根据验证结果显示错误提示。 4.表单提交及事件处理 el-form 支持通过`submit`事件处理表单提交操作。当用户点击提交按钮时,会触发`submit`事件。我们可以通过监听此事件来处理表单提交后的逻辑,例如发送请求到服务器、跳转到其他页面等。 5.综合实例 在实际开发过程中,...
在el-form-item上添加error属性,error属性初始值为空时不触发验证,当error有值时触发; 通过slot自定义错误信息样式 <el-form:model="ruleForm":rules="rules"ref="ruleForm"label-width="100px"class="demo-ruleForm"><el-form-itemlabel="表单输入框"prop="name":error="inputError"><el-inputv-model="...
上网查了半天,都只能修改提示信息,不能修改源数据;考虑过每个输入框都加一个id,靠id来设置红色字体,再写一个自定义校验:当不符合规则时,找到对应的id修改样式.这个方法由于表单内数据量大,一个个设置id很繁琐... 你期待的结果是什么?实际看到的错误信息又是什么? vue校验只能设置提示信息不能修改源数据吗?还有...
el-form提供了多种方法来处理校验结果,以便在界面上显示错误提示信息。常用的方法有: 1. validate:对整个表单进行校验,并返回校验结果。校验结果是一个布尔值,表示整个表单的校验结果。 2. validateField:对指定的表单项进行校验,并返回校验结果。校验结果是一个布尔值,表示指定表单项的校验结果。 3. resetFields:重...
validateField用法 浏览器debug发现,每个字段,都会单独校验并返回校验结果;失败时,返回用户定义的错误提示信息;校验通过返回空串 方法一: //字段教校验时,每个字段都会单独校验一遍,将结果保存到数组中let validateFields = ['username', 'password', 'confirmPassword'] let validateFieldsRs=[]this.$refs.formName.va...