elementUI 表单验证:获取到input中的值(value),显示undefined

<el-form ref="dataForm" :rules="rules" :model="dataForm" label-width="100px">
    <el-form-item label="年龄" prop="infoList.age">
    <el-input v-model="dataForm.infoList.age" type="text" />
    </el-form-item>
 </el-form>
<script>
  export default {
    data() {
      const valiNonnegative = (rule, value, callback) => { // 非负数
      const reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
      if (!reg.test(value)) {
        callback(new Error('请输入非负数'))
      } else {
        callback()
      }
    };
      return {
        dataForm: {
          infoList: {
             age:''
            }
        },
        rules: {
          'infoList.age': { validator: valiNonnegative , trigger: 'blur' }
        }
      };
    }

原本出错的地方 如下: 

 

参考:vue-element Form表单验证踩坑(表单验证明明有值,却提示错误)

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
要对表单里的 `el-input-number` 添加校验,可以使用 `rules` 属性来实现。 例如,我们要对一个 `el-input-number` 组件进行校验,要求输入的必须大于等于10,可以这样写: ```html <el-form-item label="数量" prop="num"> <el-input-number v-model="form.num" :min="10"></el-input-number> </el-form-item> ``` 其,`prop` 属性用于指定校验的属性名,`min` 属性用于指定最小。 同时,还需要在 `el-form` 组件上设置 `rules` 属性,来进行校验规则的配置。例如: ```html <el-form :model="form" :rules="rules"> <!-- 表单项省略 --> </el-form> ``` 其,`rules` 数组每个元素表示一个校验规则,可以使用 `validator` 属性指定一个校验函数,例如: ```js export default { data() { return { form: { num: null }, rules: [ { prop: 'num', validator: this.validateNum, trigger: 'change' } ] } }, methods: { validateNum(rule, value, callback) { if (value < 10) { callback(new Error('数量不能小于10')) } else { callback() } } } } ``` 上述代码,`rules` 数组只包含一个元素,表示对 `num` 属性进行校验。`validator` 属性指定了一个校验函数 `validateNum`,该函数接收三个参数: - `rule`:校验规则对象,包含 `prop` 属性等信息 - `value`:当前表单项的 - `callback`:校验结果的回调函数,接收一个 `Error` 对象或者 `undefined` 在校验函数,需要根据实际需求完成校验逻辑。如果校验通过,需要调用 `callback()` 来通知校验成功,如果校验不通过,需要调用 `callback(new Error('错误提示'))` 来通知校验失败并提示错误信息。此外,`trigger` 属性可以用来指定触发校验的事件,默认为 `change`。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

路痴不脸盲

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值