【小5聊】Vue基础开发之el-form表单自定义规则校验value为underfind的情况

最新推荐文章于 2023-08-16 15:04:05 发布
最新推荐文章于 2023-08-16 15:04:05 发布
阅读量742 收藏 1
点赞数 1
分类专栏： Vue 文章标签： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lmy_520/article/details/123440945
版权

稍微没仔细看清楚官方例子，就很容易踩坑了

1、underfind

自定义规则校验underfind的情况如下

 

2、原因

标签属性搞错，v-model应该改为:model

  • 修改后效果

 

3、官方例子

全栈小5
关注
专栏目录
vue2表单校验：添加自定义el-form表单校验规则
l_q_l的专栏
08-27 843
其中的自定义函数checkPeople，来自定义检查规则。rules:{people:[this.checkPeople(rule, value, callback) //自定义校验方法},//message: '请添加人员',],//自定义验证的逻辑if(!return callback(new Error(`请添加人员`));}else{//判断重复项i++) {j < i;j++) {
【Vue项目实战】常见的el-form表单校验整理==＞异步调接口校验手机号唯一性
Sabrina_cc的博客
07-18 3983
本文主要总结elementUI 中el-form的表单校验，手机号，邮箱，密码，并且提供了异步校验手机号唯一性的方法。
element-ui自定义正则校验规则value为underfind的坑
li_yunsong的博客
12-12 2059
很简单，直接上代码，但是有个坑，formEdit.cpd这个cpd如果和rules名字不同，那么validPassWorld 重的回调value就是underfind. <template> <el-form-item label="确认密码" v-if="dialogType === 'add'" prop="cpd"> <el...
表单验证rules，多层嵌套对象获取value值为undefined，输入有值却校验失败？
weixin_44208883的博客
10-06 1275
原因分析： 表单验证rules，多层嵌套对象获取value值为undefined，输入有值却校验失败？ 对象里的值要一一对应到输入框的model，rules也要一一对应。 解决方案： <s-form :model="models" :rules="rules" > <s-form-title title="商品信息" /> <div v-for="(item, index, key) in models.sku_list" :key="key
VUE下拉框获取value值
weixin_41331190的博客
07-31 1034
element form表单validate验证打印值undefined
weixin_60208344的博客
12-21 3865
官方网站地址 日常开发中经常会用到对form表单的规则进行校验，借助第三方组件也会让我们使用起来更加的方便，也是记录一下自己遇到的一点小问题 话不多说上代码：
elementUI下拉框回显时未显示label而是显示value问题!!!
choupixiaolin的博客
06-23 1488
elementUI下拉框回显时未显示label而是显示value问题!!!
vue表单自定义校验规则介绍
10-18
Vue提供了多种方式来处理表单验证，其中自定义校验规则是一个灵活且强大的功能，允许开发者根据具体需求定制验证逻辑。在本篇文章中，我们将深入探讨如何在Vue中实现表单的自定义校验规则。 首先，让我们看一个简单...
【ElementUI 表单校验】一个 el-form-item 下多个表单校验（循环校验）
前端知识分享喵
06-07 3630
前端开发项目的过程中，批量表单循环校验是很常见的，如上图，动态添加奖励计算规则，把所有的表单放到了一个 el-form-item 下。也可以理解为 el-form-item 做了嵌套，外层当然也可以省略，样式做微调，下面通过代码来详细的看一下。不足之处，多多交流。
循环添加el-form表单，并加校验； 循环a-form表单
qq_42401946的博客
12-09 2418
<template> <div> <el-form :model="formData" :inline="true" ref="formData" label-width="65px" size="medium" > <el-row v-for="(item, index) in formData.loopFormList" :key="ite
vue中表单验证数据总是undefined
庭落
11-28 3322
注意变量名称的对应
element-ui表单验证，value一直为undefined的一种可能解决方案
热门推荐
HermitSun的博客
04-18 1万+
有很多人遇到过这个问题，但是一般都是因为prop没写对，或者没有在data里声明；但我遇到的情况这两者都不是。代码如下： <template> <el-form :rules="rules"> <el-form-item prop="value"> <el-input v-model="form.value"/> &l...
表单自定义校验获取的value为undefined(element ui)
qq_45331969的博客
09-06 7595
表单自定义校验 先看一段官网代码(取了一小部分)： <el-form :model="ruleForm" :rules="rules"> <el-form-item label="年龄" prop="age"> <el-input v-model.number="ruleForm.age"></el-input> </el-form-item> </el-form> export default { data(
Vue中自定义校验
最新发布
AgoniWU的博客
08-16 587
初始化定义校验内容// { required: true, message: "请选择押品类别", trigger: "change" },],data中校验规则//押品类别自定义校验//value可以随时监听表单中输入对应字段的值，并且写校验规则及正则callback(new Error('请至少选择一项'));
vue 下拉框多选校验问题
weixin_41175479的博客
12-21 6022
最近发现下拉框多选（multiple）时，一开始进页面就会触发验证，显然是不友好的。 解决方案： 在校验规则里加type："array"； 下拉多选框绑定的变量初始值设置为[] html多选框如下： <el-form-item label="责 任 人" prop="chargepersonid"> <el-select multiple clearable v-model="infoForm.chargepersonid" size="small"
vue element-ui form表单验证valid undefined
guojing5721的专栏
03-15 7219
使用element-ui 的form表达验证功能，调试时valid一直是未定义，是自定义表单验证，最后发现问题是没有return 或者callback
vue：vue+ element ui 表单验证有值但验证失败
听闻如故的博客
07-14 2437
在使用vue做表单提交验证时，出现了无法实现正确的判断的情况，如下 贴上我的代码 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px""> <el-form-item label="用户名" prop="userName"> <el-input v-model="ruleForm.name"></el-input> </el-form.
element-ui自定义正则校验规则value一直为underfind
weixin_46468143的博客
03-04 758
第一排查你的验证规则有没有写对 第二看看prop是否和命名的一样 第三 el-form必须也要绑定 ：model
vue3 语法糖如何自定义el-form校验规则
05-30
在 Vue 3 中，可以使用 `v-model` 指令的 `v-bind` 和 `v-on` 缩写语法糖结合 Element-Plus 中的 `el-form` 组件自定义校验规则。具体步骤如下： 1.在 `template` 中使用 `el-form` 组件包裹表单，并添加需要校验的表单项。 ```html <el-form ref="form" :model="formData" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="formData.username"></el-input> </el-form-item> </el-form> ``` 其中，`:model` 属性绑定表单数据，`:rules` 属性绑定校验规则。 2.在 `data` 选项中定义表单数据及校验规则。 ```javascript data() { return { formData: { username: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { validator: this.validateUsername, trigger: 'blur' } ] } } }, ``` 其中，`rules` 对象中的 `username` 属性表示需要校验的表单项，`required` 表示必填（不能为空），`validator` 表示自定义校验方法，`trigger` 表示校验触发时机（此处为失去焦点时触发校验）。 3.定义自定义校验方法 `validateUsername`。 ```javascript methods: { validateUsername(rule, value, callback) { if (value.length < 6) { callback(new Error('用户名长度不能少于 6 个字符')) } else { callback() } } } ``` 其中，`rule` 表示当前校验规则，`value` 表示当前表单项的值，`callback` 是一个回调函数，用于返回校验结果。如果校验不通过，调用 `callback` 方法并传递一个 `Error` 对象，表示校验不通过并设置错误信息。如果校验通过，调用 `callback` 方法并不传递任何参数。 注意：在自定义校验方法中，需要使用 `callback` 方法返回校验结果，否则会出现校验无效的情况。 以上就是使用 Element-Plus 中的 `el-form` 组件结合 Vue 3 的语法糖自定义校验规则的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全栈小5

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值