简单制作会员注册页面，实现简单交互验证——2018年4月16日 - 课程作业

Home > List of blog posts > 简单制作会员注册页面，实现简单交互验证——2018年4月16日

Blogger Information

Blog 48

fans 3

comment 1

visits 37300

Special Recommendation

More>

Related recommendations

html实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
				background-color: #00BFFF;
				color: #fff;
			}
			.bg{
				background-color: burlywood;
				width: 100%;
				
			}
			.top{
				
				width: 100%;
				height: 120px;
				background-color: lightblue;
				text-align: center;
			}
			.top span{
				font-size: 4em;
				color: darksalmon;
				font-weight: bold;
				line-height: 120px;
			}
			.mian{
				width: 1000px;
				margin: 50px auto;
				border: 1px solid #ADD8E6;
				border-radius: 10px;
				box-shadow: 5px 5px 20px #000;
				/*background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523956011282&di=a74c1c804094c7586a6e884339a46756&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fblog%2F201403%2F07%2F20140307192833_NxhcU.thumb.700_0.jpeg');*/
			}
			.reg_table{
				width: 90%;
				margin: auto;
				text-align: center;
				
			}
			.reg_table table{
				padding: 20px;
				margin: auto;
				text-align: center;
				
			}
			.reg_table table tr{
				line-height: 50px;
			}
			.reg_table table td:first-child{
				width: 80px;
			}
			.reg_table table td:nth-child(2){
				
				text-align: left;
			}
			
			
			.reg_table table #username,#password1,#password2,#age{
				width: 250px;
				height: 30px;
				text-align: center;
			}
			.reg_table textarea{
				resize: none;
			}
			.reg_table button{
				width: 250px;
				height: 40px;
				border: none;
				background-color: coral;
				color: #FFf;
				font-weight: bold;
				font-family: "微软雅黑";
				cursor: pointer;
				border-radius: 10px;
			}
			.reg_table button:hover{
				background-color: crimson;
			}
		</style>
	</head>
	<body>
		
		<div class="bg">
			<div class="top"><span>顶部导航</span></div>
			<div class="mian">
				<div class="reg_table">
				<form id="reg">
					<h2>会员注册</h2>
					<hr />
					<table border="0" cellspacing="0" cellpadding="5">
						<tr>
							<td><label for="username">用户账号：</label></td>
							<td><input type="text" name='username' id='username' placeholder="请输入用户账号" autofocus=""></td>
							
						</tr>
						<tr>
							<td><label for="password1">账号密码：</label></td>
							<td><input type="password" name='password1' id='password1' placeholder="请输入用户密码"></td>
						</tr>
						<tr>
							<td><label for="password2">重复密码：</label></td>
							<td><input type="password" name='password2' id='password2'  placeholder="请重复输入密码"></td>
						</tr>
						<tr>
							<td><label for="">用户性别：</label></td>
							<td><input type="radio" name="gender" id="boy" value="boy" >男
								<input type="radio" name="gender" id="girl" value="girl" >女
								<input type="radio" name="gender" id="secret" value="secret" checked="">保密
							</td>
						</tr>
						<tr>
							<td><label for="">个人兴趣：</label></td>
							<td><input type="checkbox" name="hobby[]" id="basketball" value="basketball" /><label for="basketball">篮球</label>
								<input type="checkbox" name="hobby[]" id="read" value="read" /><label for="read">读书</label>
								<input type="checkbox" name="hobby[]" id="movie" value="movie" /><label for="movie">电影</label>
								<input type="checkbox" name="hobby[]" id="others" value="others" checked=""/><label for="others">其他</label>
							</td>
						</tr>
						<tr>
							<td><label for="">用户年龄：</label></td>
							<td><select name="age" id="age">
								<option value="15">小于15岁</option>
								<option value="20">小于20岁</option>
								<option value="25">小于25岁</option>
								<option value="30">小于30岁</option>
							</select></td>
						</tr>
						<tr>
							<td><label for="">个性签名：</label></td>
							<td colspan="2"><textarea name="signature" id="signature" rows="8" cols="50"  placeholder="请简单描述您的个人状况"></textarea></td>
						</tr>
						<tr>
							<td colspan="2" style="text-align:center"><button name='submit' id='submit' value="submit">注册提交</button></td>
						</tr>
					</table>
				</form>
			</div>
			</div>
			
		</div>
	</body>
</html>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
	
	//账号编辑框激活状态移出事件
	$('#username').blur(function(){
		var username = $('#username').val()
		//POST提交验证用户名
		$.post('core/reg_check.php?check=username','username='+username,function(data){
			//根据返回状态码在用户名输入框后添加span元素，即提示信息
			switch(data.status){
				case 0:
				//状态码返回0
				
				$('td').find('span').remove()//移除span标签
				//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为红色，并使输入框激活
				$('#username').after('<span>').next().text('*'+data.msg).css('color','#ff0000').prev().focus()
				break
				case 1:
				//状态码返回1
				$('td').find('span').remove()//移除span标签
				//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为红色，并使输入框激活
				$('#username').after('<span>').next().text('*'+data.msg).css('color','#ff0000').prev().focus()
				break
				case 2:
				//状态码返回2
				$('td').find('span').remove()//移除span标签
				//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为绿色，并使输入框激活
				$('#username').after('<span>').next().text('*'+data.msg).css('color','#12a900')
				break
			}
		},'json')
	})
		//密码编辑框激活状态移出事件
	$('#password1').blur(function(){
		if($('#username').val().length==0){
			return false
		}
		var password1= $('#password1').val()
		//POST提交验证密码
		$.post('core/reg_check.php?check=password1','password1='+password1,function(data){
			//根据返回状态码在密码输入框后添加span元素，即提示信息
			switch(data.status){
				case 0:
				//状态码返回0
				$('td').find('span').remove()//移除span标签
				//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为红色，并使输入框激活
				$('#password1').after('<span>').next().text('*'+data.msg).css('color','#ff0000').prev().focus()
				break
				case 1:
				//状态码返回1
				$('td').find('span').remove()//移除span标签
				//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为红色，并使输入框激活
				$('#password1').after('<span>').next().text('*'+data.msg).css('color','#ff0000').prev().focus()
				break
				
			}
		},'json')
	})
	
		//重复密码编辑框激活状态移出事件
	$('#password2').blur(function(){
		if($('#username').val().length==0 || $('#password1').val().length<6){
			return false
		}
		
		//POST提交验证重复密码
		$.post('core/reg_check.php?check=password2',{password1:$('#password1').val(),password2:$('#password2').val()},function(data){
			//根据返回状态码在重复密码输入框后添加span元素，即提示信息
			switch(data.status){
				case 0:
				//状态码返回0
				$('td').find('span').remove()//移除span标签
				//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为红色，并使输入框激活
				$('#password2').after('<span>').next().text('*'+data.msg).css('color','#ff0000').prev().focus()
				break
				case 1:
				//状态码返回1
				$('td').find('span').remove()//移除span标签
				//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为红色
				$('#password2').after('<span>').next().text('*'+data.msg).css('color','#ff0000')
				//第二次重复密码设置第一次的密码输入框激活
				$('#password1').focus()
				break
				case 2:
				//状态码返回2
				$('td').find('span').remove()//移除span标签
				//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为绿色
				$('#password2').after('<span>').next().text('*'+data.msg).css('color','#12a900')
				break
			}
		},'json')
	})
		
	//个人简介文本域激活状态移出事件	
	$('#signature').blur(function(){
		
		if ($('#username').val().length==0 || $('#password1').val().length==0 || $('#password2').val().length==0) {
			return false
		}
		
		//POST提交验证个人简介
		$.post('core/reg_check.php?check=signature','signature='+$('#signature').val(),function(data){
			//根据返回状态码在个人简介文本域后添加span元素，即提示信息
			switch(data.status){
				case 0:
				//状态码返回0
				$('td').find('span').remove()//移除span标签
				//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为红色，并使输入框激活
				$('#signature').after('<span>').next().text('*'+data.msg).css('color','#ff0000').prev().focus()
				break
				case 1:
				//状态码返回1
				$('td').find('span').remove()//移除span标签
				//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为红色，并使输入框激活
				$('#signature').after('<span>').next().text('*'+data.msg).css('color','#ff0000').prev().focus()
				break
				
				case 2:
				//状态码返回1
				$('td').find('span').remove()//移除span标签
				//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为红色，并使输入框激活
				$('#signature').after('<span>').next().text(data.msg).css('color','#12a900')
				break
			}
		},'json')
		
	})
	
	//注册按钮点击事件
	$('#submit').click(function(){
		//POST提交注册数据
		$.post('core/reg_check.php?check=submit',$('#reg').serialize(),function(data){
			$('td').find('span').remove()//移除span标签
			alert(data) //返回注册提交后的成功信息
			
		},'text')
	})
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<?php

switch ($_GET['check']) //判断获得的get提交的check的值
	{
	case 'username':
		$username = $_POST['username']; //将post取得的username值设为变量
		if(empty($username)){//判断是否为空
			exit(json_encode(['status'=>0,'msg'=>'用户名不得为空']));//输出json格式的状态和提示信息
		}else if(in_array($username, ['admin','admin888','maozedong','123456'])){
			exit(json_encode(['status'=>1,'msg'=>'用户名禁止使用']));//输出json格式的状态和提示信息
		}else{
			echo json_encode(['status'=>2,'msg'=>'用户名可用']);//输出json格式的状态和提示信息
		}
		break;
	case 'password1':
		$password1 = $_POST['password1'];
		if(empty($password1)){
			exit(json_encode(['status'=>0,'msg'=>'用户密码不得为空']));//输出json格式的状态和提示信息
		}else if(strlen($password1)<6){
			exit(json_encode(['status'=>1,'msg'=>'密码长度不得小于6']));//输出json格式的状态和提示信息
		}
	
		break;
	case 'password2':
		$password1 = $_POST['password1'];
		$password2 = $_POST['password2'];
		
		if(empty($password2)){
			exit(json_encode(['status'=>0,'msg'=>'重复密码不得为空']));//输出json格式的状态和提示信息
		}else if($password2 != $password1){//将2个密码值做比较。
			exit(json_encode(['status'=>1,'msg'=>'重复密码输入不正确']));//输出json格式的状态和提示信息
		}else if($password2 == $password1){
			echo json_encode(['status'=>2,'msg'=>'重复输入验证成功']);//输出json格式的状态和提示信息
		}
		break;
	case 'signature':
		$signature = $_POST['signature'];
		if(empty($signature)){
			exit(json_encode(['status'=>0,'msg'=>'个人简介不得为空']));//输出json格式的状态和提示信息
		}else if(strlen($signature)<20){
			exit(json_encode(['status'=>1,'msg'=>'简介不得少于20字']));//输出json格式的状态和提示信息
		}else{
			exit(json_encode(['status'=>2,'msg'=>'']));
		}
		break;
	case 'submit':
		exit('注册成功');
		break;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结：

1、代码里的括号和分号一定要注意，一不小心就忘记或位置错误。

2、给元素设置name和id时一定不要搞错，后面我写JS代码搞错了个字母，结果查错好久。

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

首页排版练习0326

2018-03-26 23:56:42

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

html实例

实例

总结：