表单自定义校验获取的value为undefined(element ui)

javascript 复制代码
<el-form :model="form" :rules="rules">
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="form.age"></el-input>
  </el-form-item>
</el-form>  
javascript 复制代码
 export default {
	data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        if (!Number.isInteger(value)) {
           callback(new Error('请输入数字值'));
        } else {
           if (value < 18) {
             callback(new Error('必须年满18岁'));
           } else {
             callback();
           }
         }
      };
      return {
        form: {
          age: ''
        },
        rules: {
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
}

可能原因有一下几点:

1首先: el-from 里面要绑定modal和rules, :model="ruleForm" :rules="rules" ;

然后:el-form-item 里面的 prop对应绑定一个rules里面的规则,prop="age";

input输入框里面要绑定 v-model.number="ruleForm.age"

2,form和rules里面对应的key一定要相同,一个是数据绑定的值 另外一个是值的规则。

  1. 仔细检查下每个标签里面对应的值是否正确。

    详细的表单校验请访问 Element UI 官网:Element UI 表单校验

相关推荐
web3d52044 分钟前
Vue3 地图白屏排查清单:容器、弹窗与 ol-viewport 重复创建
vue.js·gis
hai_android5 小时前
一个公式看懂动态跨表查找:P8 + VLOOKUP
前端·javascript·vue.js
Cx330❀6 小时前
Qt 多线程深度解析:从底层原理到 UI 线程与同步实战
开发语言·qt·ui·搜索引擎·性能优化·图形渲染
传奇开心果编程7 小时前
【声明式UI实用开发技术学与练】第5课 表单处理:受控与非受控
ui·移动开发·开发范式·编程框架·声明式ui
wdssmq8 小时前
「折腾」Vue 简单的状态管理实践
vue.js
传奇开心果编程9 小时前
【声明式UI开发实用技术学与练】第9课 派生状态与计算
ui·移动开发·ux·编程框架·声明式ui
Q264336502310 小时前
【有源码】基于Spring Boot和Vue的在线考试与交流系统-教育信息化背景下在线考试与交流一体化平台
java·vue.js·spring boot·mysql·spring·毕业设计·课程设计
ZARD99611 小时前
Codex 连接 Figma:让 AI 读取 Figma UI 设计稿数据
ui·figma·codex
事圆则缓12 小时前
Android 一次性事件怎么设计:Channel、SharedFlow 还是 UI State?
android·ui
我命由我1234512 小时前
Photoshop - Photoshop 使用魔棒工具选择单独的区域
学习·ui·职场和发展·求职招聘·职场发展·学习方法·photoshop