收藏
批改狀態(tài)：未批改
老師批語(yǔ)：
php加ajax可以實(shí)現(xiàn)前后端表單驗(yàn)證，用戶體驗(yàn)非常友好。
下面用實(shí)例來(lái)演示一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>php表單驗(yàn)證</title>
<style type="text/css">
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 action="admin/check.php" method="post">
<table>
<caption>用戶注冊(cè)</caption>
<tr>
<td><label for="email">郵箱:</label></td>
<td><input type="text" name="email" id="email" autofocus=""></td>
</tr>
<tr>
<td><label for="password1">密碼:</label></td>
<td><input type="password" name="password1" id="password1"></td>
</tr>
<tr>
<td><label for="password2">確認(rèn):</label></td>
<td><input type="password" name="password2" id="password2"></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">級(jí)別</label></td>
<td>
<select name="level" id="level">
<option value="0">小白</option>
<option value="1" selected="">中級(jí)</option>
<option value="2">大神</option>
</select>
</td>
</tr>
<tr>
<td><label for="php">語(yǔ)言:</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="python" value="php"><label for="python">python</label>
<input type="checkbox" name="lang[]" id="c" value="c"><label for="c">c</label>
</td>
</tr>
<tr>
<td valign="middle"><label for="comment">簡(jiǎn)介:</label></td>
<td><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="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 郵箱驗(yàn)證
$('#email').blur(function(){
$.post('check.php?check=email','email='+$('#email').val(),function(data){
switch(data.status){
case 0:
$('td').find('span').remove()
$('#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')
})
//密碼驗(yàn)證
$('#password1').blur(function(){
$.post('check.php?check=password1','password1='+$('#password1').val(),function(data){
switch(data.status){
case 0:
$('td').find('span').remove()
$('#password1').after('<span>').next().text(data.msg).css('color','red')
break;
}
},'json')
})
//確認(rèn)密碼驗(yàn)證
$('#password2').blur(function(){
$.post('check.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')
break;
case 1:
$('td').find('span').remove()
$('#password2').after('<span>').next().text(data.msg).css('color','red')
break;
case 2:
$('td').find('span').remove()
$('#password2').after('<span>').next().text(data.msg).css('color','green')
break;
}
},'json')
})
//文本域驗(yàn)證
$('#comment').blur(function(){
$.post('check.php?check=comment','comment='+$('#comment').val(),function(data){
switch(data.status){
case 0:
$('td').find('span').remove()
$('#comment').after('<span>').next().text(data.msg).css('color','red')
break;
case 1:
$('td').find('span').remove()
$('#comment').after('<span>').next().text(data.msg).css('color','red')
break;
case 2:
$('td').find('span').remove()
$('#comment').after('<span>').next().text(data.msg).css('color','green')
}
},'json')
})
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
check.php代碼如下：
<?php
switch ($_GET['check']) {
//郵箱驗(yàn)證：郵箱不能為空，郵箱不能用已占用的郵箱
case 'email':
$email = $_POST['email'];
if(empty($email)){
exit(json_encode(['status'=>0,'msg'=>'郵箱不能為空']));
}else if (in_array($email, ['admin@php.cn','zhu@php.cn'])) {
exit(json_encode(['status'=>1,'msg'=>'郵箱已被占用']));
}else{
exit(json_encode(['status'=>2,'msg'=>'郵箱可用']));
}
break;
//密碼驗(yàn)證：密碼不能為空
case 'password1':
$password1 = $_POST['password1'];
if(empty($password1)){
exit(json_encode(['status'=>0,'msg'=>'密碼不能為空']));
}
break;
//確認(rèn)密碼驗(yàn)證：確認(rèn)密碼不能為空，而且和密碼要一致
case 'password2':
$password1 = $_POST['password1'];
$password2 = $_POST['password2'];
if(empty($password2)){
exit(json_encode(['status'=>0,'msg'=>'確認(rèn)不能為空']));
}else if ($password1 != $password2) {
exit(json_encode(['status'=>1,'msg'=>'兩次密碼不一致']));
}else{
exit(json_encode(['status'=>2,'msg'=>'密碼可用']));
}
break;
//簡(jiǎn)介驗(yàn)證：簡(jiǎn)介不能為空，簡(jiǎn)介不少于10個(gè)字，10個(gè)字就是30個(gè)字節(jié)
case 'comment':
$comment = $_POST['comment'];
if(empty($comment)){
exit(json_encode(['status'=>0,'msg'=>'簡(jiǎn)介不能為空']));
}else if (strlen($comment)<30) {
exit(json_encode(['status'=>1,'msg'=>'簡(jiǎn)介不少于10個(gè)字']));
}else{
exit(json_encode(['status'=>2,'msg'=>'簡(jiǎn)介符合要求']));
}
}運(yùn)行結(jié)果：
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)