1.表單驗證的初步實現
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>用戶注冊</title><script language="JavaScript" type="text/javascript">window.οnlοad=function(){document.getElementById("myform").οnsubmit=function(){//獲取表單元素中的值var username=this.username.value;var psw=this.psw.value;var repsw=this.repsw.value;var tel=this.tel.value;var email=this.email.value;var mgz=['工資','待遇','薪水'];//敏感詞/*//獲取div元素var divuser=document.getElementById("divuser");var divpsw=document.getElementById("divpsw");divuser.innerHTML="";divpsw.innerHTML="";*///驗證用戶名中是否出現敏感字符if(username.length!=0){for(var i in mgz){ if(username.indexOf(mgz[i])!=-1){divuser.innerHTML="<font color='#CC0000'>用戶名不合法！</font>";//divuser.innerText="<font color='#CC0000'>用戶名不合法！</font>";return false;}}}else{divuser.innerHTML="<font color='#CC0000'>用戶名不能為空！</font>";return false;}//驗證密碼if(psw.length!=0){if(psw.length<6 || psw.length>10){divpsw.innerHTML="<font color='#CC0000'>密碼長度要求6-10位</font>";return false;}}else{divpsw.innerHTML="<font color='#CC0000'>密碼不能為空</font>";return false;}//驗證重復密碼if (repsw.length!=0) {if (psw!=repsw) {divrepsw.innerHTML="<font color='#CC0000'>兩次密碼不一致</font>";return false;}} else{divrepsw.innerHTML="<font color='#CC0000'>密碼不能為空</font>";return false;}//手機號驗證if (tel.length!=0) {if (!(/^1[34578]\d{9}$/.test(tel))) {divtel.innerHTML="<font color='#CC0000'>手機號不符合規范</font>";return false;}} else{divtel.innerHTML="<font color='#CC0000'>手機號不能為空！</font>";return false;}//郵箱驗證if (email!=0) {if (!(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email))) {divemail.innerHTML="<font color='#CC0000'>郵箱不符合規范</font>";return false;}} else{divemail.innerHTML="<font color='#CC0000'>郵箱不能為空！</font>";return false;}}}</script></head><body><form id="myform">用戶名：<input type="text" id="username" name="username" οnblur=""/><span id="divuser"></span><br />密碼：<input type="password" id="psw" name="psw" /><div id="divpsw" style="display: inline;"></div><br />重復密碼：<input type="password" name="repsw" /><div id="divrepsw" style="display: inline;"></div><br />手機：<input type="text" name="tel" /><div id="divtel" style="display: inline;"></div><br />郵箱：<input type="text" name="email" /><div id="divemail" style="display: inline;"></div><br /><input type="submit" value="注冊" /></form></body>
</html>
?2.省市級聯（通過索引index）
?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title></title><script type="text/javascript" language="JavaScript">function change() {var arr = new Array();arr['第一學期']=['Java', 'SqlServer基礎', 'C#', 'HTML'];arr['第二學期']=['JavaScript', 'SqlServer高級', '.NET', 'JSP'];arr['第二學年']=['Struts', 'ASP.NET', 'Ajax','Spring','Hibernate'];var pindex=document.myform.selTerm.value;var newOption;document.myform.selCourse.options.length=0;for (j in arr[pindex]) {newOption=new Option(arr[pindex][j],arr[pindex][j]);document.myform.selCourse.options.add(newOption);}}</script></head><body><form name="myform" id="myform" action="#myform" method="post" οnchange="change()"><TABLE border="0" align="center"><TR><TD colspan="2" align="center">考 試 申 請</TD></TR><TR><TD>學期</TD><TD><SELECT name="selTerm" onChange="change( )"><OPTION>--請選擇學期--</OPTION><OPTION value="第一學期">第一學期</OPTION><OPTION value="第二學期">第二學期</OPTION><OPTION value="第二學年">第二學年</OPTION></SELECT></TD></TR><TR><TD>課程</TD><TD><SELECT name="selCourse"><OPTION>--請選擇對應學期的課程--</OPTION></SELECT></TD></TR></TABLE></form></body></html>
?
?3.省市級聯（通過value）
?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title></title><script type="text/javascript" language="JavaScript">function change() {var arr = new Array();arr[0] = ['成都', '綿陽', '德陽', '自貢', '內江', '樂山', '南充', '雅安', '眉山', '甘孜', '涼山', '瀘州'];arr[1] = ['濟南', '青島', '淄博', '棗莊', '東營', '煙臺', '濰坊', '濟寧', '泰安', '威海', '日照'];arr[2] = ['武漢', '宜昌', '荊州', '襄樊', '黃石', '荊門', '黃岡', '十堰', '恩施', '潛江'];var pindex=document.myform.selProvince.selectedIndex-1;var newoption;document.myform.selCity.options.length=0;for (j in arr[pindex]) {newoption=new Option(arr[pindex][j],arr[pindex][j]);document.myform.selCity.options.add(newoption);} }</script></head><body><FORM name="myform" id="myform" action="register_success.htm" onSubmit="return checkForm( )"><TABLE width="472" border="0" align="center" cellpadding="0" cellspacing="0"><TR><TD colspan="2"><IMG src="images/1.gif" width="273" height="59"><IMG src="../example6/2.gif" width="1" height="75"><IMG src="images/2.gif" width="393" height="59"></TD></TR><TR><TD width="185" align="center">????姓名 </TD><TD width="287"><INPUT name="txtUserName" type="text" id="txtUserName" size="25"></TD></TR><TR><TD align="center">省份 </TD><TD><SELECT name="selProvince" id="selProvince" onChange="change( )"><OPTION>--請選擇開戶帳號的省份--</OPTION><OPTION value="四川省">四川省</OPTION><OPTION value="山東省">山東省</OPTION><OPTION value="湖北省">湖北省</OPTION></SELECT></TD></TR><TR><TD><DIV align="center">城市</DIV></TD><TD><SELECT name="selCity" id="selCity" onChange="myfun1( )"><OPTION>--請選擇開戶帳號的城市--</OPTION></SELECT></TD></TR><TR><TD>?</TD><TD>?</TD></TR><TR><TD colspan="2"><DIV align="center"><IMG src="images/regquick.jpg" width="114" height="27" onClick="checkForm( )"></DIV></TD></TR><TR><TD colspan="2">?</TD></TR></TABLE></body></html>
?
