服务器测试地址：http://116.196.116.164/22/index.php
首页界面代码：
<!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>PHP处理表单验证</title>
<link rel="stylesheet" href="reg.css">
</head>
<body>
<div class="box">
<form action="check.php" method="post">
<fieldset style="border:none ;text-align: -moz-left">
<legend class="reg">注册草榴平台</legend>
<p>
<label for="name">用户名:</label>
<input type="text" name="name" id="name"placeholder="请输入手机号"><span>*</span>
</p>
<p><label>邮 箱:<input type="text" id="email" name="email" placeholder="请输入邮箱"></label></p>
<p>
<label>性 别:<input type="radio" name="gender" value="male">帅哥</label>
<label><input type="radio" name="gender" value="female">美女</label>
</p>
<p><label>年 龄:<select name="age" id="select">
<option value="1">18-25</option>
<option value="2">25-40</option>
<option value="3">40-60</option>
</select>
</label>
</p>
<p>备 注: <textarea name="comments" id="" cols="30" rows="10"></textarea> </p>
</fieldset>
<p align="center"> <input id="tijiao" type="submit" name="submit" value="提交"> </p>
</form>
</div>
<script>
var phone = document.getElementById('name')
phone.onblur = function () {
var xhr =new XMLHttpRequest()
xhr.onreadystatechange =function () {
if (xhr.readyState == 4) {
phone.nextSibling.innerHTML = this.responseText
}
}
var data = '?name='+ phone.value
xhr.open('get','check.php'+data,true)
xhr.send(null)
}
</script>
</body>
</html>验证代码：
<?php
header("Content-type: text/html; charset=utf-8");
$name = isset($_REQUEST['name']) ? $_REQUEST['name'] :null;
if (empty($name)){
echo '<span style="color: #0000FF">请输入手机号</span>';
}else{
if (strlen($name) < 11){
echo '<span style="color: #00a0e9">手机号不符合规定</span>';
}else{
echo '<span style="color:#ff0000">手机号正确</span>';
};
}
$email = isset($_REQUEST['email']) ? $_REQUEST['email'] :null;
if (empty($email)){
echo '<script>alert("邮箱不能为空")</script>';
}else{
echo '<script>alert("您的邮箱是'.$email.'")</script>';
}
$gender = isset($_REQUEST['gender']) ? $_REQUEST['gender'] :null;
switch ($gender){
case "male" :
echo '<script>alert("原来是个小帅哥")</script>';
break;
case "female" :
echo '<script>alert("原来是个小美女")</script>';
break;
default:
echo '<script>alert("没有选择性别")</script>';
}
$age = isset($_REQUEST['age']) ? $_REQUEST['age'] :null;
switch ($age){
case "1" :
echo '<script>alert("年轻人要节制呀")</script>';
break;
case "2" :
echo '<script>alert("正值壮年时")</script>';
break;
default:
echo '<script>alert("慢一点生活")</script>';
}
$comments = isset($_REQUEST['comments']) ? $_REQUEST['comments'] :null;
if (empty($comments)){
echo '<script>alert("没有输入备注")</script>';
}else{
echo '<script>alert("您的备注是:'.$comments.'")</script>';
}CSS代码样式：
body{
margin: 0;
padding: 0;
/*background-color: #53e3a6;*/
background-image: url("http://116.196.116.164/22/bg.jpg");
background-repeat: no-repeat;
}
.box {
width: 600px;
height: 500px;
margin: 100px auto;
padding-top: 10px;
background-color: white;
}
.reg{
color: #5b258e;
font-size: 1.5em;
}
input{
background: #eeeeee0f;
border-radius: 5px;
padding-left: 5px;
border: 1px solid #3a6c7e;
font-size: 100%;
outline: 0;
font-family: Open Sans,Arial,Hiragino Sans GB,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,STHeiti,WenQuanYi Micro Hei,SimSun,sans-serif;
line-height: 1.5;
}
#tijiao{
display: block;
width: 30%;
height: 40px;
background-color: #00a4a0;
border-radius: 5px;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 40px;
}
#select {
font-size: 100%;
border-radius: 5px;
width: 20%;
background: #eeeeee0f;
border-radius: 5px;
padding-left: 5px;
border: 1px solid #3a6c7e;
}