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

相关推荐
yuanmenglxb2004几秒前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
会飞的鱼先生19 分钟前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
秋天的一阵风24 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风25 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
JustHappy1 小时前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
PM大明同学1 小时前
Axure PR 9 中继器 标签
ui·交互·产品经理·axure
风一流世1 小时前
详解Adobe Photoshop 2024 下载与安装教程
ui·adobe·photoshop
海天胜景2 小时前
vue3 el-table 右击
javascript·vue.js·elementui
樊小肆2 小时前
Vue3 在线 PDF 编辑 2.0 缩放拖拽、渲染优化功能解析
前端·vue.js·开源
Java~~2 小时前
山东大学软件学院项目实训-基于大模型的模拟面试系统-网页图片显示问题
javascript·vue.js