Vue+Element-UI el-form表单动态检验

这篇具有很好参考价值的文章主要介绍了Vue+Element-UI el-form表单动态检验。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

业务需求: 表单el-form 有一表单项:发布时间 ,有5个选项:今天、24小时、近3天、近7天和自定义时间,其中当选择自定义时间时,后面跟着的日期时间选择器是必填的,选中其他选项时则不需要。这就需要做到表单的动态检验。
vue中form表单验证动态响应,vue.js,ui,javascript
最开始实现方式是在当前表单项中设置规则rules,根据时间类型来设置时间选择器的required与否来实现是否必选。vue中form表单验证动态响应,vue.js,ui,javascript
但是这种实现方式在我的业务场景中存在一种问题:
我的是左侧有可点击的列表项,每个列表项对应的发布时间可能不同,每次点击不同的列表项时会对应填充右侧的发布时间选项,然后查询数据显示在页面中间部分。 vue中form表单验证动态响应,vue.js,ui,javascript
在第一次填充是必填后,再切换其他列表项,若是非必填,然而表单查询校验却还是提示发布时间是必填,感觉就是动态校验并没有立刻生效。通过百度,大致理解就是,这种写法并不是响应式的,虽然改变了rules的内容,form表单没有变动,页面没有重修渲染,真正的检验规则其实也不会更新并生效。
如有理解不对,还请指正。

可生效的实现方式:
1、直接在computed中定义相应的rules返回。是响应式的。
vue中form表单验证动态响应,vue.js,ui,javascript
2、使用this.$set()方法来动态触发视图更新,从而达到重新渲染,重新加载校验规则
vue中form表单验证动态响应,vue.js,ui,javascript文章来源地址https://www.toymoban.com/news/detail-665581.html

到了这里,关于Vue+Element-UI el-form表单动态检验的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-ui的el-form表单和el-table校验嵌套使用校验el-input和el-select

    场景:前端开发中,经常会遇到比较多的表单填写页面,其中有el-form,el-table,表格的每一列中又嵌套着输入框或者下拉框,然后每个还需要做单独的校验 效果:   点击保存可校验el-input和el-select是否有值,不符合校验规则就标红提醒   1.el-form里面嵌套el-table 2.在el-table-column自定义内

    2024年02月02日
    浏览(53)
  • Vue - Element el-form 表单对象多层嵌套校验

    针对el-form的数据源是对象嵌套对象,在进行数据绑定和校验时和单层的对象有一点区别, 具体是下面两部分: 数据源: 1、 给 el-form-item 的 prop 设为: prop=\\\"health.height\\\" 。 v-model 设为: v-model=\\\"fromData.health.height\\\" 2、校验规则 rules 对象对应的key设置为数据源内部的值: \\\'health.heig

    2024年02月14日
    浏览(54)
  • 【element-ui】 el-form之rules赋值后校验没消失

    错误原因是在return中定义了一个空对象formLabel,在校验过程中,formRules值找不到对应的formLabel值,此时就出现了在输入框中赋值之后,校验不消失 解决方案:

    2024年02月09日
    浏览(46)
  • vue3使用el-form实现登录、注册功能,且进行表单验证(Element Plus中的el-form)

    简介:Element Plus 中的 el-form 是一个表单组件,用于快速构建表单并进行数据校验。它提供了丰富的表单元素和验证规则,使表单开发变得更加简单和高效。可以搭配el-dialog实现当前页面的登录、注册页 ,这两天在vue3中用到了表单登录,特意记录一下,这里没有封装,直接使

    2024年02月07日
    浏览(73)
  • Element-UI中el-form内部在输入框回车导致刷新页面的问题解决。

    当 el-form 表单里面只有一个 el-input 输入框的时候,在输入框选中时按回车会刷新页面: 默认情况下, el-form 中只有一个输入框时, el-form 会自动为输入框添加一个 type=\\\"submit\\\" 的按钮,当按下回车键时,该按钮会触发表单的提交事件。 在el-form标签内加入 @submit.native.prevent 即可

    2024年02月11日
    浏览(58)
  • vue全家桶进阶之路43:Vue3 Element Plus el-form表单组件

    在 Element Plus 中, el-form 是一个表单组件,用于创建表单以便用户填写和提交数据。它提供了许多内置的验证规则和验证方法,使表单验证更加容易。 使用 el-form 组件,您可以将表单控件组织在一起,并对表单进行验证,以确保提交的数据符合预期的格式和要求。该组件具有

    2023年04月20日
    浏览(45)
  • Element-UI可以动态生成的form表单

    此form表单每一项绑定的值组成一个对象,对象叠加组成了一个对象数组,循环对象数组生成form的表单项。当点击新增一项时,其实就是给form表单对象数组添加一个对象,删除则反之。值得注意的是,由于动态表单得到的是一个对象数组,但我们需要的是表单的值组成的对象

    2024年02月11日
    浏览(52)
  • el-form动态检验无法生效问题(已解决)

    要对el-form里面的字段动态生成校验规则,测试了一系列的骚操作也无法生效,要么是require视图生效了,校验规则还是不生效;看了csdn里面好多方案,都是废话,废话,直接上硬货,最终总结如下: 需求描述:选择审核结果为\\\"N\\\",不通过时,审核意见为必填,否则为不必填。

    2024年02月07日
    浏览(36)
  • element-ui form表单的动态rules校验

    在vue 项目中,有时候可能会用到element-ui form表单的动态rules校验,比如说选择了哪个选项,然后动态显示或者禁用等等。 我们可以巧妙的运用element-ui form表单里面form-item想的校验规则来处理(每一个form-item项都可以单独校验)。 上代码: 重点是这个: :rules=“sqyxForm.jtpslx

    2024年02月15日
    浏览(52)
  • 【element-ui】form表单动态修改rules校验项

    在项目开发过程中,该页面有暂存和提交两个按钮,其中暂存和提交必填项校验不一样,此时需要动态增减必填项校验 ,解决方法如下: 增加rules校验项 删除rules校验项

    2024年02月04日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包