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

在页面中书写如下:

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

在vue 初始化data中

  filterForm: {
firstDay: '',
lastDay: ''
},
rules: {
firstDay: [{ type: 'string', required: true, message: '请选择日期范围', trigger: 'submit' }],
lastDay: [{ type: 'string', required: true, message: '请选择日期范围', trigger: 'submit' }],
}

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

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

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

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

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

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

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. WinDbg 解决Font.ToLogFont AccessViolationExcetion

    有个程序总是在windows 2003 server 异常退出. 并且,  查看调用栈也肯奇怪, 应该是很正常的调用. 怀疑是堆溢出. 开启heap trace : C:\Program Files\ ...

  2. Thinkphp整合各个功能

    thinkphp整合Auth权限管理.支付宝.微信支付.阿里oss.友盟推送.融云即时通讯.云通讯短信.Email.Excel.PDF等等: 基于thinkphp扩展了大量的功能:而不改动thinkp ...

  3. jdk 配置时时区设置

    在eclipse中的 Default VM Arguments:添加 -Duser.timezone=Aisa/Shanghai

  4. Object Slicing in C++

    In C++, a derived class object can be assigned to base class, but the other way is not possible. cla ...

  5. Android测试:从零开始2——local单元测试

    上一篇分析了android项目的测试分类,这一篇讲local单元测试. 参考android官方文档. 测试前需要配置测试环境,新建项目后,目录下会出现app/src/test/java/文件夹,这个文 ...

  6. 解析oracle的rownum,数据库查询结果返回行数设置

    对于rownum来说它是oracle系统顺序分配为从查询返回的行的编号,返回的第一行分配的是1,第二行是2,依此类推,这个伪字段可以用于限制查询返回的总行数,而且rownum不能以任何表的名称作为前缀 ...

  7. SignalR 循序渐进(五)多个Hub服务器下的消息订阅

    SignalR的通讯方式决定了其高性能,但是即便如此,当消息的并发量上来以后,单节点的Hub服务器依然可能无法承载总的消息吞吐量,那么如何对Hub服务器做水平扩展呢? 从微软官方的文档上看,Signa ...

  8. SignalR循序渐进(二)泛型Hub

    接上一篇,文章末尾抛出了2个问题: 能不能让客户端声明一个强类型的方法列表呢?这样首先不容易写错. 同样的,能不能让服务端声明一个强类型的方法列表给客户端调用呢? 如果要让客户端的方法以强类型出现在服 ...

  9. No such file or directory

    项目-targets-build phases, 然后从copy bundle resources里面删掉红色的错误资源文件

  10. 关于HashSet在 java7 与 java8的不同

    作者:RednaxelaFX链接:https://www.zhihu.com/question/28414001/answer/40733996来源:知乎著作权归作者所有.商业转载请联系作者获得授权, ...