裴嗽备菠躬李暮死姓徽赋挎绢
修改check.php
<?php
//使用check的值类区分不同的验证字段
switch ($_GET['check'])
{
case 'email':
$email=$_POST['email'];
if(empty($email))
{
//如果邮箱为空 则返回一个数组并结束当前脚本 返回的数据需要json格式
//使用json_encode()封装数据
exit(json_encode(['status'=>0,'msg'=>'邮箱不能为空']));
}
break;
default:
break;
}
直接提交，不输入数据，可以看到返回的提示信息符合预期：
修改check.php
<?php
//使用check的值类区分不同的验证字段
switch ($_GET['check'])
{
case 'email':
$email=$_POST['email'];
if(empty($email))
{
//如果邮箱为空 则返回一个数组并结束当前脚本 返回的数据需要json格式
//使用json_encode()封装数据
exit(json_encode(['status'=>0,'msg'=>'邮箱不能为空']));
}
//邮箱不能使mengmianren@123.com，admin@123.com
else if(is_array($email,['mengmianren@123.com','admin@123.com']))
{
exit(json_encode(['status'=>1,'msg'=>'邮箱已被使用']));
}
else
{
exit(json_encode(['status'=>2,'msg'=>'邮箱可用']));
}
break;
default:
break;
}
修改demo.php的js代码：
<script type="text/javascript">
$('#email').blur(function(){
$.post('admin/check.php?check=email','email='+$('#email').val(),function (data) {
switch(data.status)
{
case 0:
//在email输入框后添加 span标签 在span后面添加文字 文字颜色为红色
$('#email').after('<span>').next().text(data.msg).css('color','red')
break;
}
},'json')
})
</script>
直接提交，不输入数据，提示信息正确
存在的问题：提交一次后 再多次提交 提示信息会出现多次
修改demo.php的js代码：
<script type="text/javascript">
$('#email').blur(function(){
$.post('admin/check.php?check=email','email='+$('#email').val(),function (data) {
switch(data.status)
{
case 0:
//删除上一次的提示信息
//所有的span提示信息都是在td标签中生成的 删除所有td下面的span标签即可
$('td').find('span').remove()
$('#email').after('<span>').next().text(data.msg).css('color','red')
break;
}
},'json')
})
</script>
此时多次提交会删除上一次生成的span标签的提示信息，td下面只会生成一个span标签提示信息
完善邮箱验证
修改demo.php的js代码：
<script type="text/javascript">
$('#email').blur(function(){
$.post('admin/check.php?check=email','email='+$('#email').val(),function (data) {
switch(data.status)
{
case 0:
//删除上一次的提示信息
//所有的span提示信息都是在td标签中生成的 删除所有td下面的span标签即可
$('td').find('span').remove()
//在email输入框后添加 span标签 在span后面添加文字 文字颜色为红色
$('#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')
})
</script>
提交数据测试：
优化:当提示错误信息时，其他输入框不允许输入，必须先把信息填正确，焦点才能移动。即将焦点移动到错误信息的前面
修改demo.php的js代码：
<script type="text/javascript">
$('#email').blur(function(){
$.post('admin/check.php?check=email','email='+$('#email').val(),function (data) {
switch(data.status)
{
case 0:
//删除上一次的提示信息
//所有的span提示信息都是在td标签中生成的 删除所有td下面的span标签即可
$('td').find('span').remove()
//在email输入框后添加 span标签 在span后面添加文字 文字颜色为红色 并将焦点移动到span前面
$('#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')
})
</script>
测试，信息不正确时，必须填写正确才能再下一个输入框输入信息，光标不能移动
赣石秀蜜玫句洛爆协围忿癌恢