触发单个el-form-item的校验

最新推荐文章于 2024-04-17 16:03:39 发布
最新推荐文章于 2024-04-17 16:03:39 发布
阅读量2k 收藏 2
点赞数
文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46383567/article/details/122238314
版权 
<el-form :model="form" ref="form" class="mt20" label-width="140px">
 <el-form-item label="标题：" prop="title" :rules="{required:true,message:'请输入标题',trigger:'change'}">
   <el-input v-model="form.title" size="small" placeholder="请输入标题">
   </el-input>
 </el-form-item>
</el-form>

如果想在其他地方触发该校验

this.$refs.form.validateField('title');   //括号里的值必须与prop绑定的值对应
m0_46383567
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element 表单验证 单个input输入框（脱离表单的），添加校验
学习永无止境
03-12 1万+
项目需求是要输入的面额不能大于原来的价格，由于每次循环导致取到最后一条数据的值来校验的，很显然是不行的 在网上查了很多方法，也没有合适的，于是就用到了官方提供的Form-Item的属性 error 注:用error的话，就不需要为el-form-item添加prop和rules了，直接在el-form-item标签上添加:error="scope.row.error"即可 代码: <el-table-column label="优惠面额（元）">
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
总结起来，处理`el-dialog`初始化校验问题的关键在于正确管理`el-form`的状态和校验规则，确保在恰当的时机进行校验重置。通过合理使用Vue的生命周期钩子和事件监听，以及对`$refs`的适当判断，可以避免不必要的校验...
el-element form表单组件 对非表单内字段做校验
gp_911014的博客
05-19 925
在日常开发写表单的时候，可能会遇到某一个form-Item中绑定的值不在表单绑定的数据对象中。用于表单域验证错误信息，设置该值会使表单验证状态变为error，并显示该错误信息。此时用prop绑定该字段名是无效的，需要单独对这个字段进行校验。在 form-Item 中有一个属性。
el-form表单根据条件触发校验
最新发布
凡尘
04-17 358
el-form表单根据条件触发校验。
vue el-form-item :rules动态校验实现
qq_43805205的博客
07-19 2419
【代码】vue el-form-item :rules动态校验实现。
el-form-item下多个form-item项校验（循环校验）
m0_47561027的博客
06-02 1018
去年在编写一个页面的时候，要求自定义字段，可以动态的循环添加，还要增加表单验证，在这块的内容的编写不太熟练，最后参照着网上的一些资料，主要参考这个博主。前端代码实现如下所示，主要是通过prop来确定好每一个表单验证的值。的博客，完成了这一项任务的开发。具体实现页面如下所示。
关于在vue中对el-form-item单独验证及多表单验证
Anlittlecat的博客
10-09 990
在div中关于不同表单的ref值需不同，rule可以继续使用相同的规则；主要代码在于方法中的校验。针对很多表单中校验非空情况使用该方法可以减少对校验规则的重复，减少代码冗余。其中输入框用blur，选择框使用change。
el-form-item 组件单独设置当前表单项校验规则（自定义校验规则）+正则校验
工作中遇到问题记录
07-08 9403
el-form-item 组件单独设置当前表单项校验规则（自定义校验规则）
Element 表格嵌套表单验证 单个input输入框（脱离表单的），添加校验~
scorpion_V的博客
04-20 4239
Element 表格嵌套表单验证 单个input输入框（脱离表单的），添加校验~
el-table，el-form在vue中封装组件化，含操作按钮和插槽.pdf
12-16
例如，`el-input`用于文本输入，`el-date-picker`用于日期选择，`el-button`用于触发操作，而`el-select`则用于下拉选择。 `el-table`组件的封装也相当直观。它包含了一个操作栏（`table-operate`），中间是表格...
改变el-table宽度
12-12
当用户拖动列宽时，`@header-dragend`事件会被触发，传递一个新的宽度值`newWidth`。这个方法会在一个延时函数中执行，以确保在DOM更新后获取正确的宽度。然后，它会更新`tableColumn`对象并存储到localStorage中，...
el-tree-selected-tree
11-15
在实现`el-tree-selected-tree`时，我们需要监听`el-tree`的`'check-change'`事件，这个事件在节点被选中或取消选中时触发，我们可以获取到当前选中状态和节点信息。通过维护一个`selectedNodes`数组，我们可以记录...
element ui 对话框el-dialog关闭事件详解
08-27
在 Element UI 中，`el-dialog` 是一个非常重要的组件，它用来创建对话框或者称为模态窗口，常用于显示警告、确认操作或者进行表单输入等场景。 `el-dialog` 的关闭事件是开发过程中经常会用到的功能，特别是在需要...
element 去掉form表单的某一项单个form-Item校验
卡卡罗特的博客
08-13 6191
element 去掉form表单的某一项单个校验
el-form/el-form-item表单验证
zhang_gt的博客
09-16 7979
el-form/el-form-item 表单验证
【VUE】手动触发input输入框验证
SZnAl的博客
07-22 3160
输入框本身有自己的验证规则，但是有时候在切换选项等操作后输入框并不会实时的进行验证更新，可能已经符合规则了，但他还是提示错误信息。点击顶部radio切换时候，实际已经满足规则，但还是提示已存在，需要手动在输入框内点击，再点击空白区域，输入框失焦一次后才能触发更新。...
ElementUI - form表单检验基础使用
qq_42651173的博客
06-27 768
前言 我们在日常开发中，向后端发请求调用接口之前，需要对所要传递的参数进行验证，来把用户的错误扼杀在摇篮之中。 场景 内容不能为空 密码长度必须多少位 手机号的格式要合规 邮箱的格式要合规 1.基本步骤 1.1 data中定义验证规则 data() { return { form: { 字段名1:'', 字段名2:'' }, rules: { // 字段名1：表示要验证的属.
el-form 触发单个校验
string佳佳的博客
07-11 3655
el-form 触发单个校验
element-ui的form表单校验
minnyYu的博客
12-31 4542
element-ui表单校验步骤
el-form触发单个校验
10-12
可以使用 el-form 组件的 validateField 方法来触发单个表单项的校验。该方法接收一个参数，即需要校验的表单项 prop 值。 例如，如果需要校验名为 "username" 的表单项，可以在 el-form 上绑定 ref，并在需要触发校验的时候调用 validateField 方法： ``` <template> <el-form ref="myForm"> <el-form-item label="用户名" prop="username"> <el-input v-model="username"></el-input> </el-form-item> <el-form-item> <el-button @click="validateUsername">校验用户名</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { username: '' } }, methods: { validateUsername() { this.$refs.myForm.validateField('username') } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值