element数字类型校验----非必填问题

最新推荐文章于 2023-12-13 16:43:55 发布

qq_44869241

最新推荐文章于 2023-12-13 16:43:55 发布

阅读量1.1k

点赞数 3

分类专栏： element表单校验文章标签： vue forms vue.js

本文链接：https://blog.csdn.net/qq_44869241/article/details/108127593

版权

本文介绍了在Element UI中，针对数字类型校验的非必填情况的处理方法，包括v-model的number修饰符使用、rules中添加字符串转数字的transform方法以及如何在前端处理默认值为0的情况。

摘要由CSDN通过智能技术生成

element官网数字类型校验的错误处理：如果非必填，校验结果不通过，必须注意一下两点。
1.v-model加修饰符 v-model.number
2.校验rules添加字符串强制转换数字方法
transform (value) {return Number(value)}
3. 点击按钮提交时，如果表单没有输入数字值，组件会默认该值为0，如果后台不允许输入默认值，必须在前端处理，如下：

strNumber(value){
      if(Number(value)===0){
        return ''
      } else {
        return Number(value);
      }
    }

以官网为例，修改后代码如下

<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="年龄"
    prop="age"
    :rules="[
      { type: 'number', message: '年龄必须为数字值',transform (value) {return Number(value)}}
    ]"
  >
    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off">