Ext.NET加入自定义验证JS函数
ExtJS验证很方便,在使用FormPanel的时候,我们可以很方便的进行验证。比如设置必填项、正则、字段类型等等。比如如下所示:
上面的验证是这么写的:
<Listeners><ClientValidation Handler="#{btnSave}.setDisabled(!valid);#{tbSave}.setDisabled(!valid);#{btnSumbit1}.setDisabled(!valid);#{btnSumbit2}.setDisabled(!valid);var valCs=valid ? 'valaccept' : 'valexclamation';var msg=valid ? '<span style=\'color:green;\'>验证通过,可以提交数据</span>' : '<span style=\'color:red;\'>输入有误,请检查标红的输入项。</span>';this.getBottomToolbar().setStatus({text :msg, iconCls: valCs});showMsg('温馨提示',msg,valCs);" /></Listeners>
但是往往,有些复杂的验证我们是需要我们写脚本验证的。那么怎么做到通用呢?比如下面的情况:
左侧S、M、L、XL总数不能超过2件,右侧不能超过6件。首先可以定义以下验证JS,来验证数量是否超过最大值。
function valSumMax(ids, maxValue, msg) {if (ids != null && ids.length > 0) {var _temp = 0;for (var i = 0; i < ids.length; i++) {var value = Ext.getCmp(ids[i]).getValue();if (!isNaN(value)) {_temp += value;if (_temp > maxValue) {var message = { 'IsVal': false, 'Message': msg != "" ? msg : ("超过最大值" + maxValue + "。") };return message;}}}}var message = { 'IsVal': true, 'Message': '' };return message;}
为了做到通用,于是又定义以下JS函数
function CustomValidator() {var msg = valSumMax(ids1, 2, "美容顾问服装最多只能填2件。请修改总数。");if (!msg.IsVal)return msg;msg = valSumMax(ids2, 6, "美容师服装最多只能填6件。请修改总数。");return msg;}function ValCustomValidator(isVal, valid) {if (typeof (valid) != 'undefined' && (!valid))return valid;if (typeof (isVal) == 'undefined' || isVal == null || isVal) {var msg = CustomValidator();if (!msg.IsVal) {Ext.MessageBox.show({title: '错误',msg: msg.Message,buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});return false;} else {return true;}} else {return CustomValidator();}}
最后,要写监听的验证Handler了。可以这么写:
_fp.Listeners.ClientValidation.Handler =@"var isCheckd=valid;var msgs;var msg='';if(typeof(ValCustomValidator)=='function'){msgs=ValCustomValidator(false,valid);if(typeof(msgs.IsVal)!='undefined'){isCheckd=msgs.IsVal;if(msgs.Message!='')msg='<span style=\'color:red;\'>'+msgs.Message+'</span>';}elseisCheckd=msgs;}#{btnSave}.setDisabled(!isCheckd);#{tbSave}.setDisabled(!isCheckd);#{btnSumbit1}.setDisabled(!isCheckd);#{btnSumbit2}.setDisabled(!isCheckd);var valCs=isCheckd ? 'valaccept' : 'valexclamation';if (msg=='') msg=isCheckd ? '<span style=\'color:green;\'>验证通过,可以提交数据</span>' : '<span style=\'color:red;\'>输入有误,请检查标红的输入项。</span>';this.getBottomToolbar().setStatus({text :msg, iconCls: valCs});showMsg('温馨提示',msg,valCs);";
这样的话,即使不存在JS函数ValCustomValidator,验证都是没问题的。需要自定义的话,那么就可以定义ValCustomValidator函数来完成自己的验证了。
Ext.NET加入自定义验证JS函数相关推荐
- element-UI框架使用validate.js的form校验规则(+自定义验证代码)- 应用篇
文章目录 element-UI除了官方给出的校验规则,还可以自定义(举例如下) 代码示例: 参考文章: element-UI除了官方给出的校验规则,还可以自定义(举例如下) element-UI框架f ...
- WebForm服务器验证控件与前端js自定义验证共同使用
问题: 前端aspx页面中需要在button中添加OnClientClick事件后,这个OnClientClick所执行的自定义的客户端js验证:这个时候,所有的服务器验证控件都会失效! ...
- JS自定义字符串格式化函数
python的字符串格式化 test = 'name: {name} age: {age}' print(test.format(name='zq',age=22)) 输出: name: zq age ...
- 通过JS函数劫持自定义百度云分享提取码
思路: 通过JS函数劫持,修改"生成百度云分享码"的函数. 方法: 1.打开百度云,选择一个需要分享的文件,点击"分享" 注意,此时先不要点击"创建私 ...
- 全新的基于VVC思想的页面验证js框架vtor
2019独角兽企业重金招聘Python工程师标准>>> Vtor 1. 概述 vtor是一个全新的解耦合页面验证js框架.根据全新的VVC思想(validator-view ...
- ant4 多个form 验证_ant-design表单处理和常用方法及自定义验证操作
首先要说一下antdesign这个框架API和demo丰富,而且开发环境提供对应的warning来纠正用户的错误.是一个很好的组件库. 关于表单验证方面是依赖于 async-validator 库.百 ...
- easyui的validatebox重写自定义验证规则的几个实例
validatebox已经实现的几个规则: 验证规则是根据使用需求和验证类型属性来定义的,这些规则已经实现(easyui API): email:匹配E-Mail的正则表达式规则. url:匹配URL ...
- validatebox自定义验证规则以及使用
//===============jsp======state====//开启验证<script type="text/javascript"> yZ() ...
- api日常总结:前端常用js函数和CSS常用技巧
我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font- ...
最新文章
- 【Java】leetCode 21 合并两个有序链表
- 马斯克雇机器狗勘察火箭爆炸现场,网友:《黑镜》现实版
- python【蓝桥杯vip练习题库】ADV-188排列数
- 腾讯面试题Java 并发包之线程池综述
- 吴恩达机器学习(第五章)——Logistic回归
- 【PP模块】报废(损耗)类别简介(Scrap Categories and Their Effects)
- android 获取设备串号,Android获取设备IMEI和Mac地址
- 什么是Ext(ExtJs)【转载】
- 【CF#706B】 Interesting drink (二分)
- Redis数据类型--字符串类型
- (数据库系统概论|王珊)第十章数据库恢复技术-第三节:故障种类
- 5 PP配置-组织架构-定义生产管理员
- mac docker 共享_如何在Docker for Mac中加快共享文件访问
- 【script】python使用pymssql模块访问SQL Server(Mssql)
- iOS键盘监听以及获取键盘高度
- Q83:怎么画多个PLY文件组合的图形[Multiple-Mesh Objects]
- vue 图片切换动态绑定
- OpenCV IPLImage常用方法
- 纪年——记事本app
- hdu4889 spfa(造数据卡spfa