2007年12月9日 星期日

利用JavaScript驗證表單輸入的格式

在頁面驗證裡最常用到的Javascript,用於驗證文本輸入框或者其它控件輸入字符串的格式,可以是驗證ip地址、是否是字母或者數字(整數,小數)、手機號碼、Email地址、日期等。

/*
用途:校驗ip地址的格式
輸入:strIP:ip地址
返回:如果通過驗證返回true,否則返回false;

*/
function isIP(strIP) {
if (isNull(strIP)) return false;
var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正則表達式
if(re.test(strIP))
{
if( RegExp.$1 <256 str ="="" regu = "^[ ]+$" re =" new" regu =" /^[-]{0,1}[0-9]{1,}$/;" regu ="/^[1][3][0-9]{9}$/;" re =" new" regu = "^[0-9]+$" re =" new" re =" /^[-]{0,1}(\d+)[\.]+(\d+)$/;" 1="="0&&RegExp.$2="="0)" myreg =" /^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;" regu = "^[0-9]+[\.][0-9]{0,3}$" re =" new" regu = "^[0-9a-zA-Z\_]+$" re =" new" regu = "^[0-9a-zA-Z]+$" re =" new" regu = "^[0-9a-zA-Z\u4e00-\u9fa5]+$" re =" new" fmt="="null)" fmt="yyyyMMdd" yindex =" fmt.indexOf(" yindex="="-1)" year =" date.substring(yIndex,yIndex+4);" mindex =" fmt.indexOf(" mindex="="-1)" month =" date.substring(mIndex,mIndex+2);" dindex =" fmt.indexOf(" dindex="="-1)" day =" date.substring(dIndex,dIndex+2);">"2100" || year< "1900") return false; if(!isNumber(month)||month>"12" || month< "01") return false; if(day>getMaxDay(year,month) || day< "01") return false; return true; } function getMaxDay(year,month) { if(month==4||month==6||month==9||month==11) return "30"; if(month==2) if(year%4==0&&year%100!=0 || year%400==0) return "29"; else return "28"; return "31"; } /* 用途:字符1是否以字符串2結束 輸入:str1:字符串;str2:被包含的字符串 返回:如果通過驗證返回true,否則返回false */ function isLastMatch(str1,str2) { var index = str1.lastIndexOf(str2); if(str1.length==index+str2.length) return true; return false; } /* 用途:字符1是否以字符串2開始 輸入:str1:字符串;str2:被包含的字符串 返回:如果通過驗證返回true,否則返回false */ function isFirstMatch(str1,str2) { var index = str1.indexOf(str2); if(index==0) return true; return false; } /* 用途:字符1是包含字符串2 輸入:str1:字符串;str2:被包含的字符串 返回:如果通過驗證返回true,否則返回false */ function isMatch(str1,str2) { var index = str1.indexOf(str2); if(index==-1) return false; return true; } /* 用途:檢查輸入的起止日期是否正確,規則為兩個日期的格式正確, 且結束如期>=起始日期
輸入:
startDate:起始日期,字符串
endDate:結束如期,字符串
返回:
如果通過驗證返回true,否則返回false

*/
function checkTwoDate( startDate,endDate ) {
if( !isDate(startDate) ) {
alert("起始日期不正確!");
return false;
} else if( !isDate(endDate) ) {
alert("終止日期不正確!");
return false;
} else if( startDate > endDate ) {
alert("起始日期不能大於終止日期!");
return false;
}
return true;
}

/*
用途:檢查輸入的Email信箱格式是否正確
輸入:
strEmail:字符串
返回:
如果通過驗證返回true,否則返回false

*/
function checkEmail(strEmail) {
//var emailReg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/;
var emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
if( emailReg.test(strEmail) ){
return true;
}else{
alert("您輸入的Email地址格式不正確!");
return false;
}
}

/*
用途:檢查輸入的電話號碼格式是否正確
輸入:
strPhone:字符串
返回:
如果通過驗證返回true,否則返回false

*/
function checkPhone( strPhone ) {
var phoneRegWithArea = /^[0][1-9]{2,3}-[0-9]{5,10}$/;
var phoneRegNoArea = /^[1-9]{1}[0-9]{5,8}$/;
var prompt = "您輸入的電話號碼不正確!"
if( strPhone.length > 9 ) {
if( phoneRegWithArea.test(strPhone) ){
return true;
}else{
alert( prompt );
return false;
}
}else{
if( phoneRegNoArea.test( strPhone ) ){
return true;
}else{
alert( prompt );
return false;
}
}
}

匹配特定數字:
^[1-9]d*$    //匹配正整數
^-[1-9]d*$   //匹配負整數
^-?[1-9]d*$   //匹配整數
^[1-9]d*|0$  //匹配非負整數(正整數 + 0)
^-[1-9]d*|0$   //匹配非正整數(負整數 + 0)
^[1-9]d*.d*|0.d*[1-9]d*$   //匹配正浮點數
^-([1-9]d*.d*|0.d*[1-9]d*)$  //匹配負浮點數
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$  //匹配浮點數
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$   //匹配非負浮點數(正浮點數 + 0)
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$  //匹配非正浮點數(負浮點數 + 0)
評註:處理大量數據時有用,具體應用時注意修正

匹配特定字符串:
^[A-Za-z]+$  //匹配由26個英文字母組成的字符串
^[A-Z]+$  //匹配由26個英文字母的大寫組成的字符串
^[a-z]+$  //匹配由26個英文字母的小寫組成的字符串
^[A-Za-z0-9]+$  //匹配由數字和26個英文字母組成的字符串
^w+$  //匹配由數字、26個英文字母或者下劃線組成的字符串

在使用RegularExpressionValidator驗證控件時的驗證功能及其驗證表達式介紹如下:

只能輸入數字:「^[0-9]*$」
只能輸入n位的數字:「^d{n}$」
只能輸入至少n位數字:「^d{n,}$」
只能輸入m-n位的數字:「^d{m,n}$」
只能輸入零和非零開頭的數字:「^(0|[1-9][0-9]*)$」
只能輸入有兩位小數的正實數:「^[0-9]+(.[0-9]{2})?$」
只能輸入有1-3位小數的正實數:「^[0-9]+(.[0-9]{1,3})?$」
只能輸入非零的正整數:「^+?[1-9][0-9]*$」
只能輸入非零的負整數:「^-[1-9][0-9]*$」
只能輸入長度為3的字符:「^.{3}$」
只能輸入由26個英文字母組成的字符串:「^[A-Za-z]+$」
只能輸入由26個大寫英文字母組成的字符串:「^[A-Z]+$」
只能輸入由26個小寫英文字母組成的字符串:「^[a-z]+$」
只能輸入由數字和26個英文字母組成的字符串:「^[A-Za-z0-9]+$」
只能輸入由數字、26個英文字母或者下劃線組成的字符串:「^w+$」
驗證用戶密碼:「^[a-zA-Z]w{5,17}$」正確格式為:以字母開頭,長度在6-18之間,

只能包含字符、數字和下劃線。
驗證是否含有^%&』,;=?$」等字符:「[^%&』,;=?$x22]+」
只能輸入漢字:「^[u4e00-u9fa5],{0,}$」
驗證Email地址:「^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$」
驗證InternetURL:「^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$」
驗證電話號碼:「^((d{3,4})|d{3,4}-)?d{7,8}$」

正確格式為:「XXXX-XXXXXXX」,「XXXX-XXXXXXXX」,「XXX-XXXXXXX」,

「XXX-XXXXXXXX」,「XXXXXXX」,「XXXXXXXX」。
驗證身份證號(15位或18位數字):「^d{15}|d{}18$」
驗證一年的12個月:「^(0?[1-9]|1[0-2])$」正確格式為:「01」-「09」和「1」「12」
驗證一個月的31天:「^((0?[1-9])|((1|2)[0-9])|30|31)$」

正確格式為:「01」「09」和「1」「31」。

匹配中文字符的正則表達式: [u4e00-u9fa5]
匹配雙字節字符(包括漢字在內):[^x00-xff]
匹配空行的正則表達式:n[s| ]*r
匹配HTML標記的正則表達式:/< (.*)>.*|< (.*) />/
匹配首尾空格的正則表達式:(^s*)|(s*$)
匹配Email地址的正則表達式:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
匹配網址URL的正則表達式:http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?

(1)應用:計算字符串的長度(一個雙字節字符長度計2,ASCII字符計1)
String.prototype.len=function(){return this.replace([^x00-xff]/g,」aa」).length;}

(2)應用:javascript中沒有像vbscript那樣的trim函數,我們就可以利用這個表達式來實現
String.prototype.trim = function()
{
return this.replace(/(^s*)|(s*$)/g, 「」);
}
(3)應用:利用正則表達式分解和轉換IP地址
function IP2V(ip) //IP地址轉換成對應數值
{
re=/(d+).(d+).(d+).(d+)/g //匹配IP地址的正則表達式
if(re.test(ip))
{
return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1
}
else
{
throw new Error(」Not a valid IP address!」)
}
}
(4)應用:從URL地址中提取文件名的javascript程序
s=」http://www.9499.net/page1.htm」;
s=s.replace(/(.*/){0,}([^.]+).*/ig,」$2〞) ; //Page1.htm
(5)應用:利用正則表達式限制網頁表單裡的文本框輸入內容
用正則表達式限制只能輸入中文:onkeyup=」value=」/blog/value.replace(/[」^u4E00-u9FA5]/g,」) 」 onbeforepaste=」clipboardData.setData(』text',clipboardData.getData(』 text').replace(/[^u4E00-u9FA5]/g,」))」
用正則表達式限制只能輸入全角字符: onkeyup=」value=」/blog/value.replace(/[」^uFF00-uFFFF]/g,」) 」 onbeforepaste=」clipboardData.setData(』text',clipboardData.getData(』 text').replace(/[^uFF00-uFFFF]/g,」))」
用正則表達式限制只能輸入數字:onkeyup=」value=」/blog/value.replace(/[」^d]/g,」) 「onbeforepaste= 「clipboardData.setData(』text',clipboardData.getData(』text').replace(/ [^d]/g,」))」
用正則表達式限制只能輸入數字和英文:onkeyup=」value=」/blog/value.replace(/[W]/g,」」) 「onbeforepaste=」clipboardData.setData(』text',clipboardData.getData(』 text').replace(/[^d]/g,」

【下列文章您可能也有興趣】

1 則留言:

佳佳 提到...

這篇很有用
收藏起來!!