![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
前端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
<caption>注册</caption>
<tr>
<td><table for="email">邮箱：</table></td>
<td><input type="text" name="email" id="email" autofocus=""></td>
</tr>
<tr>
<td><table for="password">密码：</table></td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td><table for="repassword">确认密码：</table></td>
<td><input type="password" name="repassword" id="repassword"></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 for="level">级别</label></td>
<td>
<select name="level" id="level">
<option value="0">小白</option>
<option value="1" selected="">中级</option>
<option value="2">大神</option>
</select>
</td>
</tr>
<tr>
<td><label for="php">语言:</label></td>
<td> <!-- 点击标签会把php做为默认项之一选中 -->
<input type="checkbox" name="lang[]" id="php" value="php" checked><label for="php">php</label>
<input type="checkbox" name="lang[]" id="java" value="java"><label for="java">java</label>
<input type="checkbox" name="lang[]" id="python" value="php"><label for="python">python</label>
<input type="checkbox" name="lang[]" id="c" value="c"><label for="c">c</label>
</td>
</tr>
<tr>
<td valign="middle"><label for="comment">简介:</label></td>
<td><textarea name="comment" id="comment" rows="3" cols="30"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit" name="submit" id="submit" value="submit">提交</button>
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 邮箱认证
$('#email').blur(function(){
/**
* post()方法：
* $.ajax({
* url: url,
type: 'POST',
data: data,
success: success,
dataType: dataType
});
*/
$.post('api/check.php?check=email','email='+$('#email').val(),function(data){
// 判断status
switch(data.status){
case 0:
// 清除上一个提示
$('td').find('span').remove()
// 在eamil后面插入<span>,在<span>里边写入从PHP中传来的data.msg.
$('#email').after('<span>').next().text(data.msg).prev().focus();
break;
case 1:
$('td').find('span').remove()
$('#email').after('<span>').next().text(data.msg).prev().focus();
break;
case 2:
$('td').find('span').remove()
$('#email').after('<span>').next().text(data.msg).css('color', 'green')
break;
}
},'json')
})
// 密码验证
$('#password').blur(function(){
// 如果邮箱不写，就不理了
if ($('#email').val().length == 0) {
return false
}
$.post('check.php?check=password','password='+$('#password').val(),function(data){
if(data.status == 0) {
$('td').find('span').remove()
$('#password').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
return false
}
},'json')
})
// 确认密码认证
$('#repassword').blur(function(){
// 如果邮箱和密码为不写，就不理了
if ($('#email').val().length == 0 || $('#password').val().length == 0) {
return false
}
$.post('check.php?check=repassword', {
password: $('#password').val(),
repassword: $('#repassword').val()
},function(data){
switch(data.status){
case 0:
$('td').find('span').remove()
$('#repassword').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
break;
case 1:
$('td').find('span').remove()
$('#repassword').after('<span>').next().text(data.msg).css('color', 'red')
//确认密码不对,应该将焦点设置到第一次的密码框内
$('#password').focus()
break;
case 2:
$('td').find('span').remove()
$('#repassword').after('<span>').next().text(data.msg).css('color', 'green')
break;
}
},'json')
})
// 简介认证
$('#comment').blur(function(){
if ($('#email').val().length == 0 || $('#password').val().length == 0 || $('#repassword').val().length == 0) {
return false
}
$.post('check.php?check=comment', 'comment='+$('#comment').val(), function(data){
switch(data.status) {
case 0:
$('td').find('span').remove()
$('#comment').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
break;
case 1:
$('td').find('span').remove()
$('#comment').after('<span>').next().text(data.msg).css('color', 'green').prev().focus();
break;
}
},'json')
})
</script>点击 "运行实例" 按钮查看在线实例
服务器的check.php
<?php
switch ($_GET['check']) {
case 'email':
$email = $_POST['email'];
if (empty($email)) {
exit(json_encode(['status'=>0,'msg'=>'邮箱不能为空']));
}else if (in_array($email,['admin@1.cn','123@2.cn'])) {
exit(json_encode(['status'=>1,'msg'=>'邮箱已被占用']));
}else{
echo json_encode(['status'=>2,'msg'=>'邮箱可用']);
}
break;
case 'password':
$password = $_POST['password'];
if (empty($password)) {
exit(json_encode(['status'=>0,'msg'=>'密码不能为空']));
}
break;
case 'repassword':
$password = $_POST['password'];
$repassword = $_POST['repassword'];
if (empty($repassword)) {
exit(json_encode(['status'=>0,'msg'=>'确认不能为空']));
} else if ($password != $repassword){
exit(json_encode(['status'=>1,'msg'=>'二次密码不相等']));
} else {
exit(json_encode(['status'=>2,'msg'=>'验证通过']));
}
break;
//就不做非空验证了 ,如果他想写就写不想写拉倒
case 'comment':
$comment = $_POST['comment'];
if (!empty($comment)) {
if (mb_strlen(trim($comment))<10) {
exit(json_encode(['status'=>0,'msg'=>'长度小于10个字符']));
}else{
exit(json_encode(['status'=>1,'msg'=>'通过']));
}
}
break;
}
?>点击 "运行实例" 按钮查看在线实例
