使用Jquery validation组件对easyui-datebox组件的时间进行验证遇到的问题

原创 2015年07月31日 09:09:10

最近在处理一个”简单”任务,就是在表单提交前,想对表单中输入的时间进行验证,如果没输入数据,提示“必填字段”。下面列一下处理过程中遇到的问题。

问题一 : 使用Jquery 的validation框架对时间域进行判断,但是不起作用

我原先的思路是使用jquery 验证框架中的rule来处理,如下:


前端的jsp代码如下:


按照常理,表单提交前,只需要调用jquery验证框架中的valid方法,则会启用上面定义的rule规则对startTime输入域进行验证。在提交表单前,我期待的结果是:


但是无论俺怎么调式,都无法出现上面的效果。后来只好使用谷歌浏览器的“审查元素”功能来查看源代码,发现输入的值其实是存储在一个hidden域上的,如下:


上面的代码是由easyui-datebox组件生成的。发现hidden问题后,我就开始怀疑Jquery的验证框架是否会验证hidden域,果然不出所料,Jquery验证框架在1.9版本后,默认是不支持对hidden进行验证的,如下:


必须把ignore:”:hidden” 改成 ignore:[](注意[]不能带双引号)。修改完再次测试,还是失败,失败原因请看第二个问题。

问题二 :Jquery 验证框架应该是可以对隐藏域进行验证了,为什么“必填字段”这个消息还是没出现

首先我做了一个测试,来证明Jquery验证框架是否可以验证普通的隐藏域,如下:


改成:


结果当点击提交按钮后,界面上可以显示出“必填字段”这个信息。到此可以推断出,easyui-datebox这个控件有问题,我仔细的查看了这个组件生成的html标签,如下:


其实“必填字段”这个信息在之前是有显示出来的,只不过被遮挡住了,对应的label标签被包在了一个span标签里面。折腾了大半天后,还是无法将“必填字段”这个信息所在的label标签移到span的外部。到此我服输了,得出了一个结论:想通过Jquery的验证框架来验证easyui-datebox组件的时间信息太困难了,得修改组件代码。 只能绕过Jquery验证框架,使用传统的方式来做。

问题三 : 如何使用传统方式验证easyui-datebox组件中的时间

下面简单的列一下使用这种方式需要解决的问题以及相关的代码实现。

1、  在startTime字段没有输入信息时,必须在该元素后面追加“必填字段”这个信息。


2、  定位到startTime元素输入域真正的位置。


easyui-datebox生成的代码,请参阅上文贴出的。

3、  当用户输入数据后,必须把“必填信息”移除,需要注册select时间和onblur事件。


 

当然也可以尝试使用easyui-datebox自带的验证框架。比如:

          missingMessage:未填写时显示的信息 
          validType:验证类型见下示例 
          invalidMessage:无效的数据类型时显示的信息 
          required="true" 必填项 
          class="easyui-validatebox" 文本验证 
          class="easyui-numberbox" 数字验证

          。。。。。。。。。。。。。。。。。。

          。。。。。。。。。。。。。。。。。。


我并没有尝试这种风格,原因是我必须追随原来的提示风格,不能自己玩自己的,故使用传统的验证方式。以上这是其中一种解决方案,抛砖引玉而已。 

版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

日期时间格式正则表达式

正则表达式 (?n:^(?=\d)((?31(?!(.0?[2469]|11))|30(?!.0?2)|29(?(.0?2)(?=.{3,4}(1[6-9]|[2-9]\d)(0[48]|[24...

easyui validatebox 验证类型

required: "必选字段",         remote: "请修正该字段",         email: &...
  • lybwwp
  • lybwwp
  • 2013-06-05 10:58
  • 58027

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

使用easyui的datetimebox插件输入日期,同时对日期进行验证。

进公司上班有一个月了,公司的项目界面都是用恶、

EasyUI的自定义验证规则,验证日期的有效性

function checkDateTime(type,datetime,split){  var date = datetime.split(" ")[0];  var time = datetim...
  • foart
  • foart
  • 2014-01-03 15:47
  • 6186

JEECG 3.7.1版本发布,企业级JAVA快速开发平台

JEECG(J2EE Code Generation)是一款基于代码生成器的企业级快速开发平台,开源界“小普元”超越传统商业平台。引领新的开发模式(Online Coding->代码生成器->手工ME...

Easyui_datebox验证-开始日期小于结束日期

效果: 渲染easyui-datebox: 重写验证easyui验证规则: $.extend($.fn.validatebox.defaults.rules, { ...

easyui-datebox不能选择未来时间的解决方案

对于easyui并未提供对日期控件的时间校验,然而有时候我们并不希望用于能选择未来的时间。下面给出两个简单的应对方案。 html文件如下: 请选择日期: 方案1,通过datebox的o...

jquery easyui datebox 的使用需要注意的问题

1.  加入日期选择框 $("#dd").datebox({"required":true}); 在id为dd的input type=text的输入框加入iquery easyui的日期...

jQuery EasyUI-validatebox验证框、实现自定义验证

效果图: 首先我们要先重写$.fn.validatebox.defaults.rules定义的验证器和错误信息 $.extend($.fn.validatebox.defaults.rules, { ...

easyUI中使用datatimebox选定开始日期时间后自动带出7天之后的结束日期时间

easyUI中使用datatimebox选定开始日期时间后自动带出7天之后的结束日期时间
  • ydqie
  • ydqie
  • 2015-09-23 14:35
  • 1996
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)