表单验证的初步实现和省市级联
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.onload=function(){
document.getElementById("myform").onsubmit=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" onblur=""/><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" onchange="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>
