有关日期手工输入验证、日期弹出框、数值输入验证、必须输入验证等(共三个文件)...-优快云博客

本文提供了一个HTML页面示例，展示了如何使用JavaScript进行输入验证，包括数值、整数、日期等类型的输入检查，并提供了自定义的验证函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面文件：inputCheck.htm

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>JK的普通输入验证示例</title> <mce:script language="Javascript" src="commonForManage.js" mce_src="commonForManage.js"></mce:script> </head> <body> <form name=frm onsubmit="return checkNecessaryInput(this);" method=post > <table align=center style="border: 1 solid #000000" mce_style="border: 1 solid #000000"> <tr><td>数值1<font color=red>*</font><input name=a alt="数值1" onblur="checkDecimalInput(this)" ></td> <td>数值2:<input name=b onblur="checkDecimalInput(this,-1,1)" ><font size=-3>（大于-1，小于1）</font></td> <td>数值3:<input name=b onblur="checkDecimalInput(this,-0.0000001,1.0000001)" ><font size=-3>（大于或等于0，小于蔌等于1）</font></td> </tr> <tr><td>整数1<font color=red>*</font><input name=a alt="整数1" onblur="checkIntInput(this)" ></td> <td>整数2:<input name=b onblur="checkIntInput(this,-100,100)" ><font size=-3>（大于-100，小于100）</font></td> <td>整数3:<font size=-3><input name=b onblur="checkIntInput(this,-0.0000001,100.0000001)" ></td> （大于或等于0，小于或?/font>扔?00）</tr> <tr><td>日期1<font color=red>*</font><input name=a alt="日期1" onblur="checkDateInput(this)" ondblclick="getDateFromDialog(this);"></td> <td>日期2:<input name=b onblur="checkDateInput(this)" ondblclick="getDateFromDialog(this);"></td> <td>注：双击输入框可以弹出日历</td> </tr> <tr><td>编号1<font color=red>*</font><input name=a alt="编号1" onblur="checkNoInput(this)" ></td> <td>编号2:<input name=b onblur="checkNoInput(this)" ></td> <td>注：编号里只能有<font color=blue>数字</font>、<font color=blue>字母</font>、<font color=blue>-</font>、<font color=blue>_</font>、<font color=blue>.</font></td> </tr> <tr><td>输入1<font color=red>*</font><input name=a alt="输入1" ></td> <td>输入2:<input name=b value=2 ></td> <td>不限制输入内容</td> </tr> <tr><td>选择1<font color=red>*</font><select name=c alt="选择1"> <option value="">请选择</option> <option value="1">一</option> <option value="2">二</option> <option value="3">三</option> <option value="4">四</option> <option value="5">五</option> </select></td> <td>选择2:<select name=d > <option value="">请选择</option> <option value="1">一</option> <option value="2">二</option> <option value="3">三</option> <option value="4">四</option> <option value="5">五</option> </select></td> <td></td> </tr> <tr><td>复选<input type=checkbox name=e value=5 ><input type=checkbox name=e value=2 ><input type=checkbox name=e value=3 ></td> <td>单选<input type="radio" value="1" checked name="f"><input type="radio" value="2" checked name="f"><input type="radio" value="3" checked name="f"></td> <td></td> </tr> <tr><td colspan=2> <input type=button value=确定 onclick="javascript:if (checkNecessaryInput(frm)) frm.submit();"> <input type=button value=清空 onclick="javascript:resetProcess(frm);"> </td></tr> <tr><td colspan=3> <pre> 说明： 1.由于当输入错误时，blur事件检查到有错误时使用了focus方法，故所有的输入框的预设值（包括所有的非手工输入的值）必须正确，否则有可能发生抢焦点的死循环 2.必须输入的验证使用了遍历，请反对遍历的朋友包涵 3.JK欢迎各位指点 </pre> </td></tr> </table> </form> </body> </html>

输入检查文件：commonForManage.js
function checkNecessaryInput(obj) //用于检查一个表单内所有必须输入的栏位是否输入完整 { var s=""; var i; var j=0; for (i=0 ;(i<obj.elements.length)&&(j<10);i++) { if (( obj.elements[i].alt != null ) && (obj.elements[i].alt.length>0) && (obj.elements[i].value!=null) && (obj.elements[i].value.length==0) ) { s+="\n"+obj.elements[i].alt; //遍历所有输入，如果必须输入且没有输入值，就将其内容加到警告信息中去 j=j+1; } } if (j > 0 ) { alert ("以下资料必须输入"+s); return false; } return true; } function checkDecimalInput(obj,min,max) //作用是将输入变成Number(10,6)格式，默认范围是非负。 { obj.value=obj.value.replace(/ /g,""); //去空格 if (obj.value=="") return false; if (obj.value.substr(0,1)==".") obj.value="0"+obj.value; if (obj.value.substr(0,2)=="-.") obj.value=obj.value.replace("-.","-0."); var r, re; var s = obj.value ; var theMin=-0.0000001; var theMax=10000000000; if (min!=null) theMin=min; if (max!=null) theMax=max; if (s.length==0) return false; re = /-{0,1}\d{1,10}\.{0,1}\d{0,6}/i; r = s.match(re); //取数 if (r==null) { obj.value=""; alert("！！！！请注意：\n您刚才输入的数值不正确，我们已进行了清除。"); obj.focus(); return false; } if ((r>=theMax)||(r<=theMin)) { obj.value=""; alert("！！！！请注意：\n您刚才输入的数值超出允许范围，我们已进行了清除。"); obj.focus(); return false; } if ( r!=s) { obj.value=r; alert("！！！！请注意：\n您刚才输入的数值不正确，我们已进行了修改。"); obj.select(); obj.focus(); return false; } obj.value=r; } function checkIntInput(obj,min,max) //作用是将输入变成整数，默认范围是非负。onblur event { obj.value=obj.value.replace(/ /g,""); //去空格 if(obj.value=="") return false; var r; var s = obj.value ; var theMin=-1; var theMax=10000000000; if (min!=null) theMin=min; if (max!=null) theMax=max; if (s.length==0) return false; r = parseInt(s);; //取数 if (r==null||isNaN(r)) { obj.value=""; alert("！！！！请注意：\n您刚才输入的整数不正确，我们已进行了清除。"); obj.focus(); return false; } if ((r>=theMax)||(r<=theMin)) { obj.value=""; alert("！！！！请注意：\n您刚才输入的整数超出允许范围，我们已进行了清除。"); obj.focus(); return false; } if ( r!=s) { obj.value=r; alert("！！！！请注意：\n您刚才输入的整数不正确，我们已进行了修改。"); obj.select(); obj.focus(); return false; } obj.value=r; } function checkDateInput(obj) //用于检查日期输入是否正确（日期输入范围为1930-01-01 到2200-12-31） { if (obj.value.length==0) return false; var objValue=obj.value.replace(/[-\.]/g,"/"); try { var a=new Date(objValue); if (isNaN(a)) { obj.value=""; alert("！！！！请注意：\n您刚才输入的日期不正确，我们已进处了清除。"); obj.focus(); return false; } var b; if (a.getFullYear()<1900||a.getFullYear()>2200) {var Today=new Date(); b=Today.getFullYear()+"-"+(a.getMonth()+1)+"-"+a.getDate(); } else if (a.getFullYear()<1930) b=(a.getFullYear()+100)+"-"+(a.getMonth()+1)+"-"+a.getDate(); else b=a.getFullYear()+"-"+(a.getMonth()+1)+"-"+a.getDate(); obj.value=obj.value.replace(/[-\.\/]0*/g,"-"); if (b!=obj.value) { obj.value=b; alert("！！！！请注意：\n您刚才输入的日期不正确，我们已进行了修改。"); obj.select(); obj.focus(); return false; } } catch(Exception) { obj.value=""; alert("！！！！请注意：\n您刚才输入的日期不正确，我们已进处了清除。"); obj.focus(); return false; } return true; } function getDateFromDialog(obj) //利用弹出输入日期 { checkDateInput(obj); var a=showModalDialog("calendar.htm",obj.value.replace(/[-\.]/g,"\/"),"status:no;resizable:no;help:no;dialogHeight:220px;dialogWidth:319px;DialogLeft:"+event.screenX+";DialogTop:"+event.screenY); if (a!=null) obj.value=a; } function checkNoInput(obj) //用于检查编号输入是否正确。编号由字母、数字、_、-组成 { if (obj.value.length==0) return false; var objValue=obj.value.replace(/ /g,"/"); var a=/[\w-\.]{1,30}/i; var b=objValue.match(a); if (b==null) { obj.value=""; alert("！！！！请注意：\n您刚才输入的编号不正确，我们已进行了清除。"); obj.focus(); return false; } if ( b!=objValue ) { obj.value=b; alert("！！！！请注意：\n您刚才输入的编号不正确，我们已进行了修改。"); obj.select(); obj.focus(); return false; } } function checkMonthInput(obj) //JK 20020815 用于检查纠正yyyymm形式的月份输入 { obj.value=obj.value.replace(/ /g,""); if (obj.value.length==0) return false; var a=/((19)|(20))\d\d[0,1]{0,1}\d/i; var b; var c; if (!(a.test(obj.value))) { obj.value=""; alert("！！！！请注意：\n您刚才输入的月份不正确，我们已进行了清除。"); obj.focus(); return false; } else { b=obj.value.match(a)[0]; b=b.substring(0,4)+"/"+b.substring(4,6)+"/1"; c=new Date(b); b=c.getFullYear()+""+(c.getMonth()+1); if (b.length<6) b=c.getFullYear()+"0"+(c.getMonth()+1); if (b!=obj.value) { obj.value=b; alert("！！！！请注意：\n您刚才输入的月份不正确，我们已进行了修改。"); return false; } } } function resetProcess(obj) //JK 20020619 用于将指定obj内的所有text-input与select的值清空 { var a; if (obj==null) a=document.all("theQueryConditionTable"); else a=obj; if (a==null) return false; var b=a.getElementsByTagName("INPUT"); for (var i=0;i<b.length;i++) { if (b[i].type=="text") b[i].value=""; } b=a.getElementsByTagName("SELECT"); for (var i=0;i<b.length;i++) { b[i].options[0].selected=true; } } function roundFun(numberRound,roundDigit) //四舍五入，保留位数为roundDigit ,供计算时用 { if (numberRound>=0) { var tempNumber = parseInt((numberRound * Math.pow(10,roundDigit)+0.5))/Math.pow(10,roundDigit); return tempNumber; } else { numberRound1=-numberRound var tempNumber = parseInt((numberRound1 * Math.pow(10,roundDigit)+0.5))/Math.pow(10,roundDigit); return -tempNumber; } }

日历文件：calendar.htm
<html> <head> <title>日历</title> <mce:style></mce:style><style mce_bogus="1"> TD{ font-size:9pt; } </style> </head> <body><table align=center><tr><td width=80%> <mce:script language=javascript></mce:script> </td></tr></table> <div id="theCalendar" align=center width=100% > </div> </body> </html> <mce:script language="javascript"></mce:script>