Web前端学习-1（表单提交-HTML）

qq_54472968

已于 2022-04-27 21:23:11 修改

阅读量371

点赞数

文章标签： html5

于 2022-04-27 21:18:46 首次发布

本文链接：https://blog.csdn.net/qq_54472968/article/details/124460968

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 500px;
				height: 150px;
				background: #29ffe6;
				box-shadow: 0px 0px 8px 5px #19afff;
				padding: 15px 10px;
				margin: auto;
				margin-top: 10%;
			}
			.box td{
				font-size: 18px;
				font-weight: bold;
			}
			span{
				color: red;
				font-size: 16px;
			}
			body{
				background: #ffffff;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
				onload = function(){
					var name=document.getElementById("name");
					var psw1=document.getElementById("psw1");
					var psw2=document.getElementById("psw2");
					var email=document.getElementById("email");
					var spname=document.getElementById("spname");
					var sppsw1=document.getElementById("sppsw1");
					var sppsw2=document.getElementById("sppsw2");
					var spemail=document.getElementById("spemail");
					var btnsubmit=document.getElementById("btnsubmit");
					//name失去焦点事件
					name.onblur = function(){
						// alert("失去焦点测试");
						var namestr=name.value;
						//去除name前方空行
						namestr=namestr.trim();
						if(namestr==""){//如果name为空
							spname.innerText="用户名为空";
						}else if(namestr.length<6||namestr.length>14){//如果name长度<6或>14
							spname.innerText="用户名必须在[6-14]之间";
						}else{
							var regExp=/^[A-Za-z0-9]+$/;
							var bl=regExp.test(namestr);
							if(bl){//name合法
								
							}else{//用户名含特殊符号
								spname.innerText="用户名只能由数字和字母组成";
							}
						}
					}
					//name获得焦点事件
					name.onfocus=function(){
						//清空非法name
						if(spname.innerText){
							name.value="";
						}
						//清空span
						spname.innerText="";
					}
					psw1.onblur = function(){
						var psw1str=psw1.value;
						psw1str=psw1str.trim();
						if(psw1str==""){
							sppsw1.innerText="密码为空";
						}else if(psw1str.length<6||psw1str.length>14){
							sppsw1.innerText="密码必须在[6-14]之间"
						}else{
							var regExp=/^[A-Za-z0-9]+$/;
							var bl=regExp.text(psw1str);
							if(bl){//合法密码
								
							}else{
								sppsw1.innerText="密码只能由数字和字母组成";
							}
						}
					}
					//psw1获得焦点事件
					psw1.onfocus=function(){
						//清空非法psw1
						if(sppsw1.innerText){
							psw1.value="";
						}
						//清空span
						sppsw1.innerText="";
					}
					//psw2确认密码事件
					psw2.onblur = function(){
						//alert("失去焦点测试");
						if(psw2.value==""){
							sppsw2.innerText="确认密码不能为空"
						}else if(psw2.value!=psw1.value){
							sppsw2.innerText="两次密码不一致!";
						}else{//密码一致
							
						}
					}
					//psw2获得焦点事件
					psw2.onfocus = function(){
						if(sppsw2.innerText!=""){
							psw2.value="";
						}
						sppsw2.innerText="";
					}
					email.onblur = function(){
						//alert("失去焦点测试");
						var emailstr=email.value;
						emailstr=emailstr.trim();
						if(emailstr==""){
							spemail.innerText="邮箱为空";
						}else if(emailstr.length<6||emailstr.length>20){
							spemail.innerText="邮箱格式不正确"
						}else{
							var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
							var bl=emailRegExp.test(emailstr);
							if(bl){//邮箱格式正确
								
							}else{
								spemail.innerText="邮箱格式不正确"
							}
						}
					}
					email.onfocus = function(){
						if(spemail.innerText!=""){
							email.value="";
						}
						spemail.innerText="";
					}
					btnsubmit.onclick = function(){
						name.focus();
						name.blur();
						psw1.focus();
						psw1.blur();
						psw2.focus();
						psw2.blur();
						email.focus();
						email.blur();
						if(spname.innerText==""&&sppsw1.innerText==""&&sppsw2.innerText==""&&spemail.innerText==""){
							//获取表单对象
							var userform=document.getElementById("userform");
							userform.submit();
						}
					}
				}
			</script>
		<!-- http://localhost:8080/jd/save -->
		<form action="#" method="get" id="userform">
			
			<div class="box">
				<table >
					<tr>
						<td>用户名:</td>
						<td><input type="text" name="name" id="name" /></td>
						<td><span id="spname"></span></td>
					</tr>
					<tr>
						<td>密码:</td>
						<td><input type="text" name="psw1" id="psw1"  /></td>
						<td><span id="sppsw1"></span></td>
					</tr>
					<tr>
						<td>确认密码:</td>
						<td><input type="text" name="psw2" id="psw2" /></td>
						<td><span id="sppsw2"></span></td>
					</tr>
					<tr>
						<td>邮箱:</td>
						<td><input type="text" name="email" id="email"/></td>
						<td><span id="spemail"></span></td>
					</tr>
				</table>
				<input type="button" value="注册" id="btnsubmit"/>
				<input type="reset" value="重置" />
			</div>
			
		</form>
		
	</body>
</html>

一个简单的表单提交，用到from的submit属性提交

qq_54472968

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web前端学习-1（表单提交-HTML）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 500px; height: 150px; background: #29ffe6; box-shadow: 0px 0px 8px 5px #19afff; .
复制链接

扫一扫