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>
