element数字类型校验----非必填问题_element 年龄必须为数字值 可为空-程序员宅基地

技术标签: vue  vue.js  forms  element表单校验  

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"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
    <el-button @click="resetForm('numberValidateForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        numberValidateForm: {
          age: ''
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_44869241/article/details/108127593

智能推荐

Java8 Stream 流的创建、筛选、映射、排序、归约、分组、聚合、提取与组合、收集、接合、foreach遍历_java foreach 分组排序-程序员宅基地

文章浏览阅读1.5k次,点赞3次,收藏22次。无论新手小白还是老程序员,都能看的懂,学得会的Java8 Stream. 里面有很多案例关于Stream流的使用,学完这个会让你在工作中事半功倍。我是因为在工作中不会用Stream流,被动离职了,呜呜呜。发誓含泪学习,写下这37500字 Stream流的用法。这是我发布的第一篇文章,码字不易,还望各位老师支持一下,十分感谢!!!_java foreach 分组排序

前端面试拾遗——this、类型检测、es6_前端面试es6的新特性-程序员宅基地

文章浏览阅读1.2k次。前端面试拾遗——this、类型检测、es6前言 上一篇文章主要讲了我到某公司面试前端岗位时跟CSS有关的部分,这一篇文章将会总结一下面试过程中跟JS有关的部分,JS部分面试官主要问到了JS的类型以及ES6新增的类型,如何改变函数中this指针的指向,以及说一下平常使用过的ES6新特性。下面会有我面试后查阅资料后的相关解答。this相关 关于this的详细介绍可以查看 MDN this 。在谈如何改变_前端面试es6的新特性

手机怎样合成gif动图?多张图片怎样合成gif?_手机图片转gif-程序员宅基地

文章浏览阅读931次。在处理一些不是很复杂的图片时,大家已经不再依赖电脑,越来越多的人开始使用手机来编辑图片。一般大家处理静态图片比较多,如果将多张静态图片合成gif动图手机上可以完成吗?答案是可以的。想要多图合成gif(https://www.yasuotu.com/gifhecheng),只要使用这款gif合成工具就可以了,不管是静态图片,还是动态图片都可以合成更有意思的gif动图,小伙伴赶紧跟随着小编的步伐,一起来看看手机gif制作是怎么操作的吧!1、打开压缩图网站,选择多图合成gif功能。2、点击上传图片按钮上传图片_手机图片转gif

工单预约表单plus v3.22.10_工单预约表单plus–v3.22.11-程序员宅基地

文章浏览阅读457次。收费项目增加支持手填数量_工单预约表单plus–v3.22.11

简繁体转换的JS代码(看不懂,留着备用)_l-blog添加简繁转-程序员宅基地

文章浏览阅读5.1k次。//================================================================================== // Copyright (c) 1998-2007 by www.bizservice.com.cn, All rights reserved. // Email:contact@bi_l-blog添加简繁转

UVa - 10815 Andy's First Dictionary(STL)_uva10815 andy's first dictionary(stl)-程序员宅基地

文章浏览阅读661次。题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=18649#include #include #include #include using namespace std;/******************************************************************_uva10815 andy's first dictionary(stl)

随便推点

利用arcpy进行地图整饰_自动生成整饰-程序员宅基地

文章浏览阅读1.5k次。1、前言 最近项目需要通过软件出宗地图,但是软件输出的mxd未能达到成果要求,但是图的数量很大,人工修改会增加工作量,故想到通过arcpy批处理进行宗地图的整饰。 2、整饰要素 主要通过三个字段计算到需标注字段内,并进行符号编辑和标注。 a 首先获取文件夹下的所有mxd文档:def GetAllFiles(dir): allmxd = [] dirs = os.listdi_自动生成整饰

2、Vue 计算属性、过渡&动画、组件、路由(系列:Vue深入学习)_vue 3中,如果要在元素进入和离开过渡时触发钩子函数,应该使用哪个生命周期钩子?-程序员宅基地

文章浏览阅读638次。计算属性什么是计算属性在插值表达式中使用表达式是非常便利,但是实际进行开发中我们不可能把插值表达式写的很复杂。如果把表达式写的过于复杂,这就增加了维护的难度。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。例子:<div id="app"> {{ reverseText }}</div><s..._vue 3中,如果要在元素进入和离开过渡时触发钩子函数,应该使用哪个生命周期钩子?

计算机专业开题报告案例84:基于Python爬虫的二手房产统计展示系统的设计与实现-程序员宅基地

文章浏览阅读954次,点赞13次,收藏19次。需要源码可以滴滴我。

Java---IO加强(2)-程序员宅基地

文章浏览阅读5.3k次。转换流★转换流功能1:充当字节流与字符流之间的桥梁需求:模拟英文聊天程序,要求: (1) 从键盘录入英文字符,每录一行就把它转成大写输出到控制台; (2) 保存聊天记录到字节流文件。要求1的设计分析:1)需要从键盘接收录入,得用System.in,它是字节输入流InputStream; 2)需要处理字符,可以自己把字节强转成字符,也可以用字符流; 3)需要类似readLi

实现一个外部数据源_extends relationprovider with schemarelationprovid-程序员宅基地

文章浏览阅读515次。文章目录JDBCrelationprovider模仿JDBCrelationproviderJDBCrelationBaserelationPrunedFilteredScan模仿JDBCrelation代码里的Utils.castTo要定义一个外部数据源可以参考JDBCrelation和JDBCrelationprovider。JDBCrelation相当于用户可以使用里面的方法实现数据s..._extends relationprovider with schemarelationprovider

页面跳转传参:参数过长(cookie,url , AngularJs controller 传参实现)_angular 路由传参数据过长怎么办-程序员宅基地

文章浏览阅读8k次,点赞3次,收藏2次。页面跳转传参:参数过长(cookie传参,url 传参, AngularJs controller 传参实现),页面刷新参数保留_angular 路由传参数据过长怎么办

推荐文章

热门文章

相关标签