实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用户注册表单</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form>
<h3 class="text-center" style="padding-bottom: 20px">用户注册</h3>
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="email">邮箱：</label>
<input type="email" class="form-control" id="email" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label for="Password1">密码：</label>
<input type="password" class="form-control" id="password1" placeholder="请输入密码">
</div>
<div class="form-group">
<label for="Password2">确认密码：</label>
<input type="password" class="form-control" id="password2" placeholder="请再次输入密码">
</div>
<div class="form-group">
<label>级别：</label>
<select class="form-control">
<option>入门</option>
<option>熟练</option>
<option>精通</option>
</select>
</div>
<div class="checkbox">
<label style="padding-left: 0;font-weight: 700">爱好：</label>
<label class="checkbox-inline">
<input type="checkbox" value="option1"> PHP
</label>
<label class="checkbox-inline">
<input type="checkbox" value="option2"> HTML
</label>
<label class="checkbox-inline">
<input type="checkbox" value="option3"> JAVASCRIPT
</label>
</div>
<div class="form-group">
<label for="exampleInputFile">备注：</label>
<textarea class="form-control" rows="5" placeholder="字数不少于10字" id="comment"></textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 同意<a href=#>用户注册</a>协议
</label>
</div>
<div class="text-center">
<button type="submit" class="btn btn-default" id="register"
style="background-color: #4e88ff;color: white;margin-right: 30px;">立即注册
</button>
<button type="reset" class="btn btn-default">重新填写</button>
</div>
</form>
</div>
</div>
</div>
<script src="../js/jquery.js"></script>
<script>
//请求用户名验证
$('#username').blur(function () {
$.post(
'admin/check.php?check=username', 'username=' + $('#username').val(), function (data) {
switch (data.status) {
case 0:
$('div').find('span').remove();
$('#username').after('<span>').next().text(data.msg).addClass('text-warning').prev().focus();
break;
case 1:
$('div').find('span').remove();
$('#username').after('<span>').next().text(data.msg).addClass('text-warning').prev().focus();
break;
case 2:
$('div').find('span').remove();
$('#username').after('<span>').next().text(data.msg).addClass('text-primary');
break;
}
}, 'json')
})
//请求邮箱验证
$('#email').blur(function () {
if ($('#username').val().length == 0) {
return false
}
$.post('admin/check.php?check=email', 'email=' + $('#email').val(), function (data) {
switch (data.status) {
case 0:
$('div').find('span').remove();
$('#email').after('<span>').next().text(data.msg).addClass('text-warning').prev().focus();
break;
case 1:
$('div').find('span').remove();
$('#email').after('<span>').next().text(data.msg).addClass('text-warning').prev().focus();
break;
case 2:
$('div').find('span').remove();
$('#email').after('<span>').next().text(data.msg).addClass('text-primary');
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) {
//清空前一次的提示信息
$('div').find('span').remove();
$('#password1').after('<span>').next().text(data.msg).addClass('text-warning');
//返回调用者
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:
$('div').find('span').remove();
$('#password2').after('<span>').next().text(data.msg).addClass('text-warning').prev().focus();
break;
case 1:
$('div').find('span').remove();
$('#password2').after('<span>').next().text(data.msg).addClass('text-warning').prev().focus();
//确认密码不对,应该将焦点设置到第一次的密码框内
$('#password1').focus()
break;
case 2:
$('div').find('span').remove();
$('#password2').after('<span>').next().text(data.msg).addClass('text-primary');
break;
}
}, 'json')
})
//简介验证
$('#comment').blur(function () {
if ($('#email').val().length == 0 || $('#password1').val().length == 0 || $('#password1').val().length == 0) {
return false
}
$.post('admin/check.php?check=comment', 'comment=' + $('#comment').val(), function (data) {
switch (data.status) {
case 0:
$('div').find('span').remove();
$('#comment').after('<span>').next().text(data.msg).addClass('text-warning').prev().focus();
break;
case 1:
$('div').find('span').remove();
$('#comment').after('<span>').next().text(data.msg).addClass('text-warning').prev().focus();
break;
case 2:
$('div').find('span').remove();
$('#comment').after('<span>').next().text(data.msg).addClass('text-primary');
break;
}
}, 'json')
})
//提交数据
$('#submit').click(function () {
$.post('admin/check.php?check=submit', $('#register').serialize(), function (data) {
$('div').find('span').remove()
alert(data)
}, 'text')
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<?php
switch ($_GET['check']) {
//验证用户名
case 'username':
$username = $_POST['username']; // 设置默认值
if (empty($username)) {
exit(json_encode(['status' => 0, 'msg' => '用户名不能为空']));
} else if (in_array($username, ['admin'])){
exit(json_encode(['status'=>1,'msg'=>'用户名已占用']));
} else {
echo json_encode(['status' => 2, 'msg' => '用户名可用']);
}
break;
//验证邮箱
case 'email':
$email = $_POST['email']; // 设置默认值
if (empty($email)) {
exit(json_encode(['status'=>0,'msg'=>'邮箱不能为空']));
} else if (in_array($email, ['admin@pinli.com','pinli@pinli.com'])){
exit(json_encode(['status'=>1,'msg'=>'邮箱已占用']));
} 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 {
exit(json_encode(['status'=>2,'msg'=>'验证通过']));
}
break;
//简介验证(仅做非空验证)
case 'comment':
$comment = $_POST['comment'];
if (empty($comment)) {
exit(json_encode(['status'=>0,'msg'=>'简介不能为空']));
} else if (mb_strlen(trim($comment)) < 10) {
exit(json_encode(['status'=>1,'msg'=>'长度小于10个字符']));
} else {
exit(json_encode(['status'=>2,'msg'=>'通过']));
}
//提交验证
case 'submit':
//因为数据之前已经全部验证,这里直接返回结果即可
exit('恭喜,注册成功');
}运行实例 »
点击 "运行实例" 按钮查看在线实例
