<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例：用php来处理表单</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 button{
width:100px;
height:30px;
border:none;
background-color: cadetblue;
color: white;
font-size: 1.2em;
}
form button:hover{
background-color: orange;
cursor: pointer;
}
</style>
</head>
<body>
<form action="">
<table>
<caption>用户注册</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">确认密码</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">级别</label></td>
<td>
<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>
<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><label for="content">简介：</label></td>
<td>
<textarea name="content" id="content" cols="30" rows="3"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit" name="submint" id="submint" value="submit">提交</button>
</td>
</tr>
</table>
</form>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
//表单数据的验证全部使用ajax，请求类型为POST,但是为了代码的简介，操作类型为GET
//邮箱验证
$('#email').blur(function(){
$.post( 'admin.php?check=email','email='+$('#email').val(),function(data){
switch(data.status){
case 0:
// $('#email').next().remove();
$('td span').remove();
$('#email').after('<span>').next().text(data.msg).css('color','red').prev().focus();
break;
case 1:
// $('#email').next().remove();
$('td span').remove();
$('#email').after('<span>').next().text(data.msg).css('color','red').prev().focus();
break;
case 2:
// $('#email').next().remove();
$('td span').remove();
$('#email').after('<span>').next().text(data.msg).css('color','green');
break;
}
},'json')
})
//密码验证
$('#password1').blur(function(){
if($('#email').val().length ==0){
return false;
}
$.post( 'admin.php?check=password1','password1='+$('#password1').val(),function(data){
if(data.status==0){
// $("#password1").next().remove();
$('td span').remove();
$("#password1").after('<span>').next().text(data.msg).css('color','red').prev().focus();
}
},'json')
})
//确认密码验证
$('#password2').blur(function(){
if($('#email').val().length ==0){
return false;
}
if($('#password1').val().length ==0){
return false;
}
$.post( 'admin.php?check=password2', {
password1:$('#password1').val(),
password2:$('#password2').val(),
},function(data){
if(data.status==0){
$('td span').remove();
$("#password2").after('<span>').next().text(data.msg).css('color','red').prev().focus();
}
if(data.status==1){
$('td span').remove();
$("#password2").after('<span>').next().text(data.msg).css('color','red').prev().focus();
}
if(data.status==2){
$('td span').remove();
$("#password2").after('<span>').next().text(data.msg).css('color','green');
}
},'json')
})
//简介验证
$('#content').blur(function(){
if($('#email').val().length ==0){
return false;
}
if($('#password1').val().length ==0){
return false;
}
if($('#password2').val().length ==0){
return false;
}
$.post( 'admin.php?check=content','content='+$('#content').val(),function(data){
if(data.status==0){
$('td span').remove();
$("#content").after('<span>').next().text(data.msg).css('color','red').prev().focus();
}else if(data.status==1){
$('td span').remove();
$("#content").after('<span>').next().text(data.msg).css('color','red').prev().focus();
}else{
$('td span').remove();
$("#content").after('<span>').next().text(data.msg).css('color','green');
}
},'json')
})
</script>
</body>
</html>
实例
<?php
//通过url中的check值进行判断，决定来验证的字段
//echo $_GET['check'];
//echo '<hr>';
//echo $_POST['email'];
//var_dump($_POST);
//$email = $_POST['email'];
//if($_GET['check'] == 'email'){
// //邮箱不为空，是否已占用，可以使用
//// json_encode('email')
// if(empty($email)){
//// json格式
// exit(json_encode(['status'=>0,'msg'=>'邮箱不能为空']));
// }
//}
switch($_GET['check']){
case 'email':
//post方法传过来的值
$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;
case 'password1':
//post方法传过来的值
$password1 = $_POST['password1'];
if(empty($password1)){
exit(json_encode(['status'=>0,'msg'=>'密码不能为空']));
}
break;
case 'password2':
//确认密码需要与原密码进行相等判断，所以需要取到两者的值
//post方法传过来的值
$password2 = $_POST['password2'];
$password1 = $_POST['password1'];
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 'content':
//post方法传过来的值
$content = $_POST['content'];
if(empty($content)){
exit(json_encode(['status'=>0,'msg'=>'简介不能为空']));
}else{
if(strlen($content)<10){
exit(json_encode(['status'=>1,'msg'=>'长度不能少于10字']));
}else{
exit(json_encode(['status'=>2,'msg'=>'验证通过']));
}
}
break;
default:
break;
}
运行实例 »
点击 "运行实例" 按钮查看在线实例
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
