![[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
主题：
利用jquery的$.post()提交表单数据请求，由服务器上的check.php处理表单数据验证。
实现效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册验证</title>
<style type="text/css">
table {
width:400px;
background-color: #CCFF99;
box-shadow: 2px 4px 2px #555;
border:1px solid #777;
border-radius:3%;
margin:30px auto;
padding:15px;
}
table caption {
font-size: 1.5em;
}
table td {
padding:5px;
}
textarea {
resize: none;
}
table button {
width: 100px;
height: 30px;
cursor: pointer;
border: none;
background-color: #6666FF;
color: white;
font-size: 1.1em;
}
table button:hover {
background-color: #CC66CC;
color: white;
}
span {
font-size:0.7em;
}
</style>
</head>
<body>
<form action="admin/check.php" method="post">
<table>
<caption>用户注册</caption>
<tr>
<td><label for="user">用户名称：</label></td>
<td><input type="text" id="user" name="user"></td>
</tr>
<tr>
<td><label for="pwd">用户密码：</label></td>
<td><input type="password" id="pwd" name="pwd"></td>
</tr>
<tr>
<td><label for="cfpwd">确认密码：</label></td>
<td><input type="password" id="cfpwd" name="cfpwd"></td>
</tr>
<tr>
<td><label>用户性别：</label></td>
<td>
<input type="radio" id="male" name="sex" value="male"><label for="male">男</label>
<input type="radio" id="female" name="sex" value="female" checked><label for="female">女</label>
<input type="radio" id="secret" name="sex" value="secret"><label for="secret">保密</label>
</td>
</tr>
<tr>
<td><label for="">用户类别：</label></td>
<td>
<select name="" id="">
<option value="">普通用户</option>
<option value="" selected>二级用户</option>
<option value="">操作员</option>
<option value="">管理员</option>
</select>
</td>
</tr>
<tr>
<td><label>技术类型：</label></td>
<td>
<input type="checkbox" id="front" name="skill[]" value="front"><label for="front">前端</label>
<input type="checkbox" id="server" name="skill[]" value="server" checked><label for="serverfront">后端</label>
<input type="checkbox" id="design" name="skill[]" value="design"><label for="design">设计</label>
</td>
</tr>
<tr>
<td valign="middle"><label for="msg">用户介绍：</label></td>
<td><textarea name="msg" id="msg" cols="30" rows="3"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><button type="submit" id="submit" name="submit" value="submit">提交</button></td>
</tr>
</table>
</form>
</body>
<!-- jquery 核心 JavaScript 文件 -->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
//请求邮箱验证
$('#user').blur(function(){
// post方式发送请求
$.post('admin/check.php?check=user', 'user='+$('#user').val(), function(data){
// switch()循环输出验证结果
switch(data.status) {
// 当status为0时，取出返回的相应data数据
case 0:
// 先移除之前生成的警告信息
$('td').find('span').remove()
// 添加新的警告信息
$('#user').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
break;
case 1:
$('td').find('span').remove()
$('#user').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
break;
case 2:
$('td').find('span').remove()
$('#user').after('<span>').next().text(data.msg).css('color', 'green')
break;
}
},'json')
})
//密码验证
$('#pwd').blur(function(){
// 判断用户名称是否为空
if ($('#user').val().length == 0) {
return false
}
$.post('admin/check.php?check=pwd','pwd='+$('#pwd').val(),function(data){
if(data.status == 0) {
$('#pwd').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
}
},'json')
})
//确认密码验证
$('#cfpwd').blur(function(){
if ($('#user').val().length == 0) {
return false
}
// 将密码和确认密码一同发送到check.php验证
$.post('admin/check.php?check=cfpwd', {
pwd: $('#pwd').val(),
cfpwd: $('#cfpwd').val()
}, function(data){
switch(data.status) {
case 0:
$('td').find('span').remove()
$('#cfpwd').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
break;
case 1:
$('td').find('span').remove()
$('#cfpwd').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
break;
case 2:
$('td').find('span').remove()
$('#cfpwd').after('<span>').next().text(data.msg).css('color', 'green')
break;
}
},'json')
})
// 用户介绍验证
$('#msg').blur(function(){
$.post('admin/check.php?check=msg', 'msg='+$('#msg').val(), function(data){
if ($('#user').val().length == 0) {
return false
}
switch(data.status) {
// 验证非空
case 0:
$('td').find('span').remove()
$('#msg').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
break;
// 验证大于30个字节（10个汉字）
case 1:
$('td').find('span').remove()
$('#msg').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
break;
// 验证通过
case 2:
$('td').find('span').remove()
$('#msg').after('<span>').next().text(data.msg).css('color', 'green')
break;
}
},'json')
})
</script>
</html>点击 "运行实例" 按钮查看在线实例
<?php
// 获取前端的post请求数据
switch ($_GET['check']) {
//验证邮箱
case 'user':
$user = $_POST['user']; // 设置默认值
// 非空必须要用empty()验证，json_encode()返回json数据格式
if (empty($user)) {
// status为状态表示参数，不同的数值代表不同状态，并执行不同语句
exit(json_encode(['status'=>0,'msg'=>'用户名不能为空']));
} else if (in_array($user, ['admin@php.cn','zhu@php.cn'])){
// 验证不通过时用exit()退出循环语句，不往下执行
exit(json_encode(['status'=>1,'msg'=>'用户名已占用']));
} else {
// 验证通过时执行输出语句
echo json_encode(['status'=>2,'msg'=>'用户名可用']);
}
break;
//验证密码
case 'pwd':
$pwd = $_POST['pwd'];
if (empty($pwd)) {
exit(json_encode(['status'=>0,'msg'=>'密码不能为空']));
}
break;
//验证确认密码
case 'cfpwd':
$pwd = $_POST['pwd'];
$cfpwd = $_POST['cfpwd'];
if (empty($cfpwd)) {
exit(json_encode(['status'=>0,'msg'=>'确认不能为空']));
} else if ($pwd != $cfpwd){
exit(json_encode(['status'=>1,'msg'=>'二次密码不相等']));
} else {
exit(json_encode(['status'=>2,'msg'=>'验证通过']));
}
break;
// 验证用户介绍
case 'msg':
$msg = $_POST['msg']; // 设置默认值
if (empty($msg)) {
exit(json_encode(['status'=>0,'msg'=>'介绍不能为空']));
}
//使用strlen()获取字符串长度
else if (strlen($msg) < 30){
exit(json_encode(['status'=>1,'msg'=>'介绍不能少于10个汉字']));
} else {
echo json_encode(['status'=>2,'msg'=>'介绍信息可用']);
}
break;
} 点击 "运行实例" 按钮查看在线实例
重点：
前端：$.post()方式发送请求，移除之前生成的警告信息，将密码和确认密码一同发送到check.php验证
后端：$_GET['check']获取前端请求数据，非空必须要用empty()验证，使用strlen()获取字符串长度
