web前端开发-注册表

呆呆小板栗

已于 2024-03-15 20:02:43 修改

阅读量443

点赞数 7

分类专栏：大数据 web前端开发 web 文章标签：前端 web前端大数据

于 2024-03-15 16:57:46 首次发布

本文链接：https://blog.csdn.net/m0_74394367/article/details/136744644

版权

大数据同时被 3 个专栏收录

57 篇文章 2 订阅

订阅专栏

web前端开发

8 篇文章 0 订阅

订阅专栏

web

5 篇文章 0 订阅

订阅专栏

web前端开发-注册表

代码

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="divCss">
			  <form action="" method=" ">
				 <h3 style="text-align: center;width: 60%;">注 册 表</h3>
				  <p>
					<label>姓名：</label>
					<input type="text" name="username" id="name" class = "inputCSS  required"/>
				  </p>
				  <p>
					<label>密码：</label>
					<input type="password" name="password" id="pass" class = "inputCSS  required"/>
				  </p>
				  <p>
					<label>性别：</label>
					<label><input type="radio" name="gender" value="0" checked="checked"/> 男</label>
					<label><input type="radio" name="gender" value="1" /> 女</label>
				  </p>
				  <p>
					<label>爱好：</label>
					<label><input type="checkbox" name="like" value="sing" checked /> 唱歌</label>
					<label><input type="checkbox" name="like" value="run" /> 跑步</label>
					<label><input type="checkbox" name="like" value="swiming" checked /> 游泳</label>
				  </p>
				  <p>
					<label>照片：</label>
					<input type="file" name="person_pic"  id="person_pic">
				  </p>
				   <p>
					<label  for="email">电子邮箱：</label>
					<input type="email" name="email"  id="email" class = "inputCSS  required">
				  </p>
					<p>
					<label  for="date">出生日期：</label>
					<input type="date" name="data"  id="data" class = "inputCSS  required">
				  </p>
				   <label>学历：</label>
					  <select name="site">
						 <optgroup label="研究生">
								<option value="bs">博士</option>
								<option value="bs">硕士</option>
						</optgroup>
						<optgroup label="大学">
								<option value="bs" selected>本科</option>
								<option value="bs">专科</option>
						</optgroup>
						<optgroup label="其它">
								<option value="bs">自考</option>
								<option value="bs">高中</option>
						</optgroup>
					  </select>
				  </p>
				  <p>
					<label>个人描述：</label><br />
					<textarea name="about"></textarea>
				  </p>
				  <p>
				 
				  <p>
					<input type="submit" name="btn" value="提交" class="btnCSS">
					<input type="reset" name="btn" value="重置" class="btnCSS">
				 </p>
				 <p class="formImg" ><img src="img/person.jpg" width="300px" id="myImg"/></p>
			</form>
		</div>
	</body>
<script type="text/javascript">
	//上传图片，使用原生js代码
	var file = document.getElementById('person_pic');          
	file.onchange=function(){
		var re=new FileReader();
		console.log(file.files[0]);
		re.readAsDataURL(file.files[0]);
		re.onload = function(re){
			var inpic = document.getElementById('myImg')
			inpic.src = re.target.result
		}
	}
</script>
</html>

index.css

#right{
	width: 33%;
	height: 600px;
	/* border: 1px solid lightpink; */
	background: white;
	float: right;
}

#divCss{
	line-height: 25px;
	padding: 10px;
	background:#e5f9ff;
	width: 600px;
	margin: auto;
	border: 1px solid gray;
}
#divCss p{
	margin: 10px;
}
#divCss label{
	padding-left: 10px;
	width: 30px;
}
#divCss  .inputCSS{
	width: 200px;
	height: 30px;
	border: 1px solid darkred;
}
form{
	position: relative;
}
.formImg{
	position: absolute;
	top:1px;
	right: 10px;
}
.formImg img{
	width: 120px;
	height: 160px;
	border: 3px solid gray;
}

#divCss  textarea{
	width: 580px;
	height: 100px;
}
.btnCSS{
	width: 80px;
	height: 40px;
	padding: 10px;
	background: lightskyblue;
}

/*验证用样式*/
 .high{ color: red; }
 .msg{ font-size: 13px;  position: relative; z-index: 999;}
 .onError{ color: red; }
 .onSuccess{ color: green; }

index.js

$(function(){
	// alert(123)
	//空格为后代，为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
	$("form :input.required").each(function(){
		var req = $("<strong class='high'>*</strong>")
		//添加到this对象的父级对象下
		$(this).parent().append(req)
	})
	//为表单元素添加失去焦点事件
	$("form :input").blur(function(){
		// alert(123)
		var $parent = $(this).parent()
		if(($parent.has("span").length>0)){
			$parent.find("span").remove()
		}
		//验证姓名: is()函数用于判断当前jQuery对象所匹配的元素是否符合指定的表达式
		//只要其中有至少一个元素符合该表达式就返回true，否则返回false
		if($(this).is("#name") || $(this).is("#pass")){
			// alert(123)  //.trim(去掉前后空格)
			var namevalue = $.trim(this.value)
			if(namevalue=="" || namevalue.length<6){
				var errorMsg = "非空，长度6位以上"
				$parent.append("<span class='msg onError',style='position:absolute'>" + errorMsg + "</span>")
				$(this).focus()//放置焦点
			}else{
				var okMsg = "输入正确"
				$parent.find(".high").remove()
				$parent.append("<span class='msg onError',style='position:absolute'>" + okMsg + "</span>")
			}
		}
		// 验证邮箱
		if($(this).is("#email")){
			var emailvalue=$.trim(this.value)
			// alert(emailvalue)
			var regEmail=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/ //正则表达式
			// 如果邮箱为空。或者非空，并且未通过正则表达式校验
			if(emailvalue=="" || (emailvalue!="" && !regEmail.test(emailvalue))){
				var errorMsg="请输入正确的邮箱格式";
				$parent.append("<span class='msg onError' style='position:absolute'>"+errorMsg+"</span>")
			}else{
				var okMsg="输入正确"
				$parent.find(".high").remove()
				$parent.append("<span class='msg onSuccess' style='position:absolute'>"+okMsg+"</span>")
			}
		}
	})
	// 重置密码
	$(":reset").click(function(){
		$(this).parent().siblings().find("span").remove()
	})
})

注意：需引入jquery.min.js