Element-ui 的el-form组建中,自带基本的验证功能,比如某些项必填的验证,直接加入rules 规则中即可,如下实例:

在页面中书写如下:

  1. <el-form-item label="月份:" prop="firstDay">
  2. <common-month-select :year="year" @monthChange="monthChange" :selectMonth="selectMonth"></common-month-select>
  3. </el-form-item>

在vue 初始化data中

  1. filterForm: {
  2. firstDay: '',
  3. lastDay: ''
  4. },
  5. rules: {
  6. firstDay: [{ type: 'string', required: true, message: '请选择日期范围', trigger: 'submit' }],
  7. lastDay: [{ type: 'string', required: true, message: '请选择日期范围', trigger: 'submit' }],
  8. }

这样就会对日期进行必填验证。

但是现在遇到一个这样的问题,表单中有一个数据,比如是数字,但是又非必填项,这时候直接使用上面的方式进行验证,就会出现问题。

比如,如果没有填写数字,提交表单的时候就会提示设定的警告信息,这不是我们想要的,因为是非必填项,所以当用户不填写的时候,应该也可以直接提交,填写的时候,验证必须是数字即可。

解决方案:在rules 中验证这个功能的时候,对填写的数值进行判断

  1. rules: {
  2. averageCaseRunTime: [{
  3. type: 'number',
  4. trigger: 'blur',
  5. required: false,
  6. message: '平均用例运行时长必须为数字值',
  7. transform (value) {
  8. return _.toNumber(value)
  9. }
  10. }]
  11. }

这样在提交的时候,就不会因为用户没有输入任何数值,提示警告信息了。

Element 中表单非必填数据项 必须为数字的验证问题的更多相关文章

  1. Vue Elementui 表单必填项和非必填项label文字对齐的简单方式

    1. 不好的方式 很长时间以来都是用改写form-item样式来使得必填项和非必填项保证label对齐,这样需要改写系统样式,还要在相应的item上引用,代码量增多,示例如下(不推荐) <tem ...

  2. SpringMVC 上传文件(文件非必填)MultipartHttpServletRequest

    原文:https://blog.csdn.net/dorothy1224/article/details/79136676 上传文件(文件非必填)MultipartHttpServletRequest ...

  3. 将ECSHOP会员注册页面的Email修改成非必填项

    将ECSHOP会员注册页面的Email修改成非必填项 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2011-07-29   有人说,在后台的 “会员注册项设置 ”里面 ...

  4. discuz X3.2邮箱非必填

    最近有个需求是:邮箱非必答,但是X3.2是邮箱必填: 找到资料:http://www.51php.com/discuz/17147.html 但是修改后不起作用!提示‘Email 地址无效’! 用fi ...

  5. 织梦dedecms自定义表单设置必填项

    1. 用php验证 在plus/diy.php的第 40行下加 //增加必填字段判断 if($required!=''){ if(preg_match('/,/', $required)) { $re ...

  6. lay-verify进行非必填项校验

    它默认都验证了! 需要调整源码!form.js,layui.all.js this.config = { verify: { required: [/[\S]+/, "必填项不能为空&quo ...

  7. AngularJS 表单验证手机号(非必填)

    代码: <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" ...

  8. v-show和element中表单验证validate起到的化学反应

    说起v-show和v-if,进行前端开发的大家一定不会陌生,他们都是用来控制标签元素的显示与隐藏的,他们的区别就是v-show会把标签渲染出来,只是会隐藏起来,相当于visibility:hidden ...

  9. element 中表单验证的解析。

    https://blog.csdn.net/qq_24504591/article/details/88048894 https://segmentfault.com/a/11900000125513 ...

随机推荐

  1. Unity5.X 新版AssetBundle打包控制

    一.什么是AssetBundle 估计很多人只知道Unity的模型之类的东西可以导出成一种叫做AssetBundle的文件,然后打包后可以在Unity程序运行的时候再加载出来用.那么AssetBund ...

  2. 小结:bfs

    概要: 我们在初始状态要到达终止状态可以沿着同深度的向下搜索,这样范围覆盖更广,在解的深度较小的时候十分适用. 技巧及注意: 所有状态在转移后如果要打标记一定要在进队列前打!不要在出队列才打!否则就是 ...

  3. PHP实现对站点内容外部链接的过滤方法

    熟悉SEO的朋友都知道,对于网站外部链接失效的情况如果链接带有rel="nofollow"属性可以避免不必要的损失.本文就以实例形式演示了PHP实现对站点内容外部链接的过滤方法.具 ...

  4. 【mysql-python】安装+基本使用

    安装:从SourceForge.net上下载最新的MySQLdb,http://sourceforge.net/projects/mysql-python/ 运行exe文件 使用 From:http: ...

  5. ssh证书登录(实例详解)

      前言 本文基于实际Linux管理工作,实例讲解工作中使用ssh证书登录的实际流程,讲解ssh证书登录的配置原理,基于配置原理,解决实际工作中,windows下使用SecureCRT证书登录的各种问 ...

  6. GIS Cesium地图数据配置

    1.打开IIS,点击站点 2.跨域配置 配置方式: 在地图数据目录之中放置web.config文件,里面存放 <?xml version="1.0" encoding=&qu ...

  7. Perfmon - Windows 自带系统监测工具

    本文转载自oscar999 一. 简述 可以用于监视CPU使用率.内存使用率.硬盘读写速度.网络速度等. Perfmon提供了图表化的系统性能实时监视器.性能日志和警报管理,系统的性能日志可定义为二进 ...

  8. [JAVA]基于微信公众平台开放接口编写的sdk

    最近在研究微信公众平台提供的公众服务号,以及提供的开放接口. 写了一个相对来说比较简单的基于java的微信sdk,目前实现的功能没有覆盖所有接口. 有兴趣的话,大家可以在这个基础上进行改进和完善,这样 ...

  9. Mac自带Apache和Php

    Mac 是默认安装 apache和php,但是需要使用root用户来启用,所以请按照我下面的步骤来: 一.启用root用户1.选取系统偏好设置....2.从显示菜单中,选取“帐户”.3.点按锁图标并使 ...

  10. Pulsar

    The Apache Software Foundation Announces Apache® Pulsar™ as a Top-Level Project : The Apache Softwar ...