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

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

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


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

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

Easyui validator.js 表单日期框校验问题黑科技处理方式

1、前言 最近项目中使用Easyui validator.js,在做表单校验时碰到日期框、下拉框会不校验,自动忽略过去不校验。给过上网查资源、和朋友讨论,最后使用轻量的黑科技处理方式,轻...
  • ytangdigl
  • ytangdigl
  • 2017年06月28日 19:32
  • 505

jquery easyui validatebox增加对time、date、datetime的验证,时间格式化

$.extend($.fn.validatebox.defaults.rules, { /*10:05:02*/ time: { validator: function...
  • u014172271
  • u014172271
  • 2017年10月15日 08:03
  • 138

当日期有默认值时,My97 DatePicker日期控件实现日期文本输入框必填而无需验证控件支持

在开发的时候发现的小细节,之前用validform验证日期输入框必填,后来发现满足以下条件可实现必填了,条件如下: 1、打开页面时日期有默认值。 my97 datepicker里没有找到默认值显示...
  • eagle_88
  • eagle_88
  • 2015年05月29日 10:05
  • 3786

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

效果: 渲染easyui-datebox: 重写验证easyui验证规则: $.extend($.fn.validatebox.defaults.rules, { ...
  • q646926099
  • q646926099
  • 2016年08月05日 13:11
  • 6325

easyUI——datebox验证和自定义取消按钮

1. datebox验证        验证结束时间        起始时间: 结束时间: $.extend($.fn.validatebox.defaults.rules,{ dateV...
  • liusong0605
  • liusong0605
  • 2014年12月30日 19:31
  • 7389

easyUI日期控件验证开始时间

点击结束时间时,验证是否小于开始时间 开始时间:  结束时间:  时间比较时此处取param传过来的开始控件名字,后取该控件的时间值 $.exte...
  • wr6521941
  • wr6521941
  • 2016年10月25日 12:02
  • 1205

easyui 时间段校验,开始时间小于结束时间,并且时间间隔不能超过30天

//对easyui datetimebox的验证,开始时间要小于结束时间 function validateDateTime(beginTimeId,endTimeId,whichTimeId)...
  • u012307002
  • u012307002
  • 2014年02月16日 16:28
  • 1363

EasyUI 验证框使用方法

使用过程中的一积累,备查。   EasyUI 验证框使用方法: //*************************** missingMessage:未填写时显示的信息 validTyp...
  • qwlovedzm
  • qwlovedzm
  • 2011年08月10日 17:22
  • 75193

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

进公司上班有一个月了,公司的项目界面都是用恶、
  • zifengye520
  • zifengye520
  • 2014年07月20日 23:42
  • 2713

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

function checkDateTime(type,datetime,split){  var date = datetime.split(" ")[0];  var time = datetim...
  • foart
  • foart
  • 2014年01月03日 15:47
  • 6691
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用Jquery validation组件对easyui-datebox组件的时间进行验证遇到的问题
举报原因:
原因补充:

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