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

相关推荐
森林的尽头是阳光7 分钟前
tree回显问题
javascript·vue.js·elementui
qetfw1 小时前
MWU:Vue 3 + FastAPI 的 MaaFramework 跨平台 WebUI 源码
前端·vue.js·python·fastapi·开源项目·效率工具
mfxcyh1 小时前
Vue3+Ant Design Vue 实现手动异步文件上传(含大小校验、弹窗上传)
前端·javascript·vue.js
meilindehuzi_a2 小时前
Vue3进阶基础:指令修饰符、v-model表单绑定、动态样式、计算属性与侦听器实战
前端·javascript·vue.js
csdn2015_2 小时前
vue 前端运行命令
前端·javascript·vue.js
Cobyte2 小时前
根据浏览器解析 HTML 的规范实现 HTML 解析器
前端·javascript·vue.js
用户83134859306983 小时前
Cesium 实现行政区反向遮罩镂空效果(自定义暗色蒙层+矢量/影像底图切换)
vue.js·webgl·cesium
薛定谔的猫-菜鸟程序员4 小时前
一个 Skill 如何让大模型拥有专业 UI 能力?——ui-ux-pro-max 架构深度拆解与 Skill 设计方法论
人工智能·ui
张人玉4 小时前
基于 Vue 3 + ECharts + Express + SQLite 构建的鞋类零售数据分析与毛利预测平台——基于深度学习的鞋类销售数据分析系统
vue.js·sqlite·echarts·express
独泪了无痕14 小时前
Vue3 Hooks使用实战解析
前端·vue.js