功能描述
用户输入邮箱判断是否为空，是否符合邮箱正则，邮箱是否已注册
输入密码不能为空，长度为6--10位
验证密码不能为空，需要和第一次密码相等
当所有资料按照要求填写完后，用户可以提交到后台，完成用户注册
HTML代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP+AJAX表单验证</title>
<style>
table {
background-color: wheat;
box-shadow: 3px 3px 3px #888;
border-radius: 3%;
padding: 15px;
margin: 30px auto;
}
table td {
padding: 8px;
}
table caption {
font-size: 1.5em;
margin-bottom: 10px;
}
textarea {
resize: none;
}
form table button {
width: 100px;
height: 30px;
cursor: pointer;
border: none;
background-color: skyblue;
color: white;
}
form table button:hover {
background-color: orangered;
color: white;
font-size:1.1em;
}
</style>
</head>
<body>
<form>
<table>
<caption>用户注册</caption>
<tr>
<td><label for="email">邮箱：</label></td>
<td><input type="text" name="email" id="email" value="" autofocus=""></td>
</tr>
<tr>
<td><label for="password1">密码：</label></td>
<td><input type="password" name="password1" id="password1" value=""></td>
</tr>
<tr>
<td><label for="password2">确认：</label></td>
<td><input type="password" name="password2" id="password2" value=""></td>
</tr>
<tr>
<td><label for="secret">性别：</label></td>
<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>
<input type="radio" name="gender" id="secret" value="secret" checked ><label for="secret">保密</label>
</td>
</tr>
<tr>
<td><label for="level">级别：</label></td>
<td>
<select name="level" id="level>
<option value="0">小白</option>
<option value="1" selected>初级</option>
<option value="2">中级</option>
<option value="3">高级</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="php">语言：</label>
</td>
<td>
<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="c" value="c"><label for="c">C</label>
<input type="checkbox" name="lang[]" id="python" value="python"><label for="python">python</label>
</td>
</tr>
<tr>
<td colspan="2" align="center"><button type="submit" value="提交" id="submit">提交</button></td>
</tr>
</table>
</form>
<div id="data"></div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// 验证邮箱是否正确
$('#email').blur(function () {
$.post('admin/check.php?check=email','email='+$('#email').val(),function (data) {
switch (data.status){
case 'success':
$('td').find('span').remove()
$('#email').after('<span>').next().text(data.msg).css('color', 'green')
break
default:
$('td').find('span').remove()
$('#email').after('<span>').next().text(data.msg).css('color', 'red').prev().focus()
break;
}
},'json')
})
//验证是否输入密码，并且长度为6--10位之间
$('#password1').blur(function () {
if($('#email').val().length == 0){
return false
}
$.post('admin/check.php?check=password1','password1='+$('#password1').val(),function (data) {
if(data.status == 'error'){
$('td').find('span').remove()
$('#password1').after('<span>').next().text(data.msg).css('color', 'red').prev().focus()
}
},'json')
})
//验证二次密码是否相等
$('#password2').blur(function () {
if($('#email').val().length == 0 || $('#password1').val().length == 0){
return false
}else if($('#password1').val().length < 6 || $('#password1').val().length > 10) {
return false
}
$.post('admin/check.php?check=password2',{
password1:$('#password1').val(),
password2:$('#password2').val()
},function (data) {
if(data.status == 'error'){
$('td').find('span').remove()
$('#password2').after('<span>').next().text(data.msg).css('color', 'red').prev().focus()
}else{
$('td').find('span').remove()
$('#password2').after('<span>').next().text(data.msg).css('color', 'green')
}
},'json')
})
//提交所有数据到后台
$('#submit').on('click',function () {
$.post('admin/check.php?check=submit',{
email:$('#email').val(),
password1:$('#password1').val(),
gender:$('#gender').val(),
level:$('#level').val(),
lang:$("input[name='lang']:checked").val()
},function (data) {
console.log(data)
},'json')
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
PHP后台代码实例
<?php
/*
* Created by PhpStorm.
* User: Administrator
* Date: 2018\4\16 0016
* Time: 22:59
*/
$check = $_GET['check'];
if(!empty($check)){
switch ($check){
//校验邮箱
case 'email':
$email = $_POST['email'];
$pattern = "/^([0-9A-Za-z\\-_\\.]+)@([0-9a-z]+\\.[a-z]{2,3}(\\.[a-z]{2})?)$/i";
if(empty($email)){//验证邮箱是否为空
exit(json_encode(['status'=>'error','msg'=>'邮箱不能为空']));
}
elseif (!preg_match($pattern,$email)){//验证邮箱格式是否正确
exit(json_encode(['status'=>'error','msg'=>'邮箱格式错误']));
}elseif (in_array($email,['alan@php.cn','11@php.cn'])){//查看邮箱是否被注册
exit(json_encode(['status'=>'error','msg'=>'邮箱已占用']));
}else{
exit(json_encode(['status'=>'success','msg'=>'验证通过']));
}
break;
//验证密码1是否为空
case 'password1':
$password1 = $_POST['password1'];
if(empty($password1)){//验证密码1是否为空
exit(json_encode(['status'=>'error','msg'=>'密码不能为空']));
}elseif (strlen($password1) <6 || strlen($password1) >10){
exit(json_encode(['status'=>'error','msg'=>'密码为6-10位']));
}
break;
//校验密码2是否为空并且是否和密码1相等
case 'password2':
$password1 = $_POST['password1'];
$password2 = $_POST['password2'];
if(empty($password2)){//验证密码2是否为空
exit(json_encode(['status'=>'error','msg'=>'验证不能为空']));
}elseif ($password1 != $password2){//验证确认密码和第一次密码是否相等
exit(json_encode(['status'=>'error','msg'=>'二次密码不相等']));
}else{
exit(json_encode(['status'=>'success','msg'=>'验证通过']));
}
break;
//获取要用户提交数据
case 'submit':
$email = $_POST['email'];
$password1 = $_POST['password1'];
$password2 = $_POST['password2'];
$gender = $_POST['gender'];
$level = $_POST['level'];
$lang = $_POST['lang'];
$arr = [];
$arr['email'] = $email;
$arr['password1'] = $password1;
$arr['gender'] = $gender;
$arr['level'] = $level;
$arr['lang'] = $lang;
exit(json_encode(['status'=>'success','data'=>$arr]));
break;
default:
exit(json_encode(['status'=>'error','msg'=>'其他错误']));
}
}运行实例 »
点击 "运行实例" 按钮查看在线实例
