![[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">
table{
background-color: wheat;
box-shadow: 3px 3px 3px #888;
border-radius: 3px;
padding: 15px;
margin: 30px auto;
}
table td{
padding: 6px;
}
table caption{
font-size: 1.3em;
margin-bottom:10px;
}
textarea{
resize: none;
}
form button{
width: 100px;
height: 30px;
background-color: skyblue;
color: white;
}
form button:hover{
background-color: orangered;
font-size: 1.2em;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<table>
<caption>注册</caption>
<tr>
<td><label for="email">邮箱</label></td>
<td><input type="text" 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="">性别</label></td>
<td>
<input type="radio" name="gemder" id="male" value="male"><label for="male">男</label>
<input type="radio" name="gemder" id="male" value="female"><label for="female">女</label>
<input type="radio" name="gemder" id="select" value="select" checked=""><label for="select">保密</label>
</td>
</tr>
<tr>
<td><label for="level">级别</label></td>
<td>
<select name="level" id="level">
<option value="0" selected="">小白</option>
<option value="0">中级</option>
<option value="0">高级</option>
</select>
</td>
</tr>
<tr>
<td><label>语言</label></td>
<td>
<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++">c++</label>
<input type="checkbox" name="lang[]" id="html" value="html"><label for="html">html</label>
<input type="checkbox" name="lang[]" id="java" value="java"><label for="java">java</label>
</td>
</tr>
<tr>
<td><label for="comment">简介</label></td>
<td>
<textarea name="comment" rows="5" cols="30"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit" name="submit" id="submit" value="submit">提交</button>
</td>
</tr>
</table>
</form>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 邮箱验证，全部使用ajax完成，请求类型为post但是为了代码可读性操作使用GET
$('#email').blur(function(){
// 采用post
// $.post(url,data,fynction(data)属性
$.post('admin/check.php?check=email','email='+$('#email').val(),function(data){
switch(data.status){
case 0:
$('td').find('span').remove()
// prev().focus移到当前焦点
$('#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')
break;
break;
case 2:
$('td').find('span').remove()
$('#email').after('<span>').next().text(data.msg).css('color','green')
break;
break;
}
},'json')
})
//密码验证
$('#password1').blur(function(){
if ($('#email').val().length == 0) {
return false
}
$.post('admin/check.php?check=password1','password1='+$('#password1').val(),function(data){
if(data.status == 0) {
//清空前一次的提示信息
$('td').find('span').remove()
//在文本框后面添加信息提示并设置焦点
$('#password1').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
//返回调用者
return false
}
},'json') //返回数据为json格式
})
//确认密码验证
$('#password2').blur(function(){
//如果邮箱或密码没有输入,则什么都不做,直接返回
if ($('#email').val().length == 0 || $('#password1').val().length == 0) {
return false
}
$.post('admin/check.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').prev().focus();
break;
case 1:
$('td').find('span').remove()
$('#password2').after('<span>').next().text(data.msg).css('color', 'red')
//确认密码不对,应该将焦点设置到第一次的密码框内
$('#password1').focus()
break;
case 2:
$('td').find('span').remove()
$('#password2').after('<span>').next().text(data.msg).css('color', 'green')
break;
}
},'json')
})
$('#signature').blur(function(){
if ($('#username').val().length==0 || $('#password1').val().length==0 || $('#password2').val().length==0) {
return false
}
//POST提交验证个人简介
$.post('core/reg_check.php?check=signature','signature='+$('#signature').val(),function(data){
//根据返回状态码在个人简介文本域后添加span元素，即提示信息
switch(data.status){
case 0:
//状态码返回0
$('td').find('span').remove()
//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色并使输入框激活
$('#signature').after('<span>').next().text('*'+data.msg).css('color','#5555').prev().focus()
break
case 1:
$('td').find('span').remove()
$('#signature').after('<span>').next().text('*'+data.msg).css('color','#f0f0f0').prev().focus()
break
case 2:
$('td').find('span').remove()
$('#signature').after('<span>').next().text(data.msg).css('color','#8888')
break
}
},'json')
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
