![[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
效果图：
思路：
html+css 不做说明
数据验证全部使用ajax完成，各选项赋予id值，方便选择
1，输入框的验证用.blur(function() {})鼠标消失时提交数据，用$.post(url,data,succuss,data-type)方式来传输数据，url数据的区分直接在url后面加?check=参数区分，其中用的多的有switch循环判断语句，if判断语句，链式调用等知识
2，php脚本，swich循环判断语句并get得到check值进行判断，其中重要的函数有：json_encode(),in_array(),strlen(),mb)_strlen(trim()) 等...
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单的传值</title>
<style type="text/css">
table{
background-color: gold;box-shadow: 5px 5px 5px #888;
margin: 20px;padding:15px;border-radius: 6%;
}
caption{
color: orange;font-size: 1.8em;
}
textarea {
resize: none;
}
button{
width: 100px;height: 30px;border: none;background-color: green;color: white;
margin: auto 50%;cursor: pointer;border-radius:5%;
}
button:hover{
font-weight: bold;background-color:darkgreen;
}
</style>
</head>
<body>
<form>
<table>
<caption>门派招聘登记</caption>
<tr>
<td><label for="name">姓名:</label></td>
<td><input type="text" name="name" id="name" ></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="level">级别:</label></td>
<td>
<select name="level" id="level">
<option value="1">修仙凡人</option>
<option value="2">结丹期</option>
<option value="3">斗师</option>
<option value="4" selected="">修罗</option>
</select>
</td>
</tr>
<tr>
<td><label for="secret">性别:</label></td>
<td>
<input type="radio" name="sex" value="male" id="male"><label for="male">先生</label>
<input type="radio" name="sex" value="female" id="female"><label for="female">女士</label>
<input type="radio" name="sex" value="secret" id="secret" checked=""><label for="secret">保密</label>
</td>
</tr>
<tr>
<td><label for="ll">擅长:</label></td>
<td>
<input type="checkbox" name="hoddy[]" id='ll' value="ll"><label for="ll">战士</label>
<input type="checkbox" name="hoddy[]" id='mj' value="mj"><label for="mj">刺客</label>
<input type="checkbox" name="hoddy[]" id='sd' value="sd"><label for="sd">辅助</label>
<input type="checkbox" name="hoddy[]" id='qn' value="qn" checked=""><label for="qn" >打酱油</label>
</td>
</tr>
<tr>
<td><label for="photo">形象:</label></td>
<td>
<img src="../images/1.jpg" height="30">
<input type="file" name="photo" id="photo" accept="">
</td>
</tr>
<tr>
<td><label for="textarea">历练简介:</label></td>
<td>
<textarea cols="30" rows="5" placeholder="不少于一百字.." id="textarea"></textarea>
</td>
</tr>
<tr>
<td colspan="2"><button type="submit" name="submit" id="submit" value="submit">提交</button></td>
</tr>
</table>
</form>
</body>
</html>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
//所有的表单数据验证全部使用Ajax完成，请求类型为post，但是为了代码的简洁及可读性，操作类型使用get
//1，邮箱验证
$('#name').blur(function(){
//采用post()方式
$.post('admin/416check.php?check=name','name='+$('#name').val(),function(data){
switch(data.status){
case 0:
$('td').find('span').remove();
$('#name').after('<span>').next().text(data.msg).css('color','red').css('font-size','0.5em').prev().focus()
break;
case 1:
$('td').find('span').remove();
$('#name').after('<span>').next().text(data.msg).css('color','red').css('font-size','0.5em').prev().focus()
break;
case 2:
$('td').find('span').remove();
$('#name').after('<span>').next().text(data.msg).css('color','green').css('font-size','0.5em')
break;
}
},'json')
})
//2,密码验证
$('#password1').blur(function(){
//不能为空判断
if($('#name').val().length==0){
return false
}
// alert(1)
$.post('admin/416check.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').css('font-size','0.5em').prev().focus()
}
},'json')
})
//3，确认密码
$('#password2').blur(function(){
//不能为空判断
if($('#name').val().length==0 || $('#password1').val().length <6 ){
return false
}
// alert(1)
$.post('admin/416check.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').css('font-size','0.5em').prev().focus()
break;
case 1:
$('td').find('span').remove();
$('#password2').after('<span>').next().text(data.msg).css('color','red').css('font-size','0.5em').prev().focus()
break;
case 2:
$('td').find('span').remove();
$('#password2').after('<span>').next().text(data.msg).css('color','green').css('font-size','0.5em')
break;
}
},'json')
})
//文本域验证
$('#textarea').blur(function(){
if($('#name').val().length==0 || $('#password1').val().length <6 || $('#password2').val().length==0){
return false
}
$.post('admin/416check.php?check=textarea','textarea='+$('#textarea').val(),function(data){
switch(data.status){
case 0:
$('td').find('span').remove();
$('#textarea').after('<span>').next().text(data.msg).css('color','red').css('font-size','0.5em').prev().focus()
break;
case 1:
$('td').find('span').remove();
$('#textarea').after('<span>').next().text(data.msg).css('color','green').css('font-size','0.5em')
break;
}
},'json')
})
//提交数据
$('#submit').click(function(){
$.post('admin/check.php?check=submit', $('#register').serialize(), function(data){
// $('td').find('span').remove()
alert(data)
},'text')
})
</script>点击 "运行实例" 按钮查看在线实例
php脚本：
<?php
// echo '<pre>';
// print_r($_POST); 测试是否可以从服务器端得到请求
// echo $_GET['check']; 得到name
//用url中的check值进行判断，决定要验证的字段
switch ($_GET['check']) {
//验证姓名
case 'name':
// echo '验证姓名';
$name=$_POST['name'];
if(empty($name)){
exit(json_encode(['status'=>0,'msg'=>' 请输入姓名！']));
}else if(in_array($name,['admin','root'])){
exit(json_encode(['status'=>1,'msg'=>' 该用户名已注册！']));
}else{
exit(json_encode(['status'=>2,'msg'=>' 该用户名可用！']));
}
break;
//验证密码
case 'password1':
$password1=$_POST['password1'];
if(strlen($password1)<5){
exit(json_encode(['status'=>0,'msg'=>' 密码不能少于六位！']));
}
//验证确认密码
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'=>' 二次密码正确！']));
}
//验证文本域
case 'textarea':
$textarea=$_POST['textarea'];
// if(empty($textarea)){
// exit(json_encode(['status'=>0,'msg'=>' 请输入文字！']));
// }else
if(mb_strlen(trim(($textarea))) < 10){
exit(json_encode(['status'=>0,'msg'=>' 介绍不少于10字符！']));
}else{
exit(json_encode(['status'=>1,'msg'=>' 通过！']));
}
//提交验证
case 'submit':
//因为数据之前已经全部验证,这里直接返回结果即可
exit('恭喜,注册成功');
}
点击 "运行实例" 按钮查看在线实例
