网站首页 网站导航 课程中心
新闻中心
您所在的位置:Web前端培训 > 新闻中心 > 【Web前端培训】用javascript实现的日期时间输入控件

【Web前端培训】用javascript实现的日期时间输入控件

来源:中软卓越 日期:2018-04-24 14:13 人气:
标签:
中软国际教育集团Python+大数据课程入驻大武汉啦!!!
在b/s程序设计中,经常需要向一个输入框输入日期或时间,并验证输入是否有效。通常的验证方法是在提交的时候进行字符串验证,如果是合法的日期时间则正常提交,否则取消提交并给出错误信息。或者,将日期时间的输入变成几个下拉列表框,由用户选择年月日时分秒。

这里给出一个用javascript编写的日期时间输入验证脚本。这个脚本可以使一个普通的输入框变成日期时间输入框。你只能在这个输入框里输入日期时间格式的字符串,而不允许你输入任何其他的字符。当你输入非法字符时,它并不是不负责任地弹出错误对话框,而是完全过滤掉你的输入以保证你输入框的内容绝对是合法的日期时间格式。

事实上,你可以向这个脚本中添加其他验证函数,让这个脚本可以控制其它类型格式的输入,例如:数字、电子邮件、用户ID等等。


代码如下:
    <script>
function isTime(str){
  var a = str.match(/^(/d{0,2}):(/d{0,2}):(/d{0,2})$/);
  if (a == null) return false;
  if (a[1]>=24 || a[2]>=60 || a[3]>=60) return false;
  return true;
}
function isDateTime(str){
  var a = str.match(/^(/d{0,4})-(/d{0,2})-(/d{0,2}) (/d{0,2}):(/d{0,2}):(/d{0,2})$/);
  if (a == null) return false;
  if ( a[2]>=13 || a[3]>=32 || a[4]>=24 || a[5]>=60 || a[6]>=60) return false;
  return true;
}
function isDate(str){
  var a = str.match(/^(/d{0,4})-(/d{0,2})-(/d{0,2})$/);
  if (a == null) return false;
  if ( a[2]>=13 || a[3]>=32 || a[4]>=24) return false;
  return true;
}
function validate(obj,type){
var range=obj.createTextRange(); 
var text = range.text;
var selrange = document.selection.createRange();
var seltext = selrange.text;
var startpos = 0,endpos = 0;
while(selrange.compareEndPoints("StartToStart",range)>0){ 
  selrange.moveStart("character",-1);  
  startpos ++;
}
while(selrange.compareEndPoints("EndToStart",range)>0){ 
  selrange.moveEnd("character",-1);  
  endpos ++;
}
if(event.keyCode>=48){ 
  var keytext = String.fromCharCode(event.keyCode);
  text = text.substring(0,startpos) + keytext + text.substring(endpos,text.length);
}else if(event.keyCode == 46){//delete
  if(startpos == endpos)text = text.substring(0,startpos) + text.substring(startpos+1,text.length);
  else text = text.substring(0,startpos) + text.substring(endpos,text.length);
}else if(event.keyCode == 8){
  if(startpos == endpos)text = text.substring(0,startpos-1) + text.substring(startpos,text.length);
  else text = text.substring(0,startpos) + text.substring(endpos,text.length);
}
if(event.keyCode == 45){
  event.returnValue = false;
  return;
}
var valid;
switch(type){
  case 1:valid = isDate(text);break;
  case 2:valid = isTime(text);break;
  case 3:valid = isDateTime(text);break;
  default:valid = false;
}
if(!valid){
 event.returnValue = false;
}
}
</script>
把上面这段代码放在web页面的任何位置即可。
使用方法:
日期验证框:<input onkeyDown="validate(this,1)" value="0000-00-00"> 
 
时间验证框:<input onkeyDown="validate(this,2)" value="00:00:00"> 
 
日期时间验证框:<input onkeyDown="validate(this,3)" value="0000-00-00 00:00:00"> 
 
我们可以测试一下。
在页面上加入以下内容:
<input id="date" onkeyDown="validate(this,3)" value="0000-00-00 00:00:00"> 
然后你可以尝试向这个输入框内输入任何内容,看看效果如何吧。

免责声明:本文转载自网络,转载目的在于传递更多信息,版权归原作者所有,如涉及内容、版权和其它问题请联系我们进行删除。

 

中软卓越是中软国际有限公司投资的大型人才服务机构,是中软国际人才战略的核心组成部分之一,承担集团发展过程中人才储备和培养的任务,是软件及外包业务快速发展的重要人才支撑平台,是集团保持高速增长动力之一。

中软国际教育集团专注IT教育36年,一直秉承“用良心做教育”的理念,是中国移动互联网研发人才一体化服务的开拓者,全力打造移动互联网研发人才服务优质平台。

公司总部位于武汉,目前已在深圳、上海、郑州、广州、大连、武汉、成都、西安、杭州、重庆、长沙、合肥、无锡、南宁、厦门、南京、南昌等全国22个省成立了60多家分公司。拥有全国的移动互联网教学就业保障团队,做到了毕业学员业内高薪水,成为学员信赖的IT培训机构。

营业执照 版权所有©Copyright 2008-2017,武汉中软卓越科技有限公司 , All Rights Reserved. ICP备案号:15018648号-1

sitemap | 来校路线 | 分类导航 | 关于我们