【专业课】9月27专业课学习-优快云博客

本文链接：https://blog.youkuaiyun.com/HUzxcvbnmasd/article/details/127085439

本文介绍了一个使用HTML和JavaScript实现的简单表单验证案例，包括用户名、密码及地址选择的验证，并通过JavaScript实现了全选功能。

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

一，使用window实现案例级联操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
						<tr>
							<td>账户：</td>
							<td>
								<input type="text" name="uname" id="uname" value="" onblur="checkUname()" />
							</td>
							<td>
								<label id="msg1"></label>
							</td>
						</tr>
						<tr>
							<td>密码：</td>
							<td>
								<input type="password" name="pwd1" id="pwd1" value="" onblur="checkPwd(1)" />
							</td>
							<td>
								<label id="msg2"></label>
							</td>
						</tr>
						<tr>
							<td>确认密码：</td>
							<td>
								<input type="password" name="pwd2" id="pwd2" value="" onblur="checkEquals()" />
							</td>
							<td>
								<label id="msg3"></label>
							</td>
						</tr>
						<tr>
							<td>家庭住址：</td>
							<td>
								<select name="province" id="province" onchange="changeOpt()">
									<option value="请选择省份">--请选择省份--</option>
									<option value="河南省">--河南省--</option>
									<option value="四川省">--四川省--</option>
								<lect>
								<select name="cities" id="cities">
									<option value="请选择城市">--请选择城市--</option>
								<lect>
							</td>
							<td>
								
							</td>
						</tr>
						<tr>
							<td colspan="3" align="center">
								<input type="button" id="btn" value="提交" />
							</td>
						</tr>
					</table>
				<div id="result">
					
				</div>
				<script type="text/javascript">
					function checkUname(){
						//实现用户名验证用户名只能是英文字母且长度至少6位
						var reg=/^[a-zA-Z]{6,}$/
						var username=document.getElementById("uname").value
						if(reg.test(username)){
							document.getElementById("msgl").innerHTML="用户格式正确"
							return true
						}else{
							document.getElementById("msgl").innerHTML="用户名格式不正确"
							return false
						}
					}
					function checkPwd(n){
						var pwd1=document.getElementById("pwd1").value
						var pwd2=document.getElementById("pwd2").value
						var reg=/^\w$/
						if(n==1){
							if(reg.test(pwd1)){
								document.getElementById("msg2").innerHTML="密码格式正确"
								return true 
							}else{
								document.getElementById("msg2").innerHTML="密码格式不正确"
								return false
							}
						}else{
							if(reg.test(pwd2)){
								document.getElementById("msg3").innerHTML="确认密码格式正确"
								return true
							}else{
								document.getElementById("msg3").innerHTML="确认密码格式不正确"
								return  false
							}
						}
					}
					function checkEquals(){
						var pwd1=document.getElementById("pwd1").value
						var pwd2=document.getElementById("pwd2").value
						if(checkPwd(2)){
							if(pwd1==pwd2){
								document.getElementById("msg3").innerHTML="密码和确认密码一致"
								return true
							}else{
								document.getElementById("msg3").innerHTML="密码和确认密码不一致"
								return false
							}
						}
					}
					function changeOpt(){
						var cisylist=new Array();
						cisylist["请选择省份"]=["--请选择城市--"]
						cisylist["河南省"]=["郑州，信阳，开封，洛阳，商丘"]
						cisylist["四川省"]=["成都，绵阳，德阳，自贡，泸州"]
						var province=document.getElementById("procince").value
						document.getElementById("cities").options.length=0
						for(var i=0;i<citylist[province].length;i++){
							var opt=new Option(citylist[province][i],citylist[province][i])
							document.getElementById("cities").options.add(opt)
						}
					}
				</script>
	</body>
</html>

二，将课堂案例全选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul{list-style:none;}
		</style>
	</head>
	<body>
		<p>
			<input type="checkbox" name="" id="selectAll" value="" />全选/全不选
		</p>
		<hr >
		<ul class="shop">
			<li><inout type="checkbox">苹果</li>
			<li><inout type="checkbox">香蕉</li>
			<li><inout type="checkbox">芒果</li>
			<li><inout type="checkbox">榴莲</li>
			<li><inout type="checkbox">桃子</li>
		</ul>
		<script>
			document.getElementById("selectAll").onclick=function(){
				var isChecked=this.checked
				var cbs=document.querySelectorAll(".shop input")
				for(var i=0;i<cbs.length;i++){
					cbs[i].checked=isChecked
				}
			}
			for(var i=0;i<cbs.length;i++){
				cbs[i].onclick=function(){
					var count=0
					for(var j=0;j<cbs.length;j++){
						if(cbs[j].checked){
							count++
						}
					}if(count==cbs.length){
						document.getElementById("selectAll").check=true
					}else{
						document.getElementById("selectAll").check=false
					}
				}
			}
		</script>
	</body>
</html>