![[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>PHP 基本验证登陆</title>
<style type="text/css">
.one {
width: 400px;
height: 400px;
background-color: #16A085;
border: 1px solid grey;
margin:20px auto;
text-align: center;
color: #636363;
box-shadow: 2px 2px 2px #999;
border-radius: 10px;
}
.one table{
padding: 0;
margin-top: 0;
}
</style>
</head>
<body>
<form class="one">
<table>
<caption><h3>用户注册</h3></caption>
<tr>
<td><label for="email">邮箱:</label></td>
<td><input type="email" name="email" id="email" autofocus=""></td>
</tr>
<tr>
<td><label for="password1">密码:</label></td>
<td><input type="password" name="password1" id="password1"></td>
</tr>
<tr>
<td><label for="password2">确认:</label></td>
<td><input type="password" name="password2" id="password2"></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" selected="">专科</option>
<option value="1">本科</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="C" value="C"><label for="C">java</label>
<input type="checkbox" name="lang[]" id="python" value="php"><label for="python">python</label>
<input type="checkbox" name="lang[]" id="java" value="java"><label for="java">c</label>
</td>
</tr>
<tr>
<td valign="middle"><label for="comment">内容:</label></td>
<td><textarea name="comment" id="comment" rows="4" cols="20"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit" name="submit" id="submit" value="submit">提交</button>
</td>
</tr>
</table>
</form>
</body>
<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(){
if ($('#email').val().length == 0) {
$('#email').focus()
}
$.post('check.php?check=email', 'email='+$('#email').val(), function(data){
$('#email').next().remove()
switch(data.status) {
case 0:
$('td').find('span').remove()
$('#email').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
break;
case 1:
$('td').find('span').remove()
$('#email').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
break;
case 2:
$('td').find('span').remove()
$('#email').after('<span>').next().text(data.msg).css('color', 'green')
break;
}
},'json')
})
$('#password1').blur(function(){
if ($('#password1').val().length == 0) {
$('#password1').focus()
}
$.post('check.php?check=password1', 'password1='+$('#password1').val(), function(data){
$('#password1').next().remove()
if(data.status == 0){
$('#password1').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
}
else if(data.status == 1){
$('#password1').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
}
else if(data.status == 2){
$('#password1').after('<span>').next().text(data.msg).css('color', 'green')
if($('#password2').val().length > 0){
$('#password2').blur()
}
}
},'json')
})
$('#password2').blur(function(){
if ($('#password2').val().length == 0) {
return false
}
$.post('check.php?check=password2', {password1:$('#password1').val(),password2:$('#password2').val()}, function(data){
$('#password2').next().remove()
if(data.status == 0){
$('#password2').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
}
else if(data.status == 1){
$('#password2').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
}
else if(data.status == 2){
$('#password2').after('<span>').next().text(data.msg).css('color', 'green')
}
},'json')
})
$('#comment').blur(function(){
if ($('#comment').val().length == 0) {
return false
}
$.post('check.php?check=comment', 'comment='+$('#comment').val(), function(data){
console.log(data)
$('#comment').next().remove()
if(data.status == 0){
$('#comment').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
}
else if(data.status == 1){
$('#comment').after('<span>').next().text(data.msg).css('color', 'green')
}
},'json')
})
$('#submit').click(function(){
$.post(
'check.php?check=submit',
$("form").serialize(),
function(data){
$('#submit').next().remove()
if(data.status == 0){
$('#submit').after('<span>').next().text(data.msg).css('color', 'red')
}
if(data.status == 1){
$('#submit').after('<span>').next().text(data.msg).css('color', 'green')
console.log(data.msg)
alert(data.msg)
//window.close()
window.open('http://www.php.cn/')
}
},'json')
})
</script>
</html>点击 "运行实例" 按钮查看在线实例
check.php
<?php
// echo '<pre>';
// print_r($_POST);
switch ($_GET['check']) {
//验证邮箱
case 'email':
$email = $_POST['email']; // 设置默认值
if (empty($email)) {
exit(json_encode(['status'=>0,'msg'=>'邮箱不能为空']));
} else if (in_array($email, ['admin@php.cn','zhu@php.cn'])){
exit(json_encode(['status'=>1,'msg'=>'邮箱已占用']));
} else {
echo json_encode(['status'=>2,'msg'=>'邮箱可用']);
}
break;
//验证密码
case 'password1':
$password1 = $_POST['password1'];
if (empty($password1)) {
exit(json_encode(['status'=>0,'msg'=>'密码不能为空']));
}
break;
//验证确认密码
case 'password2':
$password1 = $_POST['password1'];
$password2 = $_POST['password2'];
if (empty($password2)) {
exit(json_encode(['status'=>0,'msg'=>'确认不能为空']));
} else if ($password1 != $password2){
exit(json_encode(['status'=>1,'msg'=>'二次密码不相等']));
} else {
exit(json_encode(['status'=>2,'msg'=>'验证通过']));
}
break;
//简介验证(仅做非空验证)
case 'comment':
$comment = $_POST['comment'];
if (empty($comment)) {
exit(json_encode(['status'=>0,'msg'=>'简介不能为空']));
} else if (mb_strlen(trim($comment)) < 10) {
exit(json_encode(['status'=>1,'msg'=>'长度小于10个字符']));
} else {
exit(json_encode(['status'=>2,'msg'=>'通过']));
}
//提交验证
case 'submit':
//因为数据之前已经全部验证,这里直接返回结果即可
exit('恭喜,注册成功');
}
点击 "运行实例" 按钮查看在线实例
表单的数据通过check.php POST方法进行验证
