& lthtml & gt
& lthead & gt
& ltmeta？charset="UTF-8 "？/& gt；
& lttitle & gtJavascript+HTML使用正則表達式編寫輸入驗證碼
& lt風格？type="text/css " >
桌子？{
位置:？相對的；
邊距:？自動；
字體系列:？康索拉斯；
字體大小:？12px；
邊框:？1px？固體？黑色；
邊框折疊:？崩潰；
寬度:？800px
}
桌子？tr？td？{
邊框:？1px？固體？黑色；
}
。中心？{
文本對齊:？居中；
}
& lt/style & gt；
& lt劇本？type = " text/JavaScript " & gt；
var？v？=?{
日期:？新的？日期，
isError:？沒錯，
驗證類型:？[
？不能？是嗎？空白'，
必須？是嗎？答？有效嗎？電子郵件'，
必須？包含？只有？數字，單身？'空格',
必須？包含？之間？13?& amp？18?數字？然後呢。單身？'空格',
到期？約會？不能？是嗎？過期了。
？],
修剪:？功能(五)
{
回歸？v.replace(/^\s*|\s*$/g？'');
},?
validateOnblur:？函數(obj，？驗證類型)
{
var？瓦爾。=?v . trim(obj . value)；
切換？(驗證類型)
{
案子？0:
如果？(V.trim(obj.value)？==?'')
{
obj.value？=?'';
回歸？v . validation type[0]；
}
回歸？'';
案子？1:
如果？(!/^[\w\-]+@[\w\-]+\.\w+$/。測試(val))
{
obj.value？=?'';
回歸？v .驗證類型[1]；
}
回歸？'';
案子？2:
如果？(!/^(\+\(\d+\)？\d+$/。測試(val))
{
obj.value？=?'';
回歸？v .驗證類型[2]；
}
回歸？'';
案子？3:
如果？(!/^[\d\s]{13,18}$/.測試(val))
{
obj.value？=?'';
回歸？v .驗證類型[3]；
}
回歸？'';
案子？4:
var？過期日期？=?document . getelementsbyname(' expiry date ')；
var？年份？=?expirydate[0]。價值；
var？月份？=?expirydate[1]。價值；
如果？(新？日期(年份，？parseInt(月)？-?1,?0)?& lt=?五.日期)
{
回歸？v .驗證類型[4]；
}
回歸？'';
默認值:
回歸？'';
}
},
checkNow:函數(對象)
{
var？_name？=?名字？驗證類型？=?-1;
如果？(_name？==?名字嗎？||?_name？==?姓什麽？||?_name？==?地址’)
{
驗證類型？=?0;
}
不然呢？如果？(_name？==?電子郵件’)
{
驗證類型？=?1;
}
不然呢？如果？(_name？==?電話’)
{
驗證類型？=?2;
}
不然呢？如果？(_name？==?信用’)
{
驗證類型？=?3;
}
不然呢？如果？(_name？==?到期日期’)
{
驗證類型？=?4;
}
var？細胞？=?obj.parentElement
如果？(cell . children[cell . children . length？-?1].tagName.toLowerCase()？==?div’)
{
cell . remove child(cell . children[cell . children . length？-?1]);
V.isError？=?假的；
}
var？錯誤？=?V.validateOnblur(obj，validation type)；
如果？(錯誤？！=?'')
{
var？信息？=?document . createelement(' div ')；
info.style.color？=?紅色'；
info.innerText？=?錯誤；
cell . appendchild(info)；
V.isError？=?真實；
}
},
顯示錯誤:？函數(行，萊恩。旗幟)
{
為了什麽？(?var？我？=?0;？我？& lt？len？i++)
{
var？細胞？=?行[i]。單元格[1]；
如果？(!細胞)
{
繼續；
}
var？obj？=?cell . children[0]；
如果？(旗幟)
{
如果？(typeof？obj.value？！=?未定義’)
{
v . check now(obj)；
}
}
其他
{
obj.onblur？=?函數()
{
V.checkNow(這個)；
}
如果？(obj.tagName.toLowerCase()？==?選擇’)
{
cell.children[1]。onblur？=?函數()
{
V.checkNow(這個)；
}
}
}
}
}
};
window.onload？=?功能？()
{
var？形式？=?document . form驗證；
var？桌子？=?form . getelementsbytagname(“table”)[0]；
var？行？=?table.rows，萊恩。=?rows.length
document . getelementbyid(' submit ')。onclick？=?函數()
{
顯示錯誤(行，萊恩。真)；
}
form.onsubmit？=?函數()
{
回歸？！V.isError
}
顯示錯誤(行，萊恩。假)；
var？約會？=?五.日期；
var？過期日期？=?document . getelementsbyname(' expiry date ')；
為了什麽？(?var？我？=?2014;？我？& lt？2055;？i++)
{
var？選項？=?document . createelement(“option”)；
選項.值？=?我；
option.innerText？=?我；
expirydate[0]。appendChild(選項)；
}
expirydate[0]。價值？=?date . get full year()；
}
& lt/script & gt；
& lt/head & gt；
& ltbody & gt
& lt形式？name="formValidation "？method="post "？操作= " " & gt
& lt表& gt
& ltcaption & gt！形式？驗證！& lt/caption & gt；
& lttr & gt
& lttd & gt首先？名稱:& lt/TD & gt；
& lttd & gt& lt輸入？type="text "？name="firstname "？/& gt；& lt/TD & gt；
& lt/tr & gt；
& lttr & gt
& lttd & gt最後？名稱:& lt/TD & gt；
& lttd & gt& lt輸入？type="text "？name="lastname "？/& gt；& lt/TD & gt；
& lt/tr & gt；
& lttr & gt
& lttd & gt地址:& lt/TD & gt；
& lttd & gt& lttextarea？name = " address " & gt& lt/textarea & gt；& lt/TD & gt；
& lt/tr & gt；
& lttr & gt
& lttd & gt電子郵件:& lt/TD & gt；
& lttd & gt& lt輸入？type="text "？name="email "？/& gt；& lt/TD & gt；
& lt/tr & gt；
& lttr & gt
& lttd & gt電話:& lt/TD & gt；
& lttd & gt& lt輸入？type="text "？name= "電話"？/& gt；& lt/TD & gt；
& lt/tr & gt；
& lttr & gt
& lttd & gt送貨？方法:& lt/TD & gt；
& lttd & gt
& lt標簽& gt& lt輸入？type="radio "？name= "交付"？checked="checked "？/& gt；普通的？post & lt/label & gt；
& lt標簽& gt& lt輸入？type="radio "？name= "交付"？/& gt；信使& lt/label & gt；
& lt標簽& gt& lt輸入？type="radio "？name= "交付"？/& gt；快遞？信使& lt/label & gt；
& lt/TD & gt；
& lt/tr & gt；
& lttr & gt
& lttd & gt信用？卡？號碼？場:？& lt/TD & gt；
& lttd & gt& lt輸入？type="text "？name="credit "？/& gt；& lt/TD & gt；
& lt/tr & gt；
& lttr & gt
& lttd & gt到期？日期:& lt/TD & gt；
& lttd & gt
& lt選擇？name = " expirydate " & gt& lt/select & gt；？年
& lt選擇？name = " expirydate " & gt
& lt選項？value="1 " >01 & lt；/option & gt；
& lt選項？value="2 " >02 & lt/option & gt；
& lt選項？value="3 " >03 & lt/option & gt；
& lt選項？value="4 " >04 & lt/option & gt；
& lt選項？value="5 " >05 & lt/option & gt；
& lt選項？value="6 " >06 & lt/option & gt；
& lt選項？value="7 " >07 & lt/option & gt；
& lt選項？value="8 " >08 & lt/option & gt；
& lt選項？value="9 " >09 & lt/option & gt；
& lt選項？value="10 " >10 & lt；/option & gt；
& lt選項？value="11 " >11 & lt；/option & gt；
& lt選項？value="12 " >12 & lt；/option & gt；
& lt/select & gt；？月
& lt/TD & gt；
& lt/tr & gt；
& lttr & gt
& lttd？class="center "？colspan="2 " >
& lt標簽& gt& lt輸入？type="checkbox "？name="newletter "？/& gt；拜托了。簽字？我嗎？向上？為了什麽？那個？newletter & lt/label & gt；
& lt/TD & gt；
& lt/tr & gt；
& lttr & gt
& lttd？class="center "？colspan="2 " >
& lt輸入？type="submit "？value= "提交"？id= "提交"？/& gt；& lt輸入？type="reset "？value="reset "？id= "重置"？/& gt；
& lt/TD & gt；
& lt/table & gt；
& lt/form & gt；
& lt/body & gt；
& lt/html & gt；