热搜:前端 nest neovim nvim

表单检校的错误信息失焦后自动消失了

lxf2023-05-11 00:57:42

在浏览项目时,发现一个有意思的事情,就是表单校检的错误信息在失焦后就自动消失了。真是离谱到家了

表单检校的错误信息失焦后自动消失了

可以看出来在输入数字时,不会有错误提示,如果没有任何输入,在失焦时会提示这项是必填的,在输入一些特殊字符时,会立刻提示错误信息,但是在输入框失焦后这个错误信息又消失了

这个 demo 中使用了 vue2 + elementui。表单校检也是使用了 elementui 的表单校验。这个输入框一共添加了两个校验规则

  • 必须项,trigger 为 blur
  • 自定义检校,trigger 为 change

解决

原以为是 elementui 出问题,但想想不应该,elementui应该不至于出这种错误,以前也实现过其它的自定义校检,都没有问题的,怎么到了这就不一样了。查找问题的方式也很简单,一个字。只保留必须项规则 ,或者自定义规则。结果发现在只有自定义规则的时候,失焦后错误信息并不会消失。搞定,原因就是在失焦时候只校验必须项,结果发现有输入内容,校验通过,没有问题,所以清空错误信息。解决方案就是自定义规则的触发时机改为 blur + change,或者两个规则都用 blur,或者都用 change


elementui 是不是应该把不同事件触发的校验结果保存在不同的变量上,相互不影响,有任何一个校验不通过,就显示对应的信息,当然显示其中一个就行。

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中,您可以学习到最新的前端开发技术,了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例,让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件,帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化,可以帮助您节省时间和精力,提升开发效率。 除此之外,本网站还拥有一个活跃的社区,您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信,社区的力量可以帮助您更好地成长和进步。 在本网站中,您可以找到您需要的一切前端开发资源,让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭,一起探索前端开发的无限可能!