![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/layer/2.1/layer.js" type="text/javascript" charset="utf-8"></script>
<title>玩家注册页面</title>
<style type="text/css">
{
margin: 0;
padding: 0;
}
body {
background: url(https://gss1.bdstatic.com/5bVXsj_p_tVS5dKfpU_Y_D3/data/d2af0e8da1e046c3146ac412826653a2)no-repeat center top;
}
div.wrap{
margin-top:370px;
}
div.container {
width: 500px;
min-height:500px;
box-shadow: 3px 3px 1px #4C4C4C;
background-color: rgba(29,34,44,0.3);
border-radius:2% ;
color: white;
text-align: center;
margin: 200px auto;
}
.container p {
padding: 10px;
}
.container input,textarea {
background-color: rgba(29,34,44,0.5);
border: none;
color: white;
font-size: 1.1em;
}
#userID,#user,#email,#pwd1,#pwd2 {
width: 420px;
height: 30px;
}
a {
text-decoration: none;
color:deepskyblue;
font-weight: bolder;
}
a:hover {
color:darkblue;
}
textarea {
resize: none;
}
#submit,#Wecharlogin,#QQlogin {
width: 420px;
height: 30px;
background-color: deepskyblue;
border-radius: 6px;
}
#QQlogin:hover,#submit:hover {
background: skyblue;
cursor: pointer;
font-size: 1.2em;
}
#header {
margin: 20px auto;
padding-top:20px ;
}
#Wecharlogin {
background: green;
}
#Wecharlogin:hover {
cursor: pointer;
font-size: 1.2em;
background: greenyellow;
}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<div id="header">
<h1>创建账号</h1>
</div>
<div class="main">
<form action="check.php" method="post">
<p><input type="text" name="userID" id="userID" value=""placeholder="请输入身份证号码" autofocus="autofocus" /></br></p>
<p> <input type="text" name="user" id="user" value="" placeholder="用户姓名" /></br></p>
<p><input type="email" name="email" id="email" value="" placeholder="请输入邮箱账号"/></br></p>
<p><input type="password" name="pwd1" id="pwd1" value="" placeholder="请输入密码"/></br></p>
<p><input type="password" name="pwd2" id="pwd2" value="" placeholder="请确认密码"/></br></p>
<p><input type="checkbox" name="agreed" id="agreed" value="" checked="checked" /><label for="agreed">我同意该<a href="#">隐私政策</a>中的各项条款,点击注册即表示同意该政策</label></p>
<p><input type="submit" value="提交注册"id="submit"/><br></p>
<p><input type="button" id="Wecharlogin" value="微信登陆" /></p>
<p><input type="button" id="QQlogin" value="QQ登陆" /></p>
<p><textarea name="" rows="5" cols="60" placeholder="对我们网站的意见或者留言"></textarea></p>
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function(){
// 1. 验证身份证id
//添加失去焦点事件
$('#userID').blur(function(){
var url ="check2.php?check=userID"
var data = 'userID='+$('#userID').val()
var success =function(res){
console.log(res)
switch (res.status){
case '0':
layer.msg(res.msg);
$('#userID').focus()
break;
case '1':
layer.msg(res.msg);
$('#userID').focus()
break;
case '2':
layer.msg(res.msg);
break;
case '3':
layer.msg(res.msg);
$('#userID').focus()
break;
}
}
$.post(url,data,success,'json')
})
//2.验证用户名
$('#user').blur(function(){
if($('#userID').val().length==0||$('#userID').val().length!=18){
return false
}
$.post("check2.php?check=user",'user='+$('#user').val(),function(res){
console.log(res)
switch (res.status){
case '1':
layer.msg(res.msg);
$('#user').focus()
break;
case '2':
layer.msg(res.msg);
$('#user')
break;
case '3':
layer.msg(res.msg);
$('#user').focus()
break;
}
} ,'json')
})
//3.验证邮箱
$('#email').blur(function(){
if($('#user').val().length==0||!isNaN($('#user').val())){
return false
}
$.post("check2.php?check=email",'email='+$('#email').val(),function(res){
console.log(res)
switch (res.status){
case '1':
layer.msg(res.msg);
$('#email').focus()
break;
case '2':
layer.msg(res.msg);
$('#email')
break;
case '3':
layer.msg(res.msg);
$('#email').focus()
break;
case '4':
layer.msg(res.msg);
$('#email').focus()
break;
}
} ,'json')
})
//4.验证密码
$('#pwd1').blur(function(){
if($('#email').val().length==0||!isNaN($('#email').val())){
return false
}
$.post("check2.php?check=pwd1",'pwd1='+$('#pwd1').val(),function(res){
console.log(res)
switch (res.status){
case '1':
layer.msg(res.msg);
$('#pwd1').focus()
break;
case '2':
layer.msg(res.msg);
$('#pwd1')
break;
case '3':
layer.msg(res.msg);
$('#pwd1').focus()
break;
case '4':
layer.msg(res.msg);
$('#pwd1').focus()
break;
}
} ,'json')
})
//5.验证确认密码
$('#pwd2').blur(function(){
if($('#pwd1').val().length==0||!isNaN($('#pwd1').val())||$('#pwd1').val().length<8){
return false
}
var url ="check2.php?check=pwd2"
var data = {
'pwd2':$('#pwd2').val(),
'pwd1':$('#pwd1').val()
}
var success =function(res){
console.log(res)
switch (res.status){
case '0':
layer.msg(res.msg);
$('#pwd1').focus()
break;
case '1':
layer.msg(res.msg);
$('#pwd1').focus()
break;
case '2':
layer.msg(res.msg);
break;
case '3':
layer.msg(res.msg);
$('#pwd1').focus()
break;
}
}
$.post(url,data,success,'json')
//6.验证复选框
})
})
</script>
</html>点击 "运行实例" 按钮查看在线实例
<?php
// print_r($_POST['userID']);
//1.验证身份证号
$userIDarr=[123456789123456789,987654321987654321,741852963741852963,963852741963852741,852963741123456789];
$emailarr = ['abc@php.cn','admin@qq.com','ceshi@sina.cn'];
switch ($_GET['check']) {
case 'userID':
$userid = $_POST['userID'];
if(empty($userid)||strlen($userid)==0){
echo json_encode(['status'=>'1','msg'=>'身份证号码不能为空']);
} else if (strlen($userid)!==18) {
echo json_encode(['status'=>'0','msg'=>'请输入18位的身份证号码']);
}else if(in_array($userid, $userIDarr)){
echo json_encode(['status'=>'3','msg'=>'身份证号码已经注册，如果忘记密码请联系客服！']);
}else{
echo json_encode(['status'=>'2','msg'=>'身份证号码可以使用']);
}
break;
case 'user':
$user = $_POST['user'];
if(empty($user)||strlen($user)==0){
echo json_encode(['status'=>'1','msg'=>'姓名不能为空，请重新输入']);
}else if(is_numeric($user)){
echo json_encode(['status'=>'3','msg'=>'姓名验证错误，不能是数字，请重新输入']);
}else{
echo json_encode(['status'=>'2','msg'=>'恭喜你！！姓名验证通过，可以使用了']);
}
break;
case 'email':
$email = $_POST['email'];
if(empty($email)||strlen($email)==0){
echo json_encode(['status'=>'1','msg'=>'邮箱不能为空，请重新输入']);
}else if(in_array($email, $emailarr)){
echo json_encode(['status'=>'3','msg'=>'邮箱已经存在，如果忘记密码请联系客服！']);
}else if(is_numeric($email)){
echo json_encode(['status'=>'4','msg'=>'邮箱不能为数字，请重新输入']);
}
else{
echo json_encode(['status'=>'2','msg'=>'恭喜你！！邮箱验证通过，可以使用']);
}
break;
case 'pwd1':
$pwd1 = $_POST['pwd1'];
if(empty($pwd1)||strlen($pwd1)==0){
echo json_encode(['status'=>'1','msg'=>'密码不能为空，请重新输入']);
}else if(strlen($pwd1)<8){
echo json_encode(['status'=>'4','msg'=>'密码不能少于8位']);
}else if(is_numeric($pwd1)){
echo json_encode(['status'=>'3','msg'=>'不能纯数字，请使用字母和密码组合！']); }
else{
echo json_encode(['status'=>'2','msg'=>'恭喜你！！密码可以使用']);
}
break;
case 'pwd2':
$pwd1 = $_POST['pwd1'];
$pwd2 = $_POST['pwd2'];
if(empty($pwd2)||strlen($pwd2)==0){
echo json_encode(['status'=>'1','msg'=>'密码不能为空']);
} else if ($pwd1!==$pwd2) {
echo json_encode(['status'=>'0','msg'=>'两次密码不一致，请重新输入']);
}else if(is_numeric($pwd2)){
echo json_encode(['status'=>'3','msg'=>'密码不能纯数字，如果忘记密码请联系客服！']);
}else{
echo json_encode(['status'=>'2','msg'=>'密码一致，可以使用']);
}
break;
}
?>点击 "运行实例" 按钮查看在线实例
