表单自定义校验获取的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 表单校验

相关推荐
console.log('npc')15 小时前
周期任务功能完整实现:CRON 编辑器 + 模板变量 + 执行历史
javascript·vue.js·编辑器
qq_3400408819 小时前
idea2021版,vue项目的package.json不展示scripts的绿色箭头
javascript·vue.js·json
志尊宝20 小时前
AI原生前端开发(037):AI辅助的Vue 3开发最佳实践
前端·vue.js·ai-native
徐小夕20 小时前
扒了JitWord的源码,我终于搞懂了企业级在线Word到底有多难写
前端·vue.js·github
大团米线21 小时前
vite多环境合并打包config
javascript·vue.js·ecmascript
喜欢吃豆21 小时前
我开源了 Agent UI Lab 用交互实验理解 AG-UI A2UI 与 MCP Apps
ui·开源·大模型·交互
定栓1 天前
Vite-legacy产物console删除机制
前端·javascript·vue.js
康小汪1 天前
AI 写 Vue 总写成同一个味道:给它装 Skills,装的不是知识是边界
前端·vue.js·人工智能·ai编程·最佳实践
染指11101 天前
158.Agent-LangGraph-子图(共享状态和不共享状态模式)
开发语言·人工智能·python·ui·agent·agents