|
![]() |
名片设计 CorelDRAW Illustrator AuotoCAD Painter 其他软件 Photoshop Fireworks Flash |
|
在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"> 然后你可以尝试向这个输入框内输入任何内容,看看效果如何吧。 返回类别: 教程 上一教程: java设计模式之创建模式--singleton 下一教程: 用java关闭IE窗口 您可以阅读与"用javascript实现的日期时间输入控件"相关的教程: · 格式化输入日期时间控件 JieFormattedDateBox · JSP用中收集数据:javascript 实现输入多行动态输入 · 从oracle 数据库读取日期时间,并在网页上打印万年历 · 一些无聊的代码之一:JAVA中的日期计算 · JSP+JAVASCRIPT实现类似MSDN CSDN导航树效果 |
![]() ![]() |
快精灵印艺坊 版权所有 |
首页![]() ![]() ![]() ![]() ![]() ![]() ![]() |