el-form表单验证根据接口返回错误信息

最新推荐文章于 2024-06-25 17:06:33 发布
最新推荐文章于 2024-06-25 17:06:33 发布
阅读量1.1k 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xjf106/article/details/107835503

在这里插入图片描述
使用error属性绑定值，在接口函数回调里处理提示信息

el-form表单的验证是否显示错误信息
KMINLIKE的博客
06-01 390
其实直接使用 :show-message="!iSdisabled" 更简单。属性 ： show-message 是否显示校验错误信息。示例：禁选时隐藏验证出现的错误，可以选择时显示错误提示。
el-form表单验证
seimeii的博客
08-05 3083
el-form表单验证
记录一次el-from表单验证的错误
weixin_53087128的博客
06-07 91
在登录页面记住登录的时候， 所选的公司是 从cookie中拿到回显的 我是在mounted中对用户名 密码 公司 勾选状态进行的赋值， 回显公司之后 公司编码明明有值还是提示验证不通过，附上修改前代码。只需要把赋值的语句改到created生命周期中就可以了，原因应该是 elementUI表单验证的逻辑应该是在created生命周期处理的。
el-form表单使用error提示校验信息, 重复校验信息不显示
qq_43340606的博客
07-28 2621
error="errorObj.posId",第一次显示错误提示,之后再点击提交后就不显示错误提示了。查看element源码发现el-form-item的error属性监听的是watch。所以注意重新提交表单前,需要重置一下errorObj.posId。然后异步赋值需要显示的校验信息。...
el-form表单报错
凡尘
05-08 254
el-form表单报错
踩坑el-form ：error多次错误信息一致不显示问题
技术改变生活
03-07 1322
明明可以打印错误信息，但是el-form-item不显示error 经过搜索得知el-form-item的error属性监听的是watch方法，也就是两次重复的错误操作，提示的错误信息一致，就不会触发watch方法 解决方案，在错误信息增加了Math.random().toFixed(2)，在显示的时候再剪掉 <el-form-item label="网络地址" prop="cidr" :error="errorMsg.cidr?errorMsg.cidr.substring(4):''"&g
关于element-ui在form提交调用api后，错误提示使用el-form校验来显示错误的方法
guang_sszbs的博客
09-02 1950
采用js动态校验的方式实现使用el-form的校验处来展示错误信息 直接上代码，不多说 export default { data () { return { loginForm: { username: '', password: '' }, logining: false, rules: { ...
vue element el-form多表单验证.txt
09-17
### Vue Element UI 多表单验证详解 在前端开发中，表单验证是十分重要的环节之一...在实际开发过程中，还可以根据具体需求进行扩展，比如增加更复杂的验证规则、自定义错误提示信息等，使得表单验证更加灵活和强大。
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
在本场景中，使用了Element UI库的`el-form`组件来构建表单，它提供了丰富的表单元素和表单验证功能。在实现添加和编辑功能时，一个常见的挑战是如何在表单提交后清空数据，以便用户可以进行下一次操作，比如添加新...
el-form表单中的el-upload的文件表单验证
dayday_0724的博客
06-25 1776
解决使用element-ui的upload组件中文件表单验证问题
el-form-item表单根据后台返回的数据项展示校验错误信息
monkey7
12-06 1609
el-form error属性 动态设置表单验证状态变为error 红框高亮 并显示错误信息
element表单根据接口返回提示信息
a811567770的博客
07-16 993
elementui表单根据接口返回提示错误信息 我用到的地方是修改密码的时候提示原密码是否正确
【el-form】表单验证失败定位滑动到失败的位置
weixin_55639808的博客
12-12 1465
提交的表单过长，出现滚动条时，点击‘确定’触发表单检验后，页面看不到的表单项报错，但是用户在页面不能感知到，这时需要将滚动条滚动至校验失败项处。
vue-element Form表单验证的一个小细节，不然一直提示错误信息
DryJiuOver的博客
08-23 1164
今天又发现一个小细节，把握住啊兄弟姐妹们！ 在使用vue-element Form表单验证时，prop的值与rules规则里面验证项的名字保持一致，却还是一直报错 这tm的到底是为什么？？！！ 男人一定要细，我说的是心一定要细QaQ~ prop的值不但要与rules规则里面验证项的名字保持一致，还要跟input框中v-model绑定的数据名一致 修改之后三个值保持一致，成功解决问题 得益麻烦点个小小的赞哦~ ...
el-form 错误提示信息不消失
lsn690607887的博客
02-16 1082
el-form 错误提示信息不消失
element-ui表单实现根据后台返回数据在指定字段下提示错误信息
热门推荐
xiaojing的博客
07-10 1万+
今天使用element-ui表单做注册、登录功能，需要根据后台返回的数据，如返回错误提示，需在相应的字段下进行提示，比如验证码错误等。。。 element-ui的form-item有一个error属性可以进行设置错误信息，在接口返回信息后，设置error信息 有一个表单如下： <el-form :model="ruleForm" status-icon :rules="rules" ...
element-ui中el-form自定义验证（调用后端接口）
HoShining日志
10-19 5686
需求 在输入项目名称后，调用后端接口isNameOnly，若已存在，则效果如下图： 先设置校验规则rules <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> 在return中定义 // 判定规则 rules: { taskName: [{
根据后端接口返回数据，动态展示并验证element表单项的一个思路
xiaoboxiaoxing的博客
09-02 1470
代码如下 <template> <div class=""> <tips :tips="tips" /> <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" size="medium" style="width:400px" class="demo-ruleForm"> <el-form-item v-f
elementUI el-form-item表单验证怎么显示后台返回的错误信息
wocwin的博客
09-03 1400
elementUI el-form-item表单验证怎么显示后台返回的错误信息
el-form表单验证规则rules el-tree
最新发布
01-08
### 如何在 `el-form` 中为 `el-tree` 组件配置和使用自定义验证规则 为了实现在 `Element UI` 的 `el-form` 表单中对 `el-tree` 组件应用验证规则，可以按照如下方法操作： #### 定义表单模型与初始状态 创建一个用于存储树形控件选中节点的数据字段，在初始化时设定为空或默认值。 ```javascript data() { return { form: { treeSelection: [] // 存储被选中的节点ID列表或其他标识符 }, rules: { /* 验证规则 */ } }; } ``` #### 设置验证规则 对于 `el-tree` 控件而言，通常会关注是否有选项被勾选。因此可以在 `rules` 属性下针对上述定义的 `treeSelection` 字段指定相应的校验逻辑[^1]。 ```javascript rules: { treeSelection: [ { required: true, message: '请选择至少一项', trigger: ['change'] } // 当触发条件满足时执行此条规则 ] }, ``` #### 自定义验证函数 如果需要更复杂的业务场景下的验证，则可以通过编写自定义验证器来完成特定需求。这允许开发者根据实际应用场景灵活调整验证行为。 ```javascript methods: { validateTree(value, callback) { if (this.form.treeSelection.length === 0) { callback(new Error('必须选择至少一个节点')); } else { // 进行其他复杂判断... callback(); } } } // 将其加入到rules里 rules: { treeSelection: [{ validator: this.validateTree, trigger: ['blur', 'change'] }] } ``` #### 使用 `el-tree` 和关联至 `el-form-item` 最后一步是在模板部分正确地将这些元素组合起来，并确保它们之间能够正常交互工作。 ```html <el-form :model="form" :rules="rules" ref="ruleForm"> <!-- ... --> <el-form-item label="树形结构：" prop="treeSelection"> <el-tree show-checkbox node-key="id" :default-checked-keys="form.treeSelection" @check-change="(nodeObj, checked) => handleCheckChange(nodeObj, checked)" :data="treeData"></el-tree> </el-form-item> <!-- ... --> </el-form> ``` 在此基础上还需要处理当用户改变选择时更新表单域的状态，即实现 `handleCheckChange()` 方法以便同步最新的选择情况给 `form.treeSelection` 变量。 ```javascript methods: { handleCheckChange(data, checked) { const selectedKeys = []; function traverse(nodes) { nodes.forEach((node) => { if (node.checked || (checked && data.id === node.id)) { selectedKeys.push(node.id); } if (node.children && node.children.length > 0) { traverse(node.children); } }); } traverse(this.$refs.ruleForm.getCheckedNodes()); this.form.treeSelection = [...new Set(selectedKeys)]; } } ``` 通过这种方式就可以有效地把 `el-tree` 节点的选择状况纳入整个表单提交前后的合法性检查流程之中了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值