Javascript第四课!-优快云博客

本文链接：https://blog.youkuaiyun.com/adsl123gg/article/details/84166659

本文介绍了使用JavaScript进行表单验证的方法，包括防止账号密码为空及密码强度验证，并展示了如何通过JavaScript实现省市级联选择功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天讲javascript第四次课，主要还是讲了一些例子。

一.表单的验证，这要实现的功能1.防止注册的账号或密码为空 2.验证密码强度

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<style type="text/css">
		span{
			color:red;
		}
		
		.s{
			width:200px;
			height:20px;
		}
		
		.strong{
			width:40px;
			height:20px;
			display:inline;
			
			margin:0px;
			padding:0px;
			float:left;
		}
		
		.clear{
			clear:both;
		}
		
	</style>
</head>
<body>

	<form action="a.jsp" id="form">
		账号 <input type="text" name="" id="user" autocomplete="off"/>
		<span id="user-s"></span>
		<br />
		密码 <input type="password" name="" id="psd" />
		<span id="psd-s"></span>
		
		<div class="s">
			<div class="strong" id="s1"></div>
			<div class="strong" id="s2"></div>
			<div class="strong" id="s3"></div>
		</div>
		
		<div class="clear"></div>
		
		<input type="submit" value="submit" />
	</form>
	
	
	<script type="text/javascript">
		
		var user=document.getElementById("user");
		var psd=document.getElementById("psd");
		var user_s=document.getElementById("user-s");
		var psd_s=document.getElementById("psd-s");
		
		var s1=document.getElementById("s1");
		var s2=document.getElementById("s2");
		var s3=document.getElementById("s3");
		
		var score=0;
		
		function check(){
			if(user.value.trim()==""){
				user.value="";
				user.focus();
				user_s.innerHTML="用户名不能为空";
				return false;
			}
		
			if(psd.value.trim()==""){
				psd.value="";
				psd.focus();
				psd_s.innerHTML="密码不能为空";
				return false;
			}
		};
		
		user.onblur=check;
		psd.onblur=function(){
			check();
			strongCheck();
		};
		
		
		document.getElementById("form").onsubmit=check();
		
		user.onkeydown=function(){
			user_s.innerHTML="";
		};
		
		psd.onkeydown=function(){
			psd_s.innerHTML="";
			strongCheck();
		};
		
		function strongCheck(){
		
			score=0;
		
			var reg1=/^\d+$/;
			var reg2=/^[a-zA-z]+$/;
			var reg3=/^\w+$/;
			var reg4=/\w*[!@#$%^&*()~ ]+\w*/;
		
			if(psd.value.length<6){
				score+=10;
			}else{
				score+=30;
			}
			
			if(reg1.test(psd.value)){
				score+=10;
			}else if(reg2.test(psd.value)){
				score+=20;
			}else if(reg3.test(psd.value)){
				score+=30;
			}else if(reg4.test(psd.value)){
				score+=40;
			}
			
			
			if(score<=50){
				s1.style.backgroundColor="red";
				s2.style.backgroundColor="#fff";
				s3.style.backgroundColor="#fff";
			}else if(score<=60){
				s1.style.backgroundColor="red";
				s2.style.backgroundColor="blue";
				s3.style.backgroundColor="#fff";
			}else{
				s1.style.backgroundColor="red";
				s2.style.backgroundColor="blue";
				s3.style.backgroundColor="green";
			}
			
		};
	
	</script>
	
</body>
</html>

2.省市级联

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
</head>
<body>
	<select name="" id="province">
		<option value="choose">请选择省份</option>
		<option value="hn">河南</option>
		<option value="sd">山东</option>
		<option value="gd">广东</option>
	</select>
	
	<select name="" id="city">
		<option value="choose">请选择城市</option>
	</select>
	
	<script type="text/javascript">
	
		var province=document.getElementById("province");
		
		var citys=[["济源","焦作","新乡"],["菏泽","济南","青岛"],["广州","珠海","深圳"]];
		
		province.onchange=function(){
			var index=province.selectedIndex-1;
			document.getElementById("city").length=1;
			
			for(var i in citys[index]){
				var city=citys[index][i];
				var option=new Option(city,city);
				document.getElementById("city").options.add(option);
			}
			
		}
		
		
		
		
	</script>
	
</body>
</html>

最后还讲了一些正则表达式，因为我以前写过关于正则表达式的博客，所以在这里就不多说了