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

相关推荐
Zevalin爱灰灰39 分钟前
MATLAB GUI界面设计 第六章——常用库中的其它组件
开发语言·ui·matlab
前端开发与ui设计的老司机1 小时前
数字孪生技术引领UI前端设计潮流:增强现实(AR)的集成应用
ui
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
浏览器API调用工程师_Taylor2 小时前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
一个水瓶座程序猿.2 小时前
Vue3 中使用 Vueuse
前端·javascript·vue.js
网络点点滴3 小时前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html
paopaokaka_luck3 小时前
基于SpringBoot+Vue的酒类仓储管理系统
数据库·vue.js·spring boot·后端·小程序
共享ui设计和前端开发人才3 小时前
UI前端与数字孪生结合探索:智慧建筑的能耗管理与优化
前端·ui·状态模式
雲墨款哥4 小时前
Vue3.0 项目初始化及 Element Plus 配置实战
前端·vue.js
前端小饭桌4 小时前
关于 Vue 3 的 ref,这些细节你了解了多少?
前端·vue.js