使用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" 数字验证

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

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


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

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

相关文章推荐

jquery validate 无法验证hidden隐藏域问题

表单中出现hidden隐藏域时,jquery.validate就无法y

JQueryEasyUI 表单验证之日期验证输入框

1,介绍 定义:日期验证输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历面板控件 选择的日期会自动转变为一个有效日期 2,属性 属性名 属性...

easyUI日期控件验证开始时间

点击结束时间时,验证是否小于开始时间 开始时间:  结束时间:  时间比较时此处取param传过来的开始控件名字,后取该控件的时间值 $.exte...

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

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

EasyUI 验证框使用方法

使用过程中的一积累,备查。   EasyUI 验证框使用方法: //*************************** missingMessage:未填写时显示的信息 validTyp...

easyui datebox 限制日期选择大小

$('#enddate').datebox({         onSelect: function(date){         var date=date.getFullYear()+"-"+...

EasyUI修改DateBox和DateTimeBox的默认日期格式

最近整理Easyui控件的时候,对Easyui的DateBox控件和DateTimeBox控件进行了梳理,而我之所以将EasyUI的DateBox控件和DateTimeBox控件放在一起,归为一类,是...

ScheduleThreadPoolExecutor的工作原理与使用示例

1. ScheduleExecutorService接口、ScheduledFuture接口ScheduleExecutorService ScheduledFuture从图中可以看出Schedule...

点击表格中的某个列,弹出一个div层

通常有一种业务场景,数据库中某个字段的长度非常长,为了美观,不可以将该字段的所有内容展现在页面上。这个时候,一般会通过弹出层来解决这个问题。在这里必要提一下,这个长字段的内容是在展现列表数据的时候,使...

EasyUi 日历组件 datebox 开始时间与结束时间限制高级版

说明:只有选了开始日期才能选择结束日期,当选择了结束日期又重新选择了开始日期,则需要重新选择结束日期。结束日期只能选择开始时间后的日期。例如开始时间为:2015-07-15,那么结束时间只能选择 20...
  • meguoe
  • meguoe
  • 2015年08月02日 17:41
  • 3701
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用Jquery validation组件对easyui-datebox组件的时间进行验证遇到的问题
举报原因:
原因补充:

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