登录  /  注册
博主信息
博文 46
粉丝 3
评论 1
访问量 32092
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
416运用PHP验证表单
吃不起土的少年的博客
原创
654人浏览过

实例

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册页面</title>
	<style type="text/css">
	html, body, div, h1, h2, h3, h4, h5, h6, p, span, img, input {
	margin: 0;
	padding: 0;
    }

    html, body {
	font-size: 16px;
	font-family: 'Verdana','Arial';
	color: rgba(0,0,0,0.8);
    }
	body{
		background-image: url(../images/8.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
	}
	.contain{
		width: 800px;
		height: 500px;
		margin: auto;
		margin-top:120px; 
		border-radius: 8px;
	    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
	    overflow: hidden;
	    
	    padding: 30px;
	    box-sizing: border-box;
		/*background-color: white;*/
	}
	.contain::after {
	content: '';
	position: absolute;
    width: 830px;
	/*height: 500px;*/
	top: 0;
	
	bottom: 0;
	/*-webkit-filter: blur(15px);
	-moz-filter: blur(15px);
	-ms-filter: blur(15px);
	-o-filter: blur(15px);
	filter: blur(15px);*/
	z-index: -2;
	margin: -40px;
	background-image: url(../images/8.jpg);
	background-position: center top;
	background-size: cover;
	background-attachment: fixed;
    }
	.remind{

		color:grey;
		font-style: italic;
		font-size: 0.8em;
	}
	table{
		
	    

	}
	/*tr:nth-child(1){
		width: 400px;
	}*/
	
	input{
		box-shadow: 1px 1px 1px #888;
		background-color: #ffffcc;

	}
	button{
		float: left;
		margin-left: 340px;
		margin-top: 50px;
		color: white;
		background-color: lightskyblue;
	}
	button:hover{
		background-color: orange;
		color: #f4f4f4;
	}
	textarea{
		resize: none;
		background-color: #ffffcc;
	}
	/*修改placeholder的字体颜色*/
    input::-webkit-input-placeholder { /* WebKit browsers */ 
         color: grey; 
         font-style: italic;
         
    } 
    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
         color: grey; 
         font-style: italic;
       
    } 
    input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
         color: grey;
         font-style: italic; 
         
    } 
    input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
         color: grey; 
         font-style: italic;
         
    } 
    /*修改textarea中的placeholder的字体*/
    textarea::-webkit-input-placeholder { /* WebKit browsers */ 
         color: grey; 
         font-style: italic;
         
    } 
    textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
         color: grey; 
         font-style: italic;
       
    } 
    textarea::-moz-placeholder { /* Mozilla Firefox 19+ */ 
         color: grey;
         font-style: italic; 
         
    } 
    textarea:-ms-input-placeholder { /* Internet Explorer 10+ */ 
         color: grey; 
         font-style: italic;
         
    } 
   
	</style>
</head>
<body>
<div class="box">

<div class="contain">
<table cellpadding="5">
<caption style="color:black;font-size: 1.5em;font-style: ">注册</caption>
<tr>
	<td><label for="username">用户名:</label></td>
	<td width="400"><input type="text" name="username" id="username" placeholder="例:Kimjin"><span></span></td>
	<td><span  class="remind" id="re1">*用户名不得少于6个字符</span></td>
</tr>
<tr>
	<td><label for="password">密码:</label></td>
	<td><input type="password" name="password" id="password"><span></span></td>
	<td><span class="remind">*密码至少为6位,最好有大小写加数字</span></td>
	
</tr>
<tr>
	<td><label for="password1">确认密码:</label></td>
	<td><input type="password" name="password1" id="password1"></td>
	
</tr>
<tr>
	<td><label for="email">Email:</label></td>
	<td><input type="text" name="email" id="email" placeholder="kim_jinx@foxmail.com"></td>
	
</tr>
<tr>
	<td><label for="secret">性别:</label></td>
	<td><input type="radio" name="gender" id="male" value="male"><label for="male">男</label>
	<input type="radio" name="gender" id="female" value="female"><label for="female">女</label>
	<input type="radio" name="gender" id="secret" value="secret" checked=""><label for="secret" >保密</label>
	</td>
	
</tr>
<tr>

	<td><label>爱好:</label></td>
	<td><input type="checkbox" name="hobby[]" id="photography" value="摄影" checked=""><label for="photography">摄影</label>
	<input type="checkbox" name="hobby[]" id="travel" value="旅行" ><label for="travel">旅行</label>	
	<input type="checkbox" name="hobby[]" id="music" value="听歌" ><label for="musice">听歌</label>	
	<input type="checkbox" name="hobby[]" id="movie" value="看电影" ><label for="movie">看电影</label>	
	<input type="checkbox" name="hobby[]" id="writing" value="写作" ><label for="writing">写作</label>		
	</td>
	
</tr>
<tr>
	<td valign="middle"><label for="info">个人简介</label></td>
	<td><textarea  name="info" id="info" rows="3" cols="30" placeholder="不得少于10个字符"></textarea><span></span>
	</td>

</tr>
<tr>
	<td colspan="3" align="center">
	<button  type="submit" value="submit" id="register" name="register">注册</button>
	</td>
</tr>
</table>
</div>

</div>
	
	<script type="text/javascript" src="../jQuery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
	//用户名验证
	$('#username').blur(function(){
      $.post('check.php?check=username',
      	    'username='+$('#username').val(),
      	    function(data){
      	    	switch(data.status){
      	    		case 0:

      	    		$('#username').next().remove()
      	    		$('#username').after('<span>').next().text(data.msg).css(
      	    			{"color":"red","font-size":"0.8em","font-style":"italic"});//.prev().focus();
      	    		break;
      	    		case 1:

      	    		$('#username').next().remove()
      	    		$('#username').after('<span>').next().text(data.msg).css(
      	    			{"color":"red","font-size":"0.8em","font-style":"italic"});//.prev().focus();
      	    		break;
      	    		case 2:

      	    		$('#username').next().remove()
      	    		$('#username').after('<span>').next().text(data.msg).css(
      	    			{"color":"red","font-size":"0.8em","font-style":"italic"});//.prev().focus();
      	    		break;
      	    		case 3:

      	    		$('#username').next().remove()
      	    		$('#username').after('<span>').next().text(data.msg).css(
      	    			{"color":"green","font-size":"0.8em","font-style":"italic"});
      	    		break;
      	    	}

      	    },'json')
      	
	})
	//密码验证

	$('#password').blur(function(){
		// if ($('#username').val().length == 0) {
		// 		return false
		// 	}
      $.post('check.php?check=password',
      	    'password='+$('#password').val(),
      	    function(data){
      	    	switch(data.status){
      	    		case 0:

      	    		$('#password').next().remove()
      	    		$('#password').after('<span>').next().text(data.msg).css(
      	    			{"color":"red","font-size":"0.8em","font-style":"italic"});//.prev().focus();
      	    		break;
      	    		case 1:

      	    		$('#password').next().remove()
      	    		$('#password').after('<span>').next().text(data.msg).css(
      	    			{"color":"red","font-size":"0.8em","font-style":"italic"});//.prev().focus();
      	    		break;
      	    		case 2:

      	    		$('#password').next().remove()
      	    		$('#password').after('<span>').next().text(data.msg).css(
      	    			{"color":"green","font-size":"0.8em","font-style":"italic"});
      	    		break;
      	    		
      	    	}

      	    },'json')
      	
	})
	//确认密码
	$('#password1').blur(function(){
		// if ($('#username').val().length == 0) {
		// 		return false
		// 	}
      $.post('check.php?check=password1',{
      	    password:$('#password').val(),
      	    password1:$('#password1').val()
      	},
      	    function(data){
      	    	switch(data.status){
      	    		case 0:

      	    		$('#password1').next().remove()
      	    		$('#password1').after('<span>').next().text(data.msg).css(
      	    			{"color":"red","font-size":"0.8em","font-style":"italic"});//.prev().focus();
      	    		break;
      	    		case 1:

      	    		$('#password1').next().remove()
      	    		$('#password1').after('<span>').next().text(data.msg).css(
      	    			{"color":"red","font-size":"0.8em","font-style":"italic"});//.prev().focus();
      	    		break;
      	    		case 2:

      	    		$('#password1').next().remove()
      	    		$('#password1').after('<span>').next().text(data.msg).css(
      	    			{"color":"green","font-size":"0.8em","font-style":"italic"});
      	    		break;
      	    		
      	    	}

      	    },'json')
      	
	})
	//邮箱验证
	$('#email').blur(function(){
		// if ($('#username').val().length == 0) {
		// 		return false
		// 	}
      $.post('check.php?check=email',
      	    'email='+$('#email').val(),
      	    function(data){
      	    	switch(data.status){
      	    		case 0:

      	    		$('#email').next().remove()
      	    		$('#email').after('<span>').next().text(data.msg).css(
      	    			{"color":"red","font-size":"0.8em","font-style":"italic"})//.prev().focus();
      	    		break;
      	    		case 1:

      	    		$('#email').next().remove()
      	    		$('#email').after('<span>').next().text(data.msg).css(
      	    			{"color":"red","font-size":"0.8em","font-style":"italic"})//.prev().focus();
      	    		break;
      	    		case 2:

      	    		$('#email').next().remove()
      	    		$('#email').after('<span>').next().text(data.msg).css(
      	    			{"color":"green","font-size":"0.8em","font-style":"italic"});
      	    		break;
      	    		
      	    	}

      	    },'json')
      	
	})
     $('#info').blur(function(){
			// if ($('#username').val().length == 0) {
			// 	return false
			// }
			$.post('check.php?check=info','info='+$('#info').val(),function(data){
				switch(data.status){
				case 0:
				$('#info').next().remove()
				$('#info').after('<span>').next().text(data.msg).css(
      	    			{"color":"red","font-size":"0.68em","font-style":"italic"})//.prev().focus();
				break;
				case 1:
				$('#info').next().remove()
				$('#info').after('<span>').next().text(data.msg).css(
      	    			{"color":"red","font-size":"0.68em","font-style":"italic"})//.prev().focus();
				break;
				case 2:
				$('#info').next().remove()
				$('#info').after('<span>').next().text(data.msg).css(
      	    			{"color":"green","font-size":"0.68em","font-style":"italic"});
				break;
				}
			},'json')
		})
	</script>
</body>
</html>

运行实例 »

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

运行实例 »

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

php部分代码

实例

<?php
 switch ($_GET['check']) {
 	case 'username':
 		$username = $_POST['username'];
 		if (empty($username)) {
 			exit(json_encode(['status'=>0,'msg'=>'*用户名不能为空']));
 			# code...
 		}else if (in_array($username,['kimjinx','jinchao1993'])){

 			exit(json_encode(['status'=>1,'msg'=>'*该用户名已被注册']));

 		}else if (strlen($username) < 6 ){
 			exit(json_encode(['status'=>2,'msg'=>'*用户名小于6个字符']));
 		}else{
 			exit(json_encode(['status'=>3,'msg'=>'*用户名可用']));
 		}
 		break;
 	case 'password':
 	$password=$_POST['password'];
 		if (empty($password)) {
 			exit(json_encode(['status'=>0,'msg'=>'*密码不能为空']));
 			# code...
 		}else if (strlen($password) < 6 ){
 			exit(json_encode(['status'=>1,'msg'=>'*密码过于简单']));
 		}else{
 			echo json_encode(['status'=>2,'msg'=>'*密码可用']);
 		}# code...
 		break;
 	case 'password1':
 		$password=$_POST['password'];
 		$password1=$_POST['password1'];
 		if (empty($password1)) {
 			exit(json_encode(['status'=>0,'msg'=>'*不能为空']));

 		}elseif ($password!=$password1) {
 			exit(json_encode(['status'=>1,'msg'=>'*俩次输入密码不同']));

 		}else{
 			exit(json_encode(['status'=>2,'msg'=>'*验证通过']));
 		}
 		break;
 	case 'email':
 		$email=$_POST['email'];
 		if (empty($email)) {
 			exit(json_encode(['status'=>0,'msg'=>'*请输入邮箱']));

 		}else if (in_array($email,['501720919@qq.com','kim_jinx@foxmail.com'])){
 			exit(json_encode(['status'=>1,'msg'=>'*该邮箱已被注册']));

 		}else{
 			exit(json_encode(['status'=>2,'msg'=>'*验证验证通过']));
 		}

 		break;
 	case 'info':
 	    $info=$_POST['info'];
 	    if (empty($info)) {
 	    	exit(json_encode(['status'=>0,'msg'=>'*自我简介不能为空']));# code...
 	    }else if(strlen($info) < 10 ){
 	    	exit(json_encode(['status'=>1,'msg'=>'*多写一点']));
 	    }else{
 	    	exit(json_encode(['status'=>2,'msg'=>'*ok!']));
 	    }
 	default:
 		# code...
 		break;
 }

运行实例 »

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

初始注册界面

微信图片_20180417163626.png

输入错误信息后

微信图片_20180417163639.png

验证成功

微信图片_20180417163643.png

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学