zoukankan      html  css  js  c++  java

  • 表单验证的初步实现和省市级联

    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>
  • 相关阅读:
    PHP install perl module
    PHP 静态页
    PHP对类的操作
    PHP Mysql操作。
    2020.7.16
    2020.7.19
    2020.7.14
    2020.7.12
    2020.7.17
    2020.7.10
  • 原文地址：https://www.cnblogs.com/lixiaopan/p/6169718.html
Copyright © 2011-2022 走看看