![[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">
<title>表单验证</title>
<style type="text/css">
table {
border-radius:5px;
background-color: #E6E6E6;
box-shadow: 2px 2px 1px #808080;
padding: 20px;
margin: 10px auto;
}
table td {
padding: 5px;
}
textarea {
resize: none;
}
</style>
</head>
<body>
<form>
<table>
<caption>用户注册</caption>
<!-- 用户email -->
<tr>
<td><lable for="">邮箱：</lable></td>
<td><input type="email" name="email" id="email" placeholder="example@php.cn"></td>
</tr>
<!-- 用户password1 -->
<tr>
<td><lable for="">密码：</lable></td>
<td><input type="password" name="password1" id="password1" placeholder="密码不长度不小于6位"></td>
</tr>
<!-- 用户password2 -->
<tr>
<td><lable for="">验证密码：</lable></td>
<td><input type="password" name="password2" id="password2" placeholder="请再次输入相同的密码"></td>
</tr>
<!-- 用户性别 -->
<tr>
<td><lable>性别：</lable></td>
<td>
<input type="radio" name="sex" id="male" value="male"><label for="male">男</label>
<input type="radio" name="sex" id="female" value="female"><label for="female">女</label>
<input type="radio" name="sex" id="secret" value="secret" checked=""><label for="secret">保密</label>
</td>
</tr>
<!-- 用户级别 -->
<tr>
<td><label for="">级别：</label></td>
<td>
<select name="level" id="level">
<option value="0">小白</option>
<option value="1" selected="">入门</option>
<option value="2">中级</option>
<option value="3">大牛</option>
</select>
</td>
</tr>
<!-- 用户学习课目 -->
<tr>
<td><lable for="php">课目：</lable></td>
<td>
<input type="checkbox" name="course[]" id="php" value="php" checked=""><label for="php">php</label>
<input type="checkbox" name="course[]" id="java" value="java"><label for="java">java</label>
<input type="checkbox" name="course[]" id="python" value="python"><label for="python">python</label>
<input type="checkbox" name="course[]" id="c++" value="c++"><label for="c++">c++</label>
</td>
</tr>
<!-- 用户信息备注 -->
<tr>
<td><label>备注：</label></td>
<td>
<textarea name="commen" id="commen" rows="3" cols="40" placeholder="请简单介绍您的情况，并不少于20个字。"></textarea>
</td>
</tr>
<!-- 按钮 -->
<tr>
<td><button type="submit" name="submit" id="submit" value="submit">提交</button></td>
<td><button type="reset" name="reset" id="reset" value="reset">重置</button></td>
</tr>
</table>
</form>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$('#email').blur(function(){
$.post('check0416.php?check=email','email='+$('#email').val(),function(data){
switch (data.status){
case 0:
$('td').find('span').remove()
$('#email').after('<span>').next().text(data.msg).css('color','red');
break;
case 1:
$('td').find('span').remove()
$('#email').after('<span>').next().text(data.msg).css('color','red');
break;
case 2:
$('td').find('span').remove()
$('#email').after('<span>').next().text(data.msg).css('color','green');
break;
}
},'json')
})
$('#password1').blur(function(){
$.post('check0416.php?check=password1','password1='+$('#password1').val(),function(data){
switch(data.status){
case 0:
$('td').find('span').remove()
$('#password1').after('<span>').next().text(data.msg).css('color','red');
break;
case 1:
$('td').find('span').remove()
$('#password1').after('<span>').next().text(data.msg).css('color','red');
break;
case 2:
$('td').find('span').remove()
$('#password1').after('<span>').next().text(data.msg).css('color','green');
break;
}
},'json')
})
$('#password2').blur(function(){
// alert(1)
$.post('check0416.php?check=password2',{
password1: $('#password1').val(),
password2: $('#password2').val()
},function(data){
switch(data.status){
case 0:
$('td').find('span').remove()
$('#password2').after('<span>').next().text(data.msg).css('color','red');
break;
case 1:
$('td').find('span').remove()
$('#password2').after('<span>').next().text(data.msg).css('color','red');
break;
case 2:
$('td').find('span').remove()
$('#password2').after('<span>').next().text(data.msg).css('color','green');
break;
}
},'json')
})
$('#commen').blur(function(){
$.post('check0416.php?check=commen','commen='+$('#commen').val(),function(data){
switch(data.status){
case 0:
$('td').find('span').remove()
$('#commen').after('<span>').next().text(data.msg).css('color','red');
break;
case 1:
$('td').find('span').remove()
$('#commen').after('<span>').next().text(data.msg).css('color','red');
break;
case 2:
$('td').find('span').remove()
$('#commen').after('<span>').next().text(data.msg).css('color','green');
break;
}
},'json')
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<?php
// echo '<prev>';
// 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,['php@php.cn','admin@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'=>'密码不能为空']));
}
else if (strlen($password1) <6){
exit(json_encode(['status'=>1,'msg'=>'密码不能少于6位']));
}
else {
echo json_encode(['status'=>2,'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 {
echo json_encode(['status'=>2,'msg'=>'验证通过']);
}
break;
case 'commen':
$commen = $_POST['commen'];
if (empty($commen)){
exit(json_encode(['status'=>0,'msg'=>'请填写备注信息']));
}else if (strlen($commen) < 10){
exit(json_encode(['status'=>1,'msg'=>'备注不能少于10个字']));
}else {
exit(json_encode(['status'=>2,'msg'=>'漂亮的备注']));
}
break;
}点击 "运行实例" 按钮查看在线实例
清除按钮功能还没来得及做