el-form中的rules校验

最新推荐文章于 2024-06-13 14:26:00 发布
最新推荐文章于 2024-06-13 14:26:00 发布
阅读量3.9k 收藏 4
点赞数 2
分类专栏： 前台vue 文章标签： css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47156901/article/details/108602562
版权

el-form中的rules不起作用

问题描述：

写了prop标签但是在输入框填写输入后，还是提示请输入****

检查步骤：

1.先确定prop属性是否写在了标签后面
在这里插入图片描述
2.检查表单的rule是否写了
在这里插入图片描述
3.检查prop的值是否和v-model的值保持一致（最关键的检查）
在这里插入图片描述

4.r如果是双重的则需要写成双重的（谨记prop的值和v-model的值保持一致）
在这里插入图片描述
5.校验写法
红色的是单个校验，一个字符
绿色的双重（prop的值不是一个单词。而是对象里面的一个值）
在这里插入图片描述

努力敲代码的咸鱼
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
总结起来，处理`el-dialog`初始化校验问题的关键在于正确管理`el-form`的状态和校验规则，确保在恰当的时机进行校验重置。通过合理使用Vue的生命周期钩子和事件监听，以及对`$refs`的适当判断，可以避免不必要的校验...
el-form 多层级表单的实现示例
11-19
前言 ...el-form 使用，详情可参见： Form 表单 有几个比较重要的属性： ref 相当于标签的 id model 表单数据对象 rules 表单验证规则 prop 表单域 model 字段 label 标签文本 在提交按钮的
＜el-form＞的rules
weixin_46883630的博客
09-26 1007
el-form标签的使用
VUE el-form表单中rules校验方法实现
weixin_44078774的博客
11-24 1366
在el-form中正确使用rules校验是非常重要的，rules使用不当容易出现规则不生效、规则一直被触发等各种现象（如错误信息一直提示不得为空）。下面记录了常见的rules实现方式，以做参考。
Vue3表单组件el-form校验规则rules属性
最新发布
李长渊的博客
06-13 1276
Vue3表单组件el-form校验规则rules属性
ElementUI使用rules点击按钮校验表单和单独校验某个表单元素
a17603952050的博客
04-08 6032
一、校验rules中所有元素 写在 data 中验证 表单内容 <!-- 表单 --> <el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px"> <el-form-item label="用户名称:" prop="userName"> <el-input v-model="rulesForm.userName" style="wi
el-form表单校验
weixin_53917307的博客
03-31 3376
1、局部校验 填写时校验 在<el-form>标签中使用:rules="rules" rules是表单验证规则，为object对象。 rules: { payMode: [//el-form-item标签中的prop { required: true, message: "请选择支付方式", trigger: "change" } ], allongeQuantity: [ { re...
el-form中rules的原理简介
东逝水
12-02 5185
一直以来我都没有搞懂el-form的rules究竟是怎么工作的，我只是按照文档画瓢而已。这次有个需求把界面上的el-select替换成树形的下拉框，只能自己封装了，同时这里用到了rules，没办法我只能让自定义的树形组件(我取名叫DropdownTree)支持rules了。可是我对这个一无所知！！！ 把拉代码吧，还能怎么办呢？ 经过艰苦卓绝的一个小时，总算搞懂了。我下面尝试总结一下 当表单元素（比如el-input），在value变化或blur时，会触发el.form.change和el.form.blur
vue elementui el-form rules动态验证的实例代码详解
10-16
在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下
el-table树形表格表单验证(列表生成序号)
10-15
这里的`form`是表单数据对象，`rules`是验证规则对象，`rows`属性对应`el-table`中的数据数组。在实际应用中，你需要根据业务需求定义具体的验证规则，例如： ```javascript const rules = { rows: [ { children...
关于elementUI中el-form的rules
weixin_34258838的博客
11-14 1800
以下代码是借用链接描述 一般我们在使用elementUI来实现一个表单验证的时候，我们需要使用rules这个标签，表单验证规则，它后面所跟的就是你写的规则，这个是写在data中的。 rqueired:是否必填，如不设置，则会根据校验规则自动生成trigger:不太清楚为啥要这么写，validator:这里是指定自己写的规则。 在自己写的方...
ElementUI中el-form组件的rules参数详解
changwen17的博客
02-16 6988
ElementUI中el-form组件中rule规则详细介绍
el-form表单rules验证
ProgrammingWhite的博客
03-22 757
今天在工作中遇到一个小问题，绑定的rules验证出现一个小Bug，验证规则和绑定的表单都正确，但是为什么输入完信息之后还是会提示错误输入时候的提示信息？ Bug重现：项目联系人只添加一个require验证规则，在输入框中我明明输入进去了，但是为什么还是会提醒我错误提示信息？ 找了一会原因发现是因为el-form-item中的prop和ref用错了，prop是form表单绑定的formInfo对象中第一层的数据，ref是form表单绑定rules时为了确认验证的某一项而临时建立的连接。 el-inp
vue el-form表单rule校验（特殊字符、中文、数字等）
tutouxiaoyaonie的博客
07-29 6936
vue el-form表单rule校验（特殊字符、中文、数字等）
el-from 使用 rules自定义表单验证规则
zhang_yong_hui的博客
03-07 679
string: 必须是stringnumber: 必须是numberboolean: 必须是booleanmethod: 必须是functionregexp: 必须是正则或者是在调用new RegExp时不报错的字符串.integer: 整数.float: 浮点数.array: 必须是数组，通过判断.object: 是对象且不为数组.enum: 值必须出现在enmu枚举值中.date: 合法的日期，使用Date判断url: url.hex: 16进制.email: 邮箱地址.}]
vue:el-form rule自定义验证表单
qq_39019765的博客
10-26 1005
rule自定义验证表单 还在纠结表单中input框rule规则太多，提示语不准确或者不全等问题么，直接只用自定义校验。 <template> <el-form :model="form" :rules="rules"> <el-form-item label="名称:" prop="name" > <el-input v-model="form.nam
[Vue warn]: Error in event handler for "el.form.blur": "TypeError: callback is not a function"解决
热门推荐
qq_39946015的博客
03-26 1万+
callback的简单理解 调用一次callback相当于调用一次函数，比如： function f(x) { console.log(x) } function testCallBack(callback) { //关键字callback，表示这个参数不是一个普通变量，而是一个函数 const reg = /^[1-9]*[0-9]?(\\.[0-9]*)?$/; if(val...
el-form自定义规则rules——validate的使用 & 小红心不出现解决方案
weixin_44867717的博客
07-03 1万+
el-form
el-form中el-tree的rules校验
09-09
在el-form中，el-tree的rules校验可以通过在el-form-item中设置prop属性和在data()中设置Rules属性来实现。在Rules中，可以定义一个验证函数validOrgan，并将其作为validator属性的值。该验证函数可以通过this.$refs.organTree.getCheckedKeys()方法获取选中节点数组，然后判断数组是否为空来进行校验。如果数组为空，说明没有选中节点，则回调(callback)一个带有错误信息的对象；否则，回调一个空对象表示验证通过。在el-form-item中，可以设置trigger属性来指定触发校验的事件，如'change'事件。最后，在el-form中使用rules属性来绑定Rules对象。 例如，可以在data()方法中添加如下代码： ``` data() { let validOrgan = (rule, value, callback) => { let arr = this.$refs.organTree.getCheckedKeys(); if (!arr || arr.length === 0) { callback(new Error('请选择关联机构')); } else { callback(); } } return { Rules: { organList: [ { required: true, validator: validOrgan, trigger: 'change' } ] } } } ``` 然后，在el-form-item中设置prop属性为'organList'： ``` <el-form-item prop="organList"> <el-tree ref="organTree" ... ></el-tree> </el-form-item> ``` 最后，在el-form中使用rules属性绑定Rules对象： ``` <el-form :rules="Rules"> ... </el-form> ``` 这样就可以实现el-form中el-tree的rules校验了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值