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.js 2.0窥探之Virtual DOM到底是什么？
大家可能听说Vue.js 2.0已经发布，并且在其中新添加如了一些新功能。其中一个功能就是“Virtual DOM”。那么下面这篇文章就来给大家详细介绍Vue.js 2.0中的Virtual DOM到底是什么？需要的朋友可以参考借鉴，下面来一起看看吧。2017-02-02
Vue中@click.stop和@click.prevent实例详解
当我们使用Vue.js开发前端应用时,经常会在模版中使用@click指令来响应用户的点击事件,这篇文章主要给大家介绍了关于Vue中@click.stop和@click.prevent的相关资料,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了Vue3.x最小原型系统讲解。既然用Vue3.0构建最小原型系统，那么肯定要用尤大的最新构建工具Vite来进行项目的初始化，下文举例说明,需要的朋友可以参考一下2022-02-02
这篇文章主要为大家介绍了vscode添加vue模板步骤示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
多人协作模式下，修改代理比较麻烦，而且很容易某个开发人员会修改了vue.config.js文件后提交了。接下来通过本文给大家分享Vue多环境代理配置方法思路详解,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了vue-cli中设置publicPath的几种方式对比，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
Vue中有两个较为高级的静态方法mixin和extend，接下来给大家介绍Vue中mixin和extend的区别和使用场景，感兴趣的朋友一起看看吧2019-08-08
这篇文章主要为大家详细介绍了Vue父组件如何获取子组件中的变量，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要给大家介绍了关于vue.js watch经常失效的场景与解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。本文将从CSS过渡transition、CSS动画animation及配合使用第三方CSS动画库(如animate.css)这三方面来详细介绍Vue过渡效果之CSS过渡2020-02-02
最新评论