你可以通过模拟用户输入、表单提交等场景来验证表单的行为。 通过上述步骤,你应该能够定位并解决 el-form 表单校验提示信息在字段有值后仍然存在的问题。如果问题仍然存在,可能需要更详细地查看你的代码逻辑或寻求Element UI社区的帮助。
在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="...
解决办法 设置上即可,如: rules:{username:[{required:true,message:'该项不能为空',trigger:'blur'}// trigger: 'blur'],...}
如上,在data中定义表单验证规则的对象数组rules(可以单独编写验证器函数),并直接绑定到表单标签的rules参数中。 其中,validator是单个表单域格式验证的验证器,一般是需要比较复杂的格式验证的时候才会用。如果是非空验证、数据类型验证或者正则表达式能处理的,都可以直接通过rules的type/Pattern等相关参数直接配置就好了。
第一次点击弹框编辑表单的时候,编辑框的输入不符合验证规则出现了提示,然后关闭弹框,再次打开弹框,提示就出现了。 解决方法: /** *新增课程弹框 */ setAddCourseShow() { this.addCourseForm.lesson_name = '' this.addCourseForm.daterange = [] ...
Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item的 prop 属性设置为需校验的字段名即可。校验规则参见async-validator 文档中提及的用法有2种: 1.对整个表单进行规则验证: <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px...
目前el-form的model主要用表单验证的,也就是配合el-form的rules和el-form-item的prop来使用的。你如果增加一个rules和prop(为了调用验证方法,el-form也加一个ref属性,相当于id或者class选择器的意思),但是不写model,然后验证的话,会提示缺少model,导致无法验证成功。
一、如果el-form-item中添加了required,验证规则中又添加了required,那么在手动删除输入框或者点击清空叉号删除内容后,会出现英文提示。 只在el-form-item上设置required也会出现英文提示,只能在验证规则中使用required才能自定义中文提示。 二、最后验证提交表单时, ...
问题描述: 第一次点击弹框编辑表单的时候,编辑框的输入不符合验证规则出现了提示,然后关闭弹框,再次打开弹框,提示就出现了。 解决方法: 需要注意的是resetFields方法...
在做表单自定义校验规则的时候遇到很奇怪的问题,这一项明明没有设置必填,却出现验证,且内容不是message里的提示语,而是 XXX is not String. 具体报错如下: 首先,附上相关代码: //html代码<el-form ref="baseForm" :model="baseForm" :rules="ruleValidate" label-position="right" label-width="320px"> ...