前端开发网页设计(五)：JavaScript(JS)学习(3):实战一些小JS项目

本文链接：https://blog.youkuaiyun.com/weixin_43070331/article/details/97611832

本文深入探讨JavaScript在网页注册表单校验的应用，包括用户名、密码、手机号、邮箱等字段的规则检查，以及验证码的生成与验证。同时，介绍了使用JS动态操作表格，实现增删改查、全选功能，并通过实例展示了如何模拟淘宝商品展示效果及实现双搜项目的技巧。

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

源码下载链接：https://pan.baidu.com/s/1Gtmh5LESCFyAjVNSuEb9BQ 提取码：q5zz

JavaScript学习

16.实战:JS的form表单校验(网页注册校验)

17.实战:JS实现模拟淘宝

18.实战:JS动态操作表格实现增删改、全选checkbox

19.实战:JS实现双搜项目

16.实战:JS的form表单校验(网页注册校验)

<html>
	<head>
		<title>js校验form表单</title>
		<meta charset="UTF-8"/>
		<!--声明css代码域-->
		<style type="text/css">
			/*设置背景图片*/
			body{
				background-image: url(img/b.jpg);
			}
			/*设置tr样式*/
			tr{
				height: 40px;
			}
			/*设置div样式*/
			#showdiv{
				border: solid 1px #FF0000;
				border-radius: 10px;
				width: 500px;
				margin: auto;
				margin-top: 40px;	
			}
			/*设置table*/
			table{
				margin: auto;
				color: white;	
			}
			span{
				font-size:13px;
			}
			#codeSpan{
				font-size:20px;
			}
		</style>
		<!--声明js代码域-->
		<script type="text/javascript">
			//常见验证码
				function createCode(){
					//创建随机四位数字
					var code=Math.floor(Math.random()*9000+1000);
					//获取元素对象
					var span=document.getElementById("codeSpan");
					//将数字存放到span中
					span.innerHTML=code;	
					checkCode();		
				}
			//验证用户名
				function checkUname(){
					//获取用户的用户名信息
						var uname=document.getElementById("uname").value;
					//创建校验规则
						var reg=/^[\u4e00-\u9fa5]{2,4}$/
					//获取span对象
						var span=document.getElementById("unameSpan");
					//开始校验
						if(uname=="" || uname==null){
							//输出校验结果
							span.innerHTML="用户名不能为空";
							span.style.color="red";
							return false;
						}else if(reg.test(uname)){
							//输出校验结果
							span.innerHTML="用户名ok";
							span.style.color="green";
							return true;
						}else{
							//输出校验结果
							span.innerHTML="用户名不符合规则";
							span.style.color="red";
							return false;
						}
					
				}
			//验证密码
				function checkPwd(){
					//获取用户的密码信息
						var pwd=document.getElementById("pwd").value;
					//创建校验规则
						var reg=/^[a-z]\w{5,7}$/;
					//获取span对象
						var span=document.getElementById("pwdSpan");
					//开始校验
						if(pwd=="" ||pwd==null){
							//输出校验结果
							span.innerHTML="*密码不能为空";
							span.style.color="red";
							return false;
						}else if(reg.test(pwd)){
							//输出校验结果
							span.innerHTML="*密码ok";
							span.style.color="green";
							return true;
						}else{
							//输出校验结果
							span.innerHTML="*密码格式不正确";
							span.style.color="red";
							return false;
						}
					checkPwd2();
				}
			//校验确认密码
				function checkPwd2(){
					//获取第一次密码
					var pwd=document.getElementById("pwd").value;
					//获取确认密码
					var pwd2=document.getElementById("pwd2").value;
					//获取span对象
					var span=document.getElementById("pwd2Span");
					//比较两次密码是否相同
					if(pwd2==""||pwd2==null){
						span.innerHTML="确认密码不能为空";
						span.style.color="red";
						return false;
					}else if(pwd==pwd2){
						span.innerHTML="确认密码ok";
						span.style.color="green";
						return true;
					}else{
						span.innerHTML="两次密码不一致";
						span.style.color="red";
						return false;
					}
				}
			//校验手机号
				function checkPhone(){
					return checkField("phone",/^1[3,4,5,7,8]\d{9}$/);
				}
			//校验邮箱
				function checkMail(){
					return checkField("mail",/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/ )
					
					
				}
			//校验籍贯
				function checkAddress(){
					//获取用户选择的数据
					var sel=document.getElementById("address").value;
					//获取span
					var span=document.getElementById("addressSpan");
					//校验
					if(sel!=0){
						span.innerHTML="籍贯选择成功";
						span.style.color="green";
						return true;
					}else{
						span.innerHTML="籍贯不能为请选择";
						span.style.color="red";
						return false;
					}
					
					
				}
			//校验爱好
				function checkFav(){
					//获取所有的爱好
					var favs=document.getElementsByName("fav");
					//获取span
					var span=document.getElementById("favSpan");
					//遍历
					for(var i=0;i<favs.length;i++){
						if(favs[i].checked){
							span.innerHTML="爱好选择成功";
							span.style.color="green";
							return true;
						}
					}
					
					span.innerHTML="爱好至少选则一项";
					span.style.color="red";
					return false;
					
				}
					//校验验证码
				function checkCode(){
					//获取验证码
					var syscode=document.getElementById("codeSpan").innerHTML;
					//获取用户填写的验证码
					var code=document.getElementById("code").value;
					//获取span
					var span=document.getElementById("codeSpan2");
					if(code==syscode){
					span.innerHTML="验证码正确"
					span.style.color="green";
					return true
					}else{
					span.innerHTML="验证码错误"
					span.style.color="red";
					return false;
					}
					
					return false

					
				}
			//校验是否同意公司协议
				function checkAgree(){
					document.getElementById("sub").disabled=!document.getElementById("agree").checked;
				}
			//提交判断
				function checkSub(){
					checkUname();
					checkPwd();
					checkPwd2();
					checkPhone();
					checkMail();
					checkAddress();
					checkFav();
					checkCode();
					return checkUname()&&checkPwd()&&checkPwd2()&&checkPhone()&&checkMail()&&checkAddress()&&checkFav()&&checkCode();
				}
/*-------------------------------------------------------------------------------------------------*/
			//封装校验:相同的保留，不同的传参。
			function checkField(id,reg){
				//获取用户数据
					var inp=document.getElementById(id);
					var va=inp.value;
				 	var alt=inp.alt;
				//创建校验规则
				//获取span对象
					var span=document.getElementById(id+"Span")
				//开始校验
					if(va=="" ||va==null){
						//输出校验结果
						span.innerHTML=alt+"不能为空";
						span.style.color="red";
						return false;
					}else if(reg.test(va)){
						//输出校验结果
							span.innerHTML=alt+"ok";
							span.style.color="green";
							return true;
					}else{
						//输出校验结果
							span.innerHTML=alt+"不符合规则";
							span.style.color="red";
							return false;
					}
			}
		</script>
	</head>
	<body onload="createCode()">
		<div id="showdiv">
		<form action="#" method="get" onsubmit="return checkSub()">
			<table>
				<tr>
					<td width="80px">用户名:</td>
					<td width="200px">
						<input type="text" name="uname" id="uname" value="" onblur="checkUname()" alt="用户名"/><span id="unameSpan">*2-4位汉字</span>
					</td>
				</tr>
				<tr>
					<td>密码:</td>
					<td>
						<input type="password" name="pwd" id="pwd" value="" onblur="checkPwd()"/>
						<span id="pwdSpan"></span>
					</td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td>
						<input type="password" name="pwd2" id="pwd2" value="" onblur="checkPwd2()"/>
						<span id="pwd2Span"></span>
					</td>
				</tr>
				<tr>
					<td>手机号:</td>
					<td>
						<input type="text" name="phone" id="phone" value="" alt="手机号" onblur="checkPhone()"/>
						<span id="phoneSpan"></span>
					</td>
				</tr>
				<tr>
					<td>邮箱：</td>
					<td>
						<input type="text" name="mail" id="mail" value="" alt="邮箱" onblur="checkMail()"/>
						<span id="mailSpan"></span>
						
				</tr>
				<tr>
					<td>性别</td>
					<td>
						男 <input type="radio" name="sex" id="sex" value="0" checked="checked"/>
						女 <input type="radio" name="sex" id="sex" value="1" />
					</td>
				</tr>
				<tr>
					<td>籍贯:</td>
					<td>
						<select name="address" id="address" onchange="checkAddress()">
							<option value="0">--请选择--</option>
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
						</select>
						<span id="addressSpan"></span>
					</td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td>
						<input type="checkbox" name="fav" id="" value="1" onclick="checkFav()"/>LOL
						<input type="checkbox" name="fav" id="" value="2" onclick="checkFav()"/>睡觉
						<input type="checkbox" name="fav" id="" value="3" onclick="checkFav()"/>吃饭<br />
						<input type="checkbox" name="fav" id="" value="4" onclick="checkFav()"/>打豆豆
						<input type="checkbox" name="fav" id="" value="5" onclick="checkFav()"/>看电影
						<input type="checkbox" name="fav" id="" value="6" onclick="checkFav()" />听歌
						<span id="favSpan"></span>
					</td>
				</tr>
				<tr>
					<td>个人介绍:</td>
					<td>
						<textarea name="intro" rows="4" cols="40" id="intro"></textarea>
						
					</td>
				</tr>
				<tr>
					<td>验证码:</td>
					<td>
						<input type="text" name="code" id="code" value="" style="width: 100px;" onblur="checkCode()"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<span id="codeSpan" onclick="createCode()" style="background-image: url(img/code.jpg.gif);color: black;"></span>
						<span id="codeSpan2"><span>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="checkbox" name="" id="agree" value="" onclick="checkAgree()"/>是否同意本公司协议</td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="submit" name="" id="sub" value="立即注册" disabled="disabled"/></td>
				</tr>
			</table>
		</form>
		</div>
	</body>
</html>

在这里插入图片描述

17.实战:JS实现模拟淘宝

<html>
	<head>
		<title>模拟淘宝网</title>
		<meta charset="UTF-8"/>
		<!--声明js代码域-->
		<script type="text/javascript">
			//创建函数进行照片的联动和样式设置
				function operInImg(img,src){
					//设置图片的样式
					img.style.border="solid 1px";
					//设置大图的img路径
						//获取大图对象
						var big=document.getElementById("big");
						//设置路径
						big.src="img/"+src;
					
					
				}
			function operOutImg(img){
				img.style.border="";
			}
		</script>
		<!--声明css代码域-->
		<style type="text/css">
		/*设置div的样式*/
			#showdiv{
				width: 370px;
				height: 400px;
				border: solid 1px;
				border-radius: 20px;
			}
		/*设置table的样式*/
			#ta{
				margin: auto;
				margin-top: 10px;	
			}
		</style>
	</head>
	<body>
		<div id="showdiv">
			<table  width="349px" id="ta">
				<tr height="300px">
					<td colspan="5"><img src="img/show1_big.jpg" id="big"/></td>
				</tr>
				<tr height="60px">
					<td><img src="img/show1.jpg" onmouseover="operInImg(this,'show1_big.jpg')" onmouseout="operOutImg(this)"/></td>
					<td><img src="img/show2.jpg" onmouseover="operInImg(this,'show2_big.jpg')" onmouseout="operOutImg(this)"/></td>
					<td><img src="img/show3.jpg" onmouseover="operInImg(this,'show3_big.jpg')" onmouseout="operOutImg(this)"/></td>
					<td><img src="img/show4.jpg" onmouseover="operInImg(this,'show4_big.jpg')" onmouseout="operOutImg(this)"/></td>
					<td><img src="img/show5.jpg" onmouseover="operInImg(this,'show5_big.jpg')" onmouseout="operOutImg(this)"/></td>
				</tr>
			</table>
		</div>
	</body>
</html>

在这里插入图片描述

18.实战:JS动态操作表格实现增删改、全选checkbox

<html>
	<head>
		<title>操作表格</title>
		<meta charset="UTF-8"/>
		<!--
			js操作表格学习:
				1、删除行：
					行对象.rowIndex//返回行对象的角标
					表格对象.deleteRow(要删除的行对象的角标);
				2、修改单元内容
					单元格对象.innerHTML="新的内容";
					行对象.cells//返回当前行所有的单元格对象的数组
		-->
		<!--声明css-->
		<style type="text/css">
			body{
				text-align: center;
			}
			/*设置表格居中*/
			#ta{
				margin: auto;
			}
			/*设置表格的行样式*/
			#ta tr{
				height: 35px;
			}	
		</style>
		<!--声明js代码域-->
		<script type="text/javascript">
			//声明删除行
				function delRow(btn){
					//获取table对象
					var ta=document.getElementById("ta");
					//获取要删除的行对象
					var tr=btn.parentNode.parentNode;
					//删除行
					ta.deleteRow(tr.rowIndex);
				}
			//修改功能
				function updateRow(btn){
					//获取单元格对象
						//获取行对象
						var tr=btn.parentNode.parentNode;
						//获取行对象
						var cell=tr.cells[3];
					//判断cell.innerHTML的值是否是数字
					if(!isNaN(Number(cell.innerHTML))){
						//修改单元格内容
						cell.innerHTML="<input type='text' value='"+cell.innerHTML+"' οnblur='updateRow2(this)'/>";	
					}
					
				}
				
				function updateRow2(inp){
					//获取单元格对象
					var cell=inp.parentNode;
					//实现保存
					cell.innerHTML=inp.value;
				}
/*---------------------------------------------------------------------------------*/
		//选择删除
			function chooseDel(){
				//获取表格对象
					var ta=document.getElementById("ta");
				//获取要删除的行号
					var chks=document.getElementsByName("chk");	
					for(var i=1;i<chks.length;i++){
						if(chks[i].checked){
							//删除行
							ta.deleteRow(i);
							i--;
						}
					}
			}
			//添加行
			function addRow(){
				//获取table表格对象
				var ta=document.getElementById("ta");
				//添加行
				var tr=ta.insertRow(1);
				//添加单元格
				var cell0=tr.insertCell(0);
				cell0.innerHTML="<input type='checkbox' name='chk'/>";
				var cell1=tr.insertCell(1);
				cell1.innerHTML=document.getElementById("uname").value;
				var cell2=tr.insertCell(2);
				cell2.innerHTML="李四";
				var cell3=tr.insertCell(3);
				cell3.innerHTML="49.88";
				var cell4=tr.insertCell(4);
				cell4.innerHTML="5";
				var cell5=tr.insertCell(5);
				cell5.style.textAlign="center";
				cell5.innerHTML="<input type='button'  value='修改数量'  οnclick='updateRow(this)'/><input type='button' value='删除' οnclick='delRow(this)'/>";
				
			}
			//复制行
			function copyRow(){
				//获取表格对象
				var ta=document.getElementById("ta");
				//获取选择行对象
				var chks=document.getElementsByName("chk")
				for(var i=0;i<chks.length;i++){
					if(chks[i].checked){
						var tr=ta.insertRow(ta.rows.length);
						//复制行
						tr.innerHTML=ta.rows[i].innerHTML;
					}
				}	
			}
			//全选
				function chooseAll(){
					var ck=document.getElementById("ck");
					var chks=document.getElementsByName("chk");
					if(ck.checked){
						for(var i=0;i<chks.length;i++){
							chks[i].checked=true;
						}
					}else{
						for(var i=0;i<chks.length;i++){
							chks[i].checked=false;
						}
					}
				}
			//隔行变色
			function operCss(){
				//获取所有的行对象数组
				var trs=document.getElementById("ta").rows;
				//遍历
				for(var i=0;i<trs.length;i++){
					if(i%2==0){
						trs[i].style.backgroundColor="red";
					}else{
						trs[i].style.backgroundColor="green";
					}
				}
			}
		</script>
	</head>
	<body>
		<h3 align="center">操作表格学习</h3>
		<input type="button" name="" id="" value="删除"  onclick="chooseDel()"/>
		<input type="button" name="" id="" value="添加行" onclick="addRow()"/>
		<input type="button" name="" id="" value="复制行" onclick="copyRow()"/>
		<input type="button" name="" id="" value="隔行变色" onclick="operCss()"/>
		书名：<input type="text" name="uname" id="uname" value="" />
		<hr />
			<table border="1px" id="ta">
				<tr style="text-align: center;font-weight: bold;">
					<td width="50px" align="left"><input type="checkbox" name="chk" value="0"  id="ck" onclick="chooseAll()"/></td>
					<td width="200px">书名</td>
					<td width="100px">作者</td>
					<td width="100px">价格</td>
					<td width="200px">购买数量</td>
					<td width="200px" >操作</td>
				</tr>
				<tr id="t1">
					<td><input type="checkbox" name="chk" id="chk" value="0" /></td>
					<td>javaScript入门</td>
					<td>张三</td>
					<td>43.50</td>
					<td>3</td>
					<td align="center">
						<input type="button" name="" id="" value="修改数量"  onclick="updateRow(this)"/>
						<input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
					</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="chk" id="chk" value="1" /></td>
					<td>JAVA零基础入门</td>
					<td>李四</td>
					<td>77.60</td>
					<td>2</td>
					<td align="center">
						<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/>
						<input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
					</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="chk" id="chk" value="2" /></td>
					<td>Spring入门</td>
					<td>王五</td>
					<td>78.88</td>
					<td>3</td>
					<td align="center">
						<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/>
						<input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
					</td>
				</tr>
			</table>
	</body>
</html>

在这里插入图片描述

19.实战:JS实现双搜项目

<html>
	<head>
		<title>双搜</title>
		<meta charset="UTF-8"/>
		<title>哈哈</title>
		<style type="text/css">
			
			#showdiv{
				margin: auto;
				margin-top: 150px;
				width: 400px;
				margin-bottom: 20px;
			}
			
			
		</style>
		<script type="text/javascript">
			
			function test(){
				var search=document.getElementById("search").value;
				document.getElementById("wd").value=search;
				document.getElementById("q").value=search;
				
				document.getElementById("fmB").submit();
				document.getElementById("fmS").submit();
				
				//将隐藏的div显示出来
					document.getElementById("div01").style.display="";
				
			}
			
			//alert(document.getElementsByTagName("title"));
			
		</script>
	</head>
	<body>
		<div id="showdiv">
			<input type="text" name="" id="search" value="" />
			<input type="button" name="" id="" value="牛逼一下" onclick="test()"/>
		</div>
		<hr />
		<form action="http://www.baidu.com/s" method="get" id="fmB" target="ifB">
			<input type="hidden" name="wd" id="wd" value="" />
		</form>
		<form action="http://www.so.com/s" method="get" id="fmS" target="ifS">
			<input type="hidden" name="q" id="q" value="" />
		</form>
		<!--声明iframe-->
		<div id="div01" style="display: none;">
			<iframe src="" width="49%" height="500px" name="ifB"></iframe>
			<iframe src="" width="49%" height="500px" name="ifS"></iframe>
		</div>
			
	</body>
</html>