有關日期手工輸入驗證、日期彈出框、數值輸入驗證、必須輸入驗證等(共三個檔案)

頁面檔案：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>

有關日期手工輸入驗證、日期彈出框、數值輸入驗證、必須輸入驗證等(共三個檔案)

相關文章