Collection
Collection
![[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">
<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>Document</title>
<!--引入bootstrap的样式表-->
<link rel="stylesheet" href="dist/css/bootstrap.css">
<!--引入jQuery库-->
<script src="dist/js/jquery-3.2.1.js"></script>
<!--引入bootstrap脚本js-->
<script src="dist/js/bootstrap.js"></script>
<style>
.list{
margin-top: 20px;
padding-top: 20px ;
border: 1px #2aabd2 solid;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 list">
<form class="form-horizontal" action="checks.php" method="post">
<div class="form-group">
<label for="inputName" class="col-sm-3 control-label">用户名：</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputName" name="name" placeholder="请输入您的用户名">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-3 control-label">密码：</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword" name="password" placeholder="请输入您的密码">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-3 control-label">邮箱：</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail" name="email" placeholder="请输入您的邮箱">
</div>
</div>
<div class="form-group">
<div class="col-sm-3 control-label" ><b>性别：</b></div>
<div class="col-sm-9">
<label class="radio-inline">
<input type="radio" name="gender" id="inlineRadio1" value="male" > 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="inlineRadio2" value="female"> 女
</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-3 control-label" ><b>年龄：</b></div>
<div class="col-sm-9">
<select class="form-control" name="age">
<option value="0">请选择你的年龄段</option>
<option value="1">31岁以下</option>
<option value="2">31-40岁</option>
<option value="3">41-50岁</option>
<option value="4">51-60岁</option>
<option value="5">60以上</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-3 control-label"><b>备注：</b></div>
<div class="col-sm-9">
<textarea class="form-control" name="beizhu" rows="3"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-5 col-sm-10">
<button type="submit" class="btn btn-primary" name="submit" value="submit">提交</button>
</div>
</div>
</form>
</div>
<div class="col-md-4"></div>
</div>
</div>
</body>
</html><?php
//防止乱码,把编码格式设置为utf-8
header('content-type:text/html;charset=utf-8');
//验证用户名
//用isset()检测一个文本框是否有内容时,存在且不为null,返回true,无输入则是空字符,满足存在且不为null
//如果当前用户无任何输入，会给$name贱空字符串
//通过$_REQUEST全局变量来获取用户填写的信息,不管是GET，POST都可以接收
$name = isset($_REQUEST['name']) ? $_REQUEST['name'] : null;
// empty()这个需要反着记忆,只要是非空或非零,全部返回false,否则返回true
//这7种情况返回true:''空串,0数字零,'0'字符零,false布尔假(也为空),[ ]空数组,$name未初始化,未声明的(会报警)
if(empty($name)){
echo '<script>alert("您没有输入用户名~~")</script>';
}else{
echo '<script>alert("您的用户名是:'.$name.'")</script>';
}
//验证密码
$password = isset($_REQUEST['password']) ? $_REQUEST['password'] : null;
if(empty($password)){
echo '<script>alert("您没有输入密码~~")</script>';
}else{
echo '<script>alert("您输入的密码是:'.$password.'")</script>';
}
//验证邮箱
$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;
//如果用户没有选择,那么会返回null
if (is_null($gender)) {
echo '<script>alert("您没有选择性别~~")</script>';
} else {
if ($gender == 'male') {
echo '<script>alert("您的性别是:男")</script>';
} elseif ($gender == 'female') {
echo '<script>alert("您的性别是:女")</script>';
} else {
echo '<script>alert("选择有误~~");</script>';
}
}
//判断年龄
$age =$_REQUEST['age'];
if($age=='1'){
echo '<script>alert("您的年龄段是:31岁及以下")</script>';
}elseif ($age=='2'){
echo '<script>alert("您的年龄段是:31-40岁")</script>';
}elseif ($age=='3'){
echo '<script>alert("您的年龄段是:41-50岁")</script>';
}elseif ($age=='4'){
echo '<script>alert("您的年龄段是:51-60岁")</script>';
}elseif ($age=='5'){
echo '<script>alert("您的年龄段是:60岁及以上")</script>';
}else{
echo '<script>alert("请选择您的年龄")</script>';
$age = false;
}
//判断备注
$beizhu = isset($_REQUEST['beizhu'])? $_REQUEST['beizhu']:null;
if (empty($beizhu)) {
echo '<script>alert("您没有输入备注信息~~")</script>';
} else {
echo '<script>alert("您的备注信息是:'.$beizhu.'")</script>';
}
//只有当所有的验证都通过的情况下才会验证成功跳转新页面
if ($name&&$password&&$email&&$gender&&$age&&$beizhu) {
echo '<script>alert("验证通过~~");location.href="success.php";</script>';
} else {
echo '<script>alert("验证失败,请检查~~");location.href="form.php"</script>';
}
