欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

创建云笔记项目注册页面

程序员文章站 2024-02-26 13:36:16
...

云笔记项目注册页面
效果图
创建云笔记项目注册页面
HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>云笔记后台管理系统</title>

<meta name="viewport" content="width=device-width, initial-scale=1">


<!--可无视-->
<link rel="stylesheet" href="./css/bootstrap.min.css">

<!--主要样式-->
<link type="text/css" href="./css/style2.css" rel="stylesheet">

<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/register.js"></script>


</head>
<body>

<div class="container" align="center">
	<div class="col-md-6" style="margin-top: 8%;">
		<div class="inset">
		<div>
		<input type="hidden" name="enews" value="login">
				<div class="mydiv">
					<h2>云笔记用户注册</h2>
					<span style="text-align: left;text-indent: 0.4em;"><label>用户名</label></span>
					<span><input type="text" id="username" name="username" class="textbox"></span>
				
				<div>
					<span style="text-align: left;text-indent: 0.4em;"><label>密码</label></span>
					<span><input name="password" id="password" type="password" class="password"></span>
				</div>
				<div>
					<span style="text-align: left;text-indent: 0.4em;"><label>确认密码</label></span>
					<span><input name="repassword" id="repassword" type="password" class="password"></span>
				</div>
				<div>
					<span style="text-align: left;text-indent: 0.4em;"><label>姓名</label></span>
					<span><input name="name" id="name" type="text" class="textbox"></span>
				</div>
				<div>
					<span style="text-align: left;text-indent: 0.4em;"><label>年龄</label></span>
					<span><input name="age" id="age" type="text" class="textbox"></span>
				</div>
				<div class="sign">
					<input type="reset"  class="submit" id="reset" value="重置">
					<input type="button" value="注册" class="submit" id="submit">
				</div>
				</div>
		</div>
			
		</div>
	</div>
</div>




</body>
</html>

js


$(function(){
	$('#reset').click(function(){
		$('#username').val('');
		$('#password').val('');
		$('#repassword').val('');
		$('#name').val('');
		$('#age').val('');
	})


 $('#submit').click(function(){
		 if($('#username').val()==''){
			 alert('用户名不能为空');
			 $('#username').focus();
			 return ;
		 }
		 else if($('#password').val()==''){
			 alert('密码不能为空');
			 $('#password').focus();
			 return ;
		 }
		 else if($('#repassword').val()==''){
			 alert('确认密码不能为空');
			 $('#repassword').focus();
			 return ;
		 }
		 else if($('#name').val()==''){
			 alert('姓名不能为空');
			 $('#name').focus();
			 return ;
		 }
		 else if($('#age').val()==''){
			 alert('年龄不能为空');
			 $('#age').focus();
			 return ;
		 
		 }
		 if($('#password').val()!=$('#repassword').val()){
			 alert('密码与确认密码不一致');
			 $('#repassword').focus();
			 return;
		 }
		 /*/^(?:[1-9][0-9]?|1[01][0-9]|120)$/*///年龄是1-120之间有效
	var reg=/^(1[89]|[2-8][0-9]|90)$/;//年龄18-90
		if(reg.test($('#age').val())){
			alert('ok');
			}else{
				alert('输入年龄不合法,请输入18-90');
				$('#age').focus();
				return ;
			}
		
		
		 
		var sendData={"username":$('#username').val(),"password":$('#password').val(),"name":$('#name').val(),"age":$('#age').val()};
		$.ajax({
			type:"post",
			url:"user/register.do",
			data:sendData,
			datatype:"json",
			success:function(msg){
				
				//console.log(msg);
				if(msg.state==1){
					
					alert(msg.message);
				}else{
					alert(msg.message);
				}
				
			},
			error:function(msg){
				alert("通信失败");
			}
		});
	}) 
	 
	 
	 
});

css与登录页面一致

上一篇： Git Bash中的复制与粘贴

下一篇： Git Bash中的复制与粘贴

推荐阅读