Collection
Collection
将课堂上的表单验证的后半部分，独立完成。
1. 性别验证；
2. 年龄验证;
注册表单 html文件
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<link rel="stylesheet" href="dist/css/bootstrap.css">-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<title>注册</title>
</head>
<body>
<!--设置表单-->
<form action="check.php" method="post">
<fieldset>
<legend>注册</legend>
<p> <label >用户：<input type="text" name="name"></label><span>*</span></p>
<p> <label >密码：<input type="password" name="password"></label><span>*</span></p>
<p> <label >邮箱：<input type="text" name="email"></label><span>*</span></p>
<p> 性别：<label ><input type="radio" name="gender" value="male" checked>男</label>
<label ><input type="radio" name="gender" value="remale">女</label></p>
<p> <label >年龄：<input type="text" name="age"></label><span>*</span></p>
<p><label >备注：<textarea rows="10" cols="30" name="comment"></textarea></label></p>
</fieldset>
<p><input type="submit" value="提交" name="submit"></p>
</form>
<script>
var input=document.getElementsByTagName('input')[0]
// input.onblur=function () {
// $.ajax({
//
// })
// alert(input.value)
// alert($('input')[0].value)
//验证用户名
$($('input')[0]).on('blur',function () {
// alert($('input')[0].value)
$.ajax({
type:'POST',
url:'check.php',
data:{name:$('input')[0].value},
datastyle:'html',
success:function (data,status) {
// alert(data)
$('span')[0].innerHTML=data
}
})
})
//验证密码
$($('input')[1]).on('blur',function () {
// alert($('input')[1].value)
$.ajax({
type:'POST',
url:'check.php',
data:{password:$('input')[1].value},
datastyle:'html',
success:function (data,status) {
// alert(data)
$('span')[1].innerHTML=data
}
})
})
//邮箱验证
$($('input')[2]).on('blur',function () {
// alert($('input')[1].value)
$.ajax({
type:'POST',
url:'check.php',
data:{email:$('input')[2].value},
datastyle:'html',
success:function (data,status) {
// alert(data)
$('span')[2].innerHTML=data
}
})
})
//年龄验证
$($('input')[5]).on('blur',function () {
// alert($('input')[1].value)
$.ajax({
type:'POST',
url:'check.php',
data:{age:$('input')[5].value},
datastyle:'html',
success:function (data,status) {
// alert(data)
$('span')[3].innerHTML=data
}
})
})
</script>
</body>
</html>check.php 文件
<?php
//print_r($_REQUEST);
//echo $_REQUEST['name'];
header("Content-type: text/html; charset=utf-8");
$info=null;
//检验用户名
if(isset($_REQUEST['name'])) {
if (empty($_REQUEST['name'])) {$info.= '请输入用户名<br>'; /*$_REQUEST['name']='请输入用户名<br>';*/}
elseif (strlen($_REQUEST['name'])<4) $info.='用户名不少于4个字符<br>';
}
//检验密码
if(isset($_REQUEST['password'])) {
if (empty($_REQUEST['password'])) $info.= '请输入密码<br>';
elseif (strlen($_REQUEST['password'])<8) $info.='请输入不少于8位数的密码<br>';
}
//检验邮箱
if(isset($_REQUEST['email'])) {
if (empty($_REQUEST['email'])) $info.= '请输入邮箱<br>';
//循环检验邮箱里是否包含@字符
else{
for ($i=0;$i<strlen($_REQUEST['email']);$i++) {
if ($_REQUEST['email'][$i]=='@') break;
elseif ($i>=(strlen($_REQUEST['email'])-1)) $info.='请输入正确的邮箱<br>';
}
}
}
//检验性别
//if(isset($_REQUEST['gender'])) {
// if (empty($_REQUEST['gender'])) $info .= '选择性别<br>';
//}else $info .= '请选择性别<br>';
//检验年龄
if(isset($_REQUEST['age'])) {
if (empty($_REQUEST['age'])) $info.= '请输入年龄<br>';
elseif ((int)$_REQUEST['age']>150||(int)$_REQUEST['age']<18) $info.='年龄18-150<br>';
}
if ($info) echo $info;
else echo '√';