Element 中表单非必填数据项 必须为数字的验证问题

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 中验证这个功能的时候,对填写的数值进行判断

 rules: {
          averageCaseRunTime: [{
            type: ‘number‘,
            trigger: ‘blur‘,
            required: false,
            message: ‘平均用例运行时长必须为数字值‘,
            transform (value) {
              return _.toNumber(value)
            }
          }]
        }

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

原文地址:https://www.cnblogs.com/x123811/p/8873926.html

时间: 2024-11-07 04:53:42

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

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

将ECSHOP会员注册页面的Email修改成非必填项 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2011-07-29 有人说,在后台的 “会员注册项设置 ”里面不是可以控制是否必填吗??我就碰到好几个人这么说过.其实是他看问题不认真,这里说的是“将会员注册页面的email修改成非必填项”,注意是 email , 那个"会员注册项设置"里是不包括EMAIL的 闲话少叙,下面就来说一下方法,注意此方法是在Ecshop2.7.2版上修改的,针对以前版本的修

将会员注册页面的Email修改成非必填项(ecshop2.7.2版)

"将ECSHOP会员注册页面的email修改成非必填项",注意是 email , 那个"会员注册项设置"里是不包括EMAIL的 闲话少叙,下面就来说一下方法, 注意此方法是在官方默认模板上修改的 1). 首先来修改模板文件, 这里以官方默认模板为例 打开 /themes/default/user_passport.dwt 文件 找到 onblur="checkEmail(this.value);" 将其删除,继续向下找到 <span id=

access数据库里面字段设置可以为空值和非必填的方法

access数据库中默认的一些字段值常常是不允许为空.必填的,结果容易造成在插入数据时缺少数据报错无法插入,可以通过下方修改数据库:  

lay-verify进行非必填项校验

它默认都验证了! 需要调整源码!form.js,layui.all.js this.config = { verify: { required: [/[\S]+/, "必填项不能为空"], phone: [/(^$)|^1\d{10}$/, "请输入正确的手机号"], email: [/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "邮箱格式不正确"]

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

代码: <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> <p>电话:<br> <input type="text" name="phone" ng-model="phone" ng-pattern="/(^$)|^(((\+86)|(

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

说起v-show和v-if,进行前端开发的大家一定不会陌生,他们都是用来控制标签元素的显示与隐藏的,他们的区别就是v-show会把标签渲染出来,只是会隐藏起来,相当于visibility:hidden和opacity:0;的作用,而v-if如果为false的话,则标签都不会被渲染,相当于display:none;的作用,那么他们到底会和表单验证产生什么化学反应呢,下面就来看看我踩的这个坑吧. 这里我们可以看到element 上对于validate的一个解释,也就是他会帮我们验证表单里面的数据是否

js表单建立必填字段

在填写表单时可能希望用户必须填写某些字段或者两段填写的字段相匹配,然后才能提交表单,这里就可以用js来实现 下面是建立一个基础表单的HTML代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset = "utf-8"> 5 <title>Password check</title> 6 <link rel="stylesheet" typ

BPM实例分享:动态设置字段必填

一些业务场景中,需要动态设置字段的必填. 比如QA场景中,选择不合格的时候,必须要填写原因,合格时不需要. 设置必填后,提交时会进行验证. //设置字段的必填样式 function setRequired(field, flag, row) { var ele = $.MvcSheetUI.GetElement(field, row) var ui = ele.SheetUIManager(); if (ele != null) { ui.Required = flag; if (flag) {

ExtJS4为form表单必填项添加红色*标识

通常情况下,ExtJS4的form表单必填项在输入状态下会有特殊提示,非输入状态下,显示却和其他项没有任何区别.为使必填项更加容易区分,我们需要根据allowBlank的属性值,为form表单中的必填项添加红色*标识 在ExtJS4的form表单中,常用组件的继承关系图1-1: //为form表单中必填项添加红色*号标志 Ext.override(Ext.form.field.Base,{ //针对form中的基本组件 initComponent:function(){ if(this.allo