Element 中表单非必填数据项 必须为数字的验证问题
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 中表单非必填数据项 必须为数字的验证问题的更多相关文章
- Vue Elementui 表单必填项和非必填项label文字对齐的简单方式
1. 不好的方式 很长时间以来都是用改写form-item样式来使得必填项和非必填项保证label对齐,这样需要改写系统样式,还要在相应的item上引用,代码量增多,示例如下(不推荐) <tem ...
- SpringMVC 上传文件(文件非必填)MultipartHttpServletRequest
原文:https://blog.csdn.net/dorothy1224/article/details/79136676 上传文件(文件非必填)MultipartHttpServletRequest ...
- 将ECSHOP会员注册页面的Email修改成非必填项
将ECSHOP会员注册页面的Email修改成非必填项 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2011-07-29 有人说,在后台的 “会员注册项设置 ”里面 ...
- discuz X3.2邮箱非必填
最近有个需求是:邮箱非必答,但是X3.2是邮箱必填: 找到资料:http://www.51php.com/discuz/17147.html 但是修改后不起作用!提示‘Email 地址无效’! 用fi ...
- 织梦dedecms自定义表单设置必填项
1. 用php验证 在plus/diy.php的第 40行下加 //增加必填字段判断 if($required!=''){ if(preg_match('/,/', $required)) { $re ...
- lay-verify进行非必填项校验
它默认都验证了! 需要调整源码!form.js,layui.all.js this.config = { verify: { required: [/[\S]+/, "必填项不能为空&quo ...
- AngularJS 表单验证手机号(非必填)
代码: <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" ...
- v-show和element中表单验证validate起到的化学反应
说起v-show和v-if,进行前端开发的大家一定不会陌生,他们都是用来控制标签元素的显示与隐藏的,他们的区别就是v-show会把标签渲染出来,只是会隐藏起来,相当于visibility:hidden ...
- element 中表单验证的解析。
https://blog.csdn.net/qq_24504591/article/details/88048894 https://segmentfault.com/a/11900000125513 ...
随机推荐
- WinDbg 解决Font.ToLogFont AccessViolationExcetion
有个程序总是在windows 2003 server 异常退出. 并且, 查看调用栈也肯奇怪, 应该是很正常的调用. 怀疑是堆溢出. 开启heap trace : C:\Program Files\ ...
- Thinkphp整合各个功能
thinkphp整合Auth权限管理.支付宝.微信支付.阿里oss.友盟推送.融云即时通讯.云通讯短信.Email.Excel.PDF等等: 基于thinkphp扩展了大量的功能:而不改动thinkp ...
- jdk 配置时时区设置
在eclipse中的 Default VM Arguments:添加 -Duser.timezone=Aisa/Shanghai
- Object Slicing in C++
In C++, a derived class object can be assigned to base class, but the other way is not possible. cla ...
- Android测试:从零开始2——local单元测试
上一篇分析了android项目的测试分类,这一篇讲local单元测试. 参考android官方文档. 测试前需要配置测试环境,新建项目后,目录下会出现app/src/test/java/文件夹,这个文 ...
- 解析oracle的rownum,数据库查询结果返回行数设置
对于rownum来说它是oracle系统顺序分配为从查询返回的行的编号,返回的第一行分配的是1,第二行是2,依此类推,这个伪字段可以用于限制查询返回的总行数,而且rownum不能以任何表的名称作为前缀 ...
- SignalR 循序渐进(五)多个Hub服务器下的消息订阅
SignalR的通讯方式决定了其高性能,但是即便如此,当消息的并发量上来以后,单节点的Hub服务器依然可能无法承载总的消息吞吐量,那么如何对Hub服务器做水平扩展呢? 从微软官方的文档上看,Signa ...
- SignalR循序渐进(二)泛型Hub
接上一篇,文章末尾抛出了2个问题: 能不能让客户端声明一个强类型的方法列表呢?这样首先不容易写错. 同样的,能不能让服务端声明一个强类型的方法列表给客户端调用呢? 如果要让客户端的方法以强类型出现在服 ...
- No such file or directory
项目-targets-build phases, 然后从copy bundle resources里面删掉红色的错误资源文件
- 关于HashSet在 java7 与 java8的不同
作者:RednaxelaFX链接:https://www.zhihu.com/question/28414001/answer/40733996来源:知乎著作权归作者所有.商业转载请联系作者获得授权, ...