强躬踏睹谎夏褂脸钳辟微寡纳
所有的表单数据验证全部使用ajax完成 请求类型为post 但是为了代码的简洁与可读性 操作类型使GET
新建admin目录 在该目录下新建check.php 新建jquery目录并引入jquery
1.邮箱验证 焦点离开输入框即开始验证
$.post(url,data,function(data){},’json’)
url:处理脚本 data：发送的数据 function 成功的回调函数 参数data:返回的数据 json指定返回的数据类型
代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>实例：用PHP来处理表单</title>
<style type="text/css">
table
{
/*背景色：小麦色*/
background-color:wheat;
/*添加阴影*/
box-shadow: 3px 3px 3px #888;
/*添加百分之3的圆角*/
border-radius:3%;
/*内间距15px*/
padding;15px;
/*外边距：上下30px 左右居中*/
margin:30px auto;
}
table td
{
/*内间距8px*/
padding:8px;
}
table caption
{
/*标题字体大小1.5em*/
font-size: 1.5em;
/*外边距距离底部10px 将标题与表格分开一点*/
margin-bottom:10px;
}
textarea
{
/*不允许文本域拉伸*/
resize: none;
}
table button
{
width:100px;
height:30px;
border:none;
background-color:skyblue;
color:white;
}
table button:hover
{
/*访问按钮时 字体变为1.1em 背景色变为橘红 鼠标变为手型*/
font-size:1.1em;
background-color:coral;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<form>
<caption>用户注册</caption>
<tr>
<!-- label标签与id一一对应 点击邮箱时光标会自动跳到输入框 用户友好-->
<td><label for="email">邮箱</label></td>
<td><input type="text" name="eamil" id="email"></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>
<!-- 注意：单选框必须加value属性 且所以name值必须一致-->
<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>
<!-- 默认性别即为保密：checked=""-->
<input type="radio" name="gender" id="secret" value="secret" checked=""><label for="secret">保密</label>
</td>
</tr>
<tr>
<td><label for="level">级别</label></td>
<td>
<!-- 下拉列表框必须指定value值-->
<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>
<!-- 多选框name值必须是数组 默认选中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="python"><label for="python">python</label>
<input type="checkbox" name="lang[]"id="c"value="c"><label for="c">c</label>
</td>
</tr>
<!-- 文本域-->
<tr>
<td><label for="comment">简介：</label></td>
<td>
<!-- 3行 30列-->
<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>
</form>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
//所有的表单数据验证全部使用ajax完成 请求类型为post 但是为了代码的简洁与可读性 操作类型使GET
// 1.邮箱验证 焦点离开输入框即开始验证
$('#email').blur(function(){
// url:处理脚本 data：发送的数据 function 成功的回调函数 参数data:返回的数据 json指定返回的数据类型
// $.post(url,data,function(data){},'json')
$.post('admin/check.php','email='+$('#email').val(),function (data) {
},'json')
})
</script>
</body>
</html>
提交数据，可以看到数据被成功提交到处理脚本
存在的问题，需要提交多条数据，处理脚本只有check.php 需要进行区分
修改js代码，给URL带一个参数进行区分：
<script type="text/javascript">
$('#email').blur(function(){
// $.post(url,data,function(data){},'json')
$.post('admin/check.php?check=email','email='+$('#email').val(),function (data) {
},'json')
})
</script>
重新提交数据，此时成功的用参数进行区分，在处理脚本时可以使用get 接收参数
修改check.php
<?php echo "<pre/>"; //打印post提交的数据 print_r($_POST);
提交数据，可以看到post提交的数据被成功返回
写js代码要经常使用审查元素检查bug response:成功返回的数据
修改check.php
<?php
//使用check的值类区分不同的验证字段
switch ($_GET['check'])
{
case 'email':
echo "邮箱验证";
break;
default:
break;
}
重新提交数据，返回邮箱验证，证明逻辑正确
寥钞侍酮处落死陶贫无快矫久