java-Web(表单的验证)

实现页面:
在这里插入图片描述

实现代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>美化会员登录界面</title>
		<style>
			td{
				font-size: 12px;
			}
			
			/*a{
				text-decoration: none;
			}*/
			
			.d1 a:hover{
				color: red;
				text-decoration: none;
			}
			
			.d2{
				text-align:right;
			}
			
			.d3{
				border-style: solid;
			}
		</style>
		
		<script>
			function checkEmail(){
				var emailValue=document.getElementById("email").value;
				if(emailValue.length==0){
					alert("电子邮箱不能为空!");
					return false;
				}
				if(emailValue.indexOf("@")==-1){
					alert("电子邮箱中必须包含@");
					return false;
				}
				if(emailValue.indexOf(".")==-1){
					alert("电子邮箱中必须包含.");
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
		<div>
			<form>
				<table>
					<tr>
						<td class="d2">会员名:</td>
						<td>
							<input type="text" id="meber" class="d3" />
						</td>
					</tr>
					
					<tr>
						<td class="d2">密码:</td>
						<td>
							<input type="password" id="pwd" class="d3" />
						</td>
					</tr>
					
					<tr>
						<td class="d2">邮箱:</td>
						<td>
							<input type="text" id="email" class="d3" />
						</td>
					</tr>
				</table>
			</form>
		</div>
		
		<div class="d1">
			<form>
				<input type="image" src="img/login.png" width="70px" height="20px" onfocus="checkEmail()" />
				<a href="index.html" class="d1" >免费注册</a>
			</form>
		</div>
	</body>
</html>

实现效果:
在这里插入图片描述

实现页面:
在这里插入图片描述

实现代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#container{
				width: 1000px;
				height:130px ;
				margin: 0px auto;
				background-image: url(img/h_bg.jpg);
				
			}
			#topmenu{
				margin: 0px;
				padding-top: 0px;
				width: 480px;
				height: 39px;
				float: right;
			}
			#firstmenu{
				padding: 0px;
				margin: 0px;
				width: 580px;
				height: 33px;
				float: right;
			}
			
			#logo{
				width: 280px;
				height: 96px;
			}
			
			#secondmenu{
				margin-right: 550px;
				padding-top: 15px;
				width: 1000px;
				height: 34px;
				line-height: 34px;
				clear: both;
			}
			
			.one{
				background-image: url(img/icon.gif);
				background-repeat: no-repeat;
				background-position: 0px 0px;
				width: 25px;
				height: 22px;
			}
			
			.two{
				background-image: url(img/icon.gif);
				background-repeat: no-repeat;
				background-position: -28px 0px;
				width: 25px;
				height: 22px;
			}
			
			.three{
				background-image: url(img/icon.gif);
				background-repeat: no-repeat;
				background-position: -55px 0px;
				width: 25px;
				height: 22px;
			}
			
			.four{
				background-image: url(img/icon.gif);
				background-repeat: no-repeat;
				background-position: -83px 0px;
				width: 25px;
				height: 22px;
			}
			
			.five{
				background-image: url(img/icon.gif);
				background-repeat: no-repeat;
				background-position: 0px -25px;
				width: 43px;
				height: 22px;
			}
			
			li{
				list-style: none;
				margin: 0px;
				float: left;
				font-size: 12px;
				height: 25px;
				line-height: 25px;
				width: 50px;
				padding: 0px;
				text-align: center;
			}
			.text{
				list-style: none;
				letter-spacing: 5px;
				margin-top: 40px;
				width: 450px;
				height: 33px;
				line-height: 33px;
				font-size: 12px;
			}
			
			.text2{
				width: 80px;
				float: left;
			}
			#main{
				width: 100%;
				height: 400px;
				background-color: #FF7300;
				
			}
			
			/*#footer{
				width: 100%;
				height: 100px;
				background-color: yellow;
			}*/
			
			/*#left{
				width: 50%;
				height: 100%;
				background-color: antiquewhite;
				float: left;*/
				
			}
			
			/*#right{
				width: 50%;
				height: 100%;
				background-color: red;
				float: left;
			}*/
			
		</style>
	</head>
	<body>
		<div id="container">
			<div id="topmenu">
					<ul>
						<li class="one"></li>
						<li>购物车</li>
						<li class="two"></li>
						<li>帮助中心</li>
						<li class="three"></li>
						<li>加入收藏</li>
						<li class="four"></li>
						<li>设为首页</li>
						<li class="five">登录</li>
						<li class="five">注册</li>
					</ul>
			</div>	
				<div id="firstmenu" class="text">
					你好,贵美商城欢迎你!(hello)
				</div>
				
				<div id="secondmenu">
					<ul>
						<li class="text2" style="color: white;" onmouseover="this.style.backgroundImage='url(img/yuan.png)'"
							onmouseout="this.style.backgroundImage='url(img/light.png)'">&nbsp;&nbsp;</li>
						<li class="text2" style="color: white;">家用电器</li>
						<li class="text2" style="color: white;">手机数码</li>
						<li class="text2" style="color: white;">日用百货</li>
						<li class="text2" style="color: white;">&nbsp;&nbsp;</li>
						<li class="text2" style="color: white;">帮助中心</li>
						<li class="text2" style="color: white;">免费开店</li>
						<li class="text2" style="color: white;">全球资讯</li>
					</ul>
				</div>
				<div id="main">
				<div id="left">
					<!--左边-->
				</div>
				
				<div id="right">
					<!--右边-->
				</div>
			</div>
			
			<div id="footer">
				<!--底部-->
			</div>
			
			
		</div>
	</body>
</html>

实现效果:
在这里插入图片描述

实现页面:
在这里插入图片描述

实现代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滚动的广告</title>
		<style>
			.d1{
				text-align: center;
			}
			
			.adv{
				position: absolute;
				left: 250px;
				top: 150px;
				z-index: 2;
			}
			
			.close{
				position: absolute;
				left: 250px;
				top: 150px;
				z-index: 3;
			}
		</style>
		
		<script>
			var adverTop;//广告距离顶部的距离
			var adverLeft;//广告距离左边的距离
			var closeTop;//关闭按钮距离顶部的距离
			var closeLeft;//关闭按钮距离左边的距离
			
			var adverObject;//广告图片对象
			var closeObject;//关闭按钮图片对象
			//广告语关闭按钮初始位置距离顶部与左边的距离
			function init(){
				adverObject=document.getElementById("d2");
				closeObject=document.getElementById("d3");
				if(adverObject.currentStyle){
					adverTop=parseInt(adverObject.currentStyle.top);
					closeTop=parseInt(closeObject.currentStyle.top);
					adverLeft=parseInt(adverObject.currentStyle.left);
					closeLeft=parseInt(closeObject.currentStyle.left);
				}else{
					adverTop=parseInt(document.defaultView.getComputedStyle(adverObject,null).top);
					adverLeft=parseInt(document.defaultView.getComputedStyle(adverObject,null).left);
					closeTop=parseInt(document.defaultView.getComputedStyle(adverObject,null).top);
					closeLeft=parseInt(document.defaultView.getComputedStyle(adverObject,null).left);
				}
			}
			
			//获取滚动条移动的距离,从新设置广告位置
			function move(){
				adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTop)+"px";
				adverObject.style.left=adverLeft+parseInt(document.documentElement.scrollLeft)+"px";
				
				closeObject.style.top=closeTop+parseInt(document.documentElement.scrollTop)+"px";
				closeObject.style.left=closeLeft+parseInt(document.documentElement.scrollLeft)+"px";
			}
			
			function displayClose(){
				var adverImg=document.getElementById("d2");
				var closeImg=document.getElementById("d3");
				adverImg.style.display="none";
				closeImg.style.display="none";
			}
			window.onload=init;
			window.onscroll=move;
			
		</script>
	</head>
	<body>
		<div class="d1">
			<img src="img/adv.jpg" id="d2" class="adv" />
			<img src="img/close.jpg" id="d3" class="close"  onclick="displayClose()" />
			<img src="img/main1.JPG" /><br />
			<img src="img/main2.JPG" /><br />
			<img src="img/main3.JPG" />
			
		</div>
	</body>
</html>

实现效果:
在这里插入图片描述

实现页面:
在这里插入图片描述

实现代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>验证电子邮箱</title>
		<script>
			function checkMail(){
				var emailValue=document.getElementById("email").value;
				if(emailValue.length==0){
					alert("电子邮箱不能为空!");
					return false;
				}
				if(emailValue.indexOf("@")==-1){
					alert("电子邮箱中必须包含@");
					return false;
				}
				if(emailValue.indexOf(".")==-1){
					alert("电子邮箱中必须包含.");
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
		<div>
			<form>
				<table>
					<tr>
						<td>电子邮箱:</td>
						<td>
							<input type="text" id="email"  />(必须包含@和.字符)
						</td>
					</tr>
					
					<tr>
						<td>性别:</td>
						<td>
							<input type="radio" name="sex" value="" checked="checked" />
							<img src="img/Male.gif" /><input type="radio" name="sex" value="" />
							<img src="img/Female.gif" /></td>
					</tr>
					
					<tr>
						<td>头像:</td>
						<td>
							<input type="file" />
						</td>
					</tr>
					
					<tr>
						<td>爱好:</td>
						<td>
							<input type="checkbox" />运动&nbsp;&nbsp;&nbsp;
							<input type="checkbox" />聊天&nbsp;&nbsp;&nbsp;
							<input type="checkbox" />玩游戏
						</td>
					</tr>
					
					<tr>
						<td>出生日期:</td>
						<td>
							<input type="text" size="4" value="yyyy" /><select name="month">
								<option value="" selected="selected">[选择月份]</option>
								<option value="1">1月</option>
								<option value="2">2月</option>
								<option value="3">3月</option>
								<option value="4">4月</option>
								<option value="5">5月</option>
								<option value="6">6月</option>
								<option value="1">7月</option>
								<option value="2">8月</option>
								<option value="3">9月</option>
								<option value="4">10月</option>
								<option value="5">11月</option>
								<option value="6">12月</option>
							</select><input type="text" size="4" value="dd" /></td>
					</tr>
					
					<tr>
						<td colspan="2" style="text-align: center;">
							<input type="image" src="img/submit.gif" onfocus="checkMail()" />
							<input type="image" src="img/reset.gif" />
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>

实现效果:
在这里插入图片描述

实现页面:
在这里插入图片描述

实现代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>验证贵美注册页面</title>
		<script>
			function checkUsername(){
				var usernameValue=document.getElementById("d1").value;
				if(usernameValue.length==0){
					alert("名字不能为空!");
					return false;
				}
				for(var i=0;i<user.length;i++){
					var j=user.substring(i,i+1)
					if(j>=0){
						alert("名字中不能出现数字!");
					}
				}
				return true;
			}
			
			function checkFamilyname(){
				var FamilynameValue=document.getElementById("d2").value;
				if(FamilynameValue.length==0){
					alert("姓氏不能为空!");
					return false;
				}
				for(var i=0;i<user.length;i++){
					var j=user.substring(i,i+1)
					if(j>=0){
						alert("姓氏中不能出现数字!");
					}
				}
				return true;
			}
			
			function checkpassword(){
				var password=document.getElementById("pwd");
				var value=password.value;
				document.getElementById("passwordDiv").innerHTML="";
				if(value.length<6){
					alert("密码至少包含6个字符!")
					return false;
				}
				return true;
			}
				
			function checkrepassword(){
				var repassword=document.getElementById("pwd2");
				var password=document.getElementById("pwd");
				var value=repassword.value;
				var revalue=password.value;
				document.getElementById("repasswordDiv").innerHTML="";
				if(value!=revalue){
					alert("两次输入密码不一致!");
					return false;
				}
				return true;
			}
			
			function medth(){
				checkUsername();
				checkFamilyname();
				checkpassword();
				checkrepassword();
			}
		</script>
	</head>
	<body>
		<div>
			<form>
				<table>
					<tr>
						<td>名字:</td>
						<td>
							<input type="text" id="d1" />
						</td>
					</tr>
					
					<tr>
						<td>姓氏:</td>
						<td>
							<input type="text" id="d2" />
						</td>
					</tr>
					
					<tr>
						<td>登录名:</td>
						<td>
							<input type="text" id="d3" />
						</td>
					</tr>
					
					<tr>
						<td>密码:</td>
						<td>
							<input type="password" id="pwd" />
						</td>
					</tr>
					
					<tr>
						<td>再次输入密码:</td>
						<td>
							<input type="password" id="pwd2" />
						</td>
					</tr>
					
					<tr>
						<td colspan="2" style="text-align: center;">
							<input type="button" value="登录" onclick="medth()" />
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>

实现效果:
在这里插入图片描述

实现页面:
在这里插入图片描述

实现代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文本输入提示特效</title>
		<style>
			.red{
				color: red;
			}
		</style>
		
		<script>
			//获取元素
			function $(elements){
				return document.getElementById(elements);
			}
			
			//检查名字
			function checkusername(){
				var username=$("username");
				var uvalue=username.value;
				$("usernameDiv").innerHTML="";
				for(var i=0;i<uvalue.length;i++){
					if(uvalue.substring(i,i+1)>0){
						$("usernameDiv").innerHTML="名字中不能包含数字";
						$("username").focus();
						return false;
					}
				}
				
				return true;
			}
			
			//检查姓氏
			function checkname(){
				var name=$("name");
				var value=name.value;
				$("nameDiv").innerHTML="";
				if(value.length==0){
					$("nameDiv").innerHTML="姓氏不能为空!!!";
					return false;
				}
				
				
				return true;
			}
			
			
			//检查密码、
			function checkpassword(){
				var password=$("password");
				var value=password.value;
				$("passwordDiv").innerHTML="";
				if(value.length<6){
					$("passwordDiv").innerHTML="密码必须大于或等于6位";
					return false;
				}
				
				
				return true;
			}
			
			
			//检查再次输入密码
			function checkrepassword(){
				var repassword=$("repassword");
				var password=$("password");
				var value=repassword.value;
				var revalue=password.value;
				$("repasswordDiv").innerHTML="";
				if(value!=revalue){
					$("repasswordDiv").innerHTML="两次输入的密码不一致";
					return false;
				}
				
				
				return true;
			}
			
			//检查Email
			function checkEmail(){
				var email=$("email");
				var emailValue=email.value;
				
				$("emailDiv").innerHTML="";
				if(emailValue.length==0){
					$("emailDiv").innerHTML="email不能为空...";
					return false;
				}
				
				if(emailValue.indexOf("@")==-1){
					$("emailDiv").innerHTML="email必须包含@...";
					return false;
				}
				
				if(emailValue.indexOf(".")==-1){
					$("emailDiv").innerHTML="email必须包含...";
					return false;
				}
				
				return true;
			}
			
			//验证不通过不能提交
			function validate(){
				if (checkusername()&&checkname()&&checkpassword()&&checkrepassword()&&checkEmail()) {
					return true;
				}
				return false;
			}
		</script>
	</head>
	<body>
		<form onsubmit="return validate()">
			<table>
				<tr>
					<td>
						名字:<input type="text" id="username" onblur="checkusername()"/>
					</td>
					<td>
						<div id="usernameDiv" class="red"></div>
					</td>
				</tr>
				
				<tr>
					<td>
						姓氏:<input type="text" id="name" onblur="checkname()"/>
					</td>
					<td>
						<div id="nameDiv" class="red"></div>
					</td>
				</tr>
				
				
				
				<tr>
					<td>
						登录名:<input type="text" id="loginName"/>
					</td>
					<td>
						<div id="loginNameDiv" class="red"></div>
					</td>
				</tr>
				
				<tr>
					<td>
						密码:<input type="password" id="password" onblur="checkpassword()"/>
					</td>
					<td>
						<div id="passwordDiv" class="red"></div>
					</td>
				</tr>
				
				<tr>
					<td>
						再次输入密码:<input type="password" id="repassword" onblur="checkrepassword()"/>
					</td>
					<td>
						<div id="repasswordDiv" class="red"></div>
					</td>
				</tr>
				
				<tr>
					<td>
						电子邮箱:<input type="text" id="email" onblur="checkEmail()"/>
					</td>
					<td>
						<div id="emailDiv" class="red"></div>
					</td>
				</tr>
				
				
				<tr>
					<td colspan="2">
					<input type="submit" value="注册"  />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

实现效果:
在这里插入图片描述以上代码均为个人所写,如有错误,欢迎指正,谢谢!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值