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

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

问题一 ： 使用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" 数字验证
          。。。。。。。。。。。。。。。。。。
          。。。。。。。。。。。。。。。。。。

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