vue element-ui使用required进行表单校验时自定义提示语问题
更新时间：2023年05月20日 10:27:07 作者：柯柯就是我
这篇文章主要介绍了vue element-ui使用required进行表单校验时自定义提示语问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
element-ui使用required表单校验时自定义提示语
如果我们直接在html里面使用required时
当我们在输入框输入一些数据，然后使用backspace逐个删掉，删完的时候就又会出现
即使我们已经添加了rules验证
此时我们需要进行如下修改
首先把HTML里面的required删掉，然后在js的rules验证里添加
即可修改验证
element-ui表单项自定义校验设置必填项required
使用elementUI的表单校验有时需要用到默认校验和自定义校验的组合规则，比如下面这种部分表单项需要根据其他非input内容是否为空进行校验。
后两项内容设为空，点击确定进行表单校验，此时提示正常没有问题
而当内容不为空时，下方却出现了xxx is required的提示。
经过排查，发现是el-form-item中的required属性引起的，说明自定义校验规则和required属性不能同时出现，否则两种校验都会生效，而最后这两个表单项并没有input框，设置required属性就会判定内容为空，就会提示xxx is required。
那么如何在使用自定义规则的同时又显示必填项的*号呢？
只需把class设置为is-required即可。
此时内容不为空时提交就能正常校验了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了如何在Vue项目中使用vuex问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要为大家详细介绍了Vue3如何结合Vant实现简单的登录功能,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下2024-04-04
elementui中tabel组件的scope.$index的使用及说明
这篇文章主要介绍了elementui中tabel组件的scope.$index的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
对于Element组件的使用,最主要的就是明确自己想要达到的效果,从官网中将对应代码复制粘贴即可,最重要的是要读懂不同组件官网中提供的文档,以便实现自己想要的效果,本文给大家介绍Vue组件库Element-常见组件表格,感兴趣的朋友一起看看吧2023-10-10
异步组件是 Vue.js 中提高应用程序性能和加载速度的重要功能之一,在使用异步组件时,需要注意组件的加载时间、错误处理和命名规范等问题,本文将介绍 Vue.js 中异步组件的概念、优势以及如何使用异步组件,感兴趣的朋友一起看看吧2023-10-10
$router.push()中通过path跳转和通过name跳转区别解析
今天在路由跳转传参时发现params传参接收到的总是为空，才发现通过path和name传参是有区别的，这篇文章主要介绍了$router.push()中通过path跳转和通过name跳转有什么区别,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue实现的多页面项目如何优化打包的步骤详解，文中通过示例代码以及图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-07-07
这篇文章主要介绍了vue如何实现左右滑动tab(vue-touch)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了浅谈vue.use()方法从源码到使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了使用vuex缓存数据并优化自己的vuex-cache，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
最新评论