本文介绍了一个HTML页面实现的输入验证示例，包括日期、数值、整数等多种类型的输入验证，以及通过JavaScript进行的验证逻辑。此外还提供了一个日历插件用于选择日期。
有关日期手工输入验证、日期弹出框、数值输入验证、必须输入验证等(共三个文件)
页面文件：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>普通输入验证示例</title>
<script language="Javascript" src="commonForManage.js"></script>
</head>
<body>
<form name=frm onsubmit="return checkNecessaryInput(this);" method=post >
<table align=center 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.欢迎各位指点
</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) // 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) // 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>
<style>
TD{
font-size:9pt;
}
</style>
</head>
<body><table align=center><tr><td width=80%>
<script language=javascript>
document.write("<select name=yearInput onchange='showCalendar()'>");
for (var i=1930;i<2200;i++) document.write("<option
value='"+i+"'>"+i+"</option>");
document.write("</select>年<select name=monthInput onchange='showCalendar()'>");
for (var i=1;i<13;i++) document.write("<option value='"+i+"'>"+i+"</option>");
document.write("</select>月");
document.write("</td><td align=right><input type=button value=今天
onclick='returnToday();'>");
</script>
</td></tr></table>
<div id="theCalendar" align=center width=100% >
</div>
</body>
</html>
<script language="javascript">
function showCalendar() //日历显示
{
var theCalendarContent="";
var b=new Date(yearInput.value+"//"+monthInput.value+"//"+1);
var c=new Date(yearInput.value+"//"+(monthInput.value*1+1)+"//"+0);
var theMonthDays=c.getDate();
var i=0;
var j=b.getDay();
var k=1;
theCalendarContent+="<table ondblclick='getTD(event.srcElement)' border=1
style='border: solid 1 #5661a8; font-Size: 9pt; font-family: Arial;
background: #e0e3f7' width=100% align=center><tr bordercolorlight='#5661a8'
bordercolordark='#5661a8' style='background: #5661a8; color: #ffffff'><td >周日
</td><td>周一</td><td>周二</td><td>周三</td><td>周四</td><td>周五</td><td>周六
</td></tr><tr>";
for (j=0;j<b.getDay();j++) theCalendarContent+="<td> </td>";
for (i=0;(i<6)&&(k<theMonthDays+1);i++)
{
for (j;j<7;j++)
{
if (k<theMonthDays+1)
{
if (j<6&&j>0) theCalendarContent+="<td bordercolorlight='#5661a8' align='center'
style='color:#ff0000'>"+(k++)+"</td>";
else theCalendarContent+="<td bordercolorlight='#5661a8' align='center'>"+(k++)
+"</td>";
}
else theCalendarContent+="<td> </td>";
}
theCalendarContent+="</tr><tr >";
j=0;
}
theCalendarContent+="</tr></table>";
theCalendar.innerHTML=theCalendarContent;
}
function getTD(obj) //返回选中日期
{
if (obj.tagName!="TD") return false;
if (isNaN(obj.innerText)||(obj.innerText==0)) return false;
var a=yearInput.value+"-"+monthInput.value+"-"+obj.innerText;
window.returnValue=a;
window.close();
}
function returnToday() //返回本日
{
var todaydate=new Date();
var a=todaydate.getFullYear()+"-"+(todaydate.getMonth()+1)+"-"+todaydate.getDate();
window.returnValue=a;
window.close();
}
function initCalendar() //初始化日历
{
var a=window.dialogArguments;
var b=new Date();
if ((a!=null)&&(a.length>4)) b=new Date(a);
if (isNaN(b)) b=new Date();
yearInput.value=b.getFullYear();
monthInput.value=(b.getMonth()+1);
showCalendar();
}
initCalendar();
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
