1.作业要求:循环遍历、数组指针和表单验证
2.完成思路:编写一个表单验证程序,并在后台验证完毕后用循环控制和数组指针函数来遍历关联数组
3.运行效果图
3.1按表单要求填写数据
3.2不符合表单要求的数据
用户名字符数超标
两次密码不一致4.代码
4.1前端页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<span>用户注册</span>
<form action="text.php" method="post" id="reg" name="reg">
<span>
<span>
<label for="username">用户名:</label>
<input type="text" name="username" id="username" placeholder="请输入用户名"
autocomplete="off" list="usernamelist" form="reg" required autofocus>
<label for="username">不超过20个字符</label>
<datalist id="usernamelist">
<option value="小张">小张</option>
<option value="小李">小李</option>
<option value="小王">小王</option>
<option value="小赵">小赵</option>
</datalist>
</span>
<span>
<label for="password1">密码:</label>
<input type="password" name="password1" id="password1" placeholder="请输入密码" form="reg" required autofocus>
<label for="password1">不少于8位</label>
</span>
<span>
<label for="password">重复密码:</label>
<input type="password" name="password" id="password" placeholder="请重复密码" required autofocus>
<label for="password">两次密码必须一致</label>
</span>
<span>
<label for="age">年龄:</label>
<input type="number" name="age" id="age" min="18" max="99" step="1" value="20" >
</span>
<span>
<label for="opa">职业:</label>
<select id="opa" name="opa" form="reg">
<option value="1">公务员</option>
<option value="2">农民</option>
<option value="3">工人</option>
<option value="4" selected>其他</option>
</select>
</span>
<span>
<label for="male">性别:</label>
<input type="radio" name="sex" id="male" value="male" required autofocus><label for="male">男</label>
<input type="radio" name="sex" id="female" value="female" required autofocus><label for="female">女</label>
<input type="radio" name="sex" id="secret" value="secret" checked required autofocus><label for="male">保密</label>
</span>
<span>
<label for="php">兴趣:</label>
<input type="checkbox" name="like[]" id="php" value="php" checked><label for="php">PHP</label>
<input type="checkbox" name="like[]" id="html" value="html" ><label for="html">HTML</label>
<input type="checkbox" name="like[]" id="css" value="css" ><label for="css">CSS</label>
<input type="checkbox" name="like[]" id="js" value="js" checked><label for="js">JavaScript</label>
</span>
</span>
</form>
<span><button form="reg" >提 交</button></span>
</div>
</body>
</html>
4.2前端样式代码
* {
margin: 0;
padding: 0;
/*outline: 1px solid beige;*/
}
body {
margin: 30px auto;
width: 410px;
}
.container {
display: flex;
flex-flow: column nowrap;
width: 410px;
height: 400px;
padding: 20px;
box-sizing: border-box;
background-color: #28ade6;
border-radius: 10px;
justify-content: center;
color: beige;
box-shadow: 0 0 8px #8a949f;
/*align-items: center;*/
}
/*设置标题样式*/
.container > span:first-child {
width: 85px;
align-self: center;
font-size: 20px;
font-weight: 800;
margin-bottom: 10px;
color: beige;
}
/*设置表单样式*/
form > span{
display: flex;
flex-flow: column nowrap;
}
form > span > span {
display: flex;
flex-flow: row nowrap;
position: relative;
align-items: center;
justify-content: space-between;
height: 35px;
}
input {
width: 150px;
height: 20px;
/*padding: 10px;*/
box-sizing: border-box;
border-radius: 2px;
border: none;
}
form > span span:first-of-type{
position: relative;
}
form > span span:first-of-type input{
position: absolute;
left:80px;
}
form > span span:first-of-type label:first-of-type{
width:80px;
}
form > span span:first-of-type label:last-of-type{
width: 140px;
padding-left: 5px;
box-sizing: border-box;
font-size: 12px;
}
form > span span:nth-of-type(2){
position: relative;
}
form > span span:nth-of-type(2) input{
position: absolute;
left:80px;
}
form > span span:nth-of-type(2) label:first-of-type{
width:80px;
}
form > span span:nth-of-type(2) label:last-of-type{
width: 140px;
padding-left: 5px;
box-sizing: border-box;
font-size: 12px;
}
form > span span:nth-of-type(3){
position: relative;
}
form > span span:nth-of-type(3) input{
position: absolute;
left:80px;
}
form > span span:nth-of-type(3) label:first-of-type{
width:80px;
}
form > span span:nth-of-type(3) label:last-of-type{
width: 140px;
padding-left: 5px;
box-sizing: border-box;
font-size: 12px;
/*color: gray;*/
}
form > span span:nth-of-type(4){
position: relative;
}
form > span span:nth-of-type(4) input{
position: absolute;
left:80px;
}
form > span span:nth-of-type(4) label:first-of-type{
width:80px;
}
form > span span:nth-of-type(5){
position: relative;
}
form > span span:nth-of-type(5) select{
position: absolute;
left:80px;
width: 150px;
height: 20px;
/*padding: 10px;*/
box-sizing: border-box;
border-radius: 2px;
border: none;
}
form > span span:nth-of-type(5) label:first-of-type{
width:80px;
}
form > span span:nth-of-type(6){
position: relative;
display: flex;
justify-content: flex-start;
}
form > span span:nth-of-type(6) input {
width: 10px;
margin-left: 10px;
margin-right: 5px;
}
form > span span:nth-of-type(6) label:nth-of-type(1){
width:80px;
}
form > span span:nth-of-type(6) label:nth-of-type(2),
form > span span:nth-of-type(6) label:nth-of-type(3),
form > span span:nth-of-type(6) label:nth-of-type(4)
{
width:40px;
font-size: 12px;
}
form > span span:nth-of-type(7){
position: relative;
display: flex;
justify-content: flex-start;
}
form > span span:nth-of-type(7) input {
width: 10px;
margin-left: 10px;
margin-right: 5px;
}
form > span span:nth-of-type(7) label:nth-of-type(1){
width:80px;
}
form > span span:nth-of-type(7) label:nth-of-type(2),
form > span span:nth-of-type(7) label:nth-of-type(3),
form > span span:nth-of-type(7) label:nth-of-type(4),
form > span span:nth-of-type(7) label:nth-of-type(5)
{
width:40px;
font-size: 12px;
}
/*设置提交按钮样式*/
.container > span:last-of-type{
width: 370px;
margin-top: 15px;
}
.container > span:last-of-type button{
width: 370px;
height: 25px;
border-radius: 10px;
border: none;
color: #28ade6;
font-size: 16px;
background-color: #ffffff;
}
.container > span:last-of-type button:hover {
cursor: pointer;
box-shadow: 0 0 10px #8a949f;
}
4.3后台页面代码
<?php
//判断请求方法的类型
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
echo '用POST传送的数据:' . '<br>';
//测试数据是否为空
if (!empty($_POST['username'])) {
$userName = trim($_POST['username'], '\n');//用trim函数去除多余的空格
}
if (!empty($_POST['password1'])) $userPassword1 = $_POST['password1'];
if (!empty($_POST['password'])) $userPassword = $_POST['password'];
if (!empty($_POST['age'])) $userAge = $_POST['age'];
if (!empty($_POST['opa'])) $userWork = $_POST['opa'];
if (!empty($_POST['sex'])) $userGender = $_POST['sex'];
if (!empty($_POST['like'])) $userLikes = $_POST['like'];
//用switch分支将性别由数值转换成字符串
switch (true) {
case $userGender == 'male':
$userGender = '先生';
break;
case $userGender == 'female' :
$userGender = '女士';
break;
default:
$userGender = '先生/女士';
}
//用if分支测试数据是否符合要求
if (strlen($userName) > 20) {
echo '用户名字符数量超过20个,请重填' . '<br>';
} elseif ($userPassword !== $userPassword1) {
echo '两次密码不一致' . '<br>';
} elseif (strlen($userPassword) < 8) {
echo '密码少于8位' . '<br>';
} else {
$userPassword = md5($userPassword);
echo $userName . $userGender . '<br>';
echo '您加密前的密码是:' . $userPassword1 . '<br>';
echo '您加密后的密码是:' . $userPassword . '<br>';
}
//用switch分支查看工作类型并输出
switch ($userWork) {
case 1:
$userWork = '公务员';
echo '您的职业是' . $userWork . '<br>';
break;
case 2:
$userWork = '农民';
echo '您的职业是' . $userWork . '<br>';
break;
case 3:
$userWork = '工人';
echo '您的职业是' . $userWork . '<br>';
break;
default:
$userWork = '其他';
echo '您的职业是' . $userWork . '<br>';
}
//用count()查看爱好数组的元素个数
echo '您的爱好有:' . count($userLikes) . '个' . '<br>';
//用foreach循环遍历爱好数组的值并输出
foreach ($userLikes as $userLike) {
echo $userLike . '<br>';
}
//用数组指针函数遍历post数组中的值
echo '<hr>从前向后用for循环遍历$_POST' . '<br>';
reset($_POST);
for ($i = 0; $i < count($_POST); $i++) {
$a = current($_POST);
$b = key($_POST);
echo $b . '------->' . print_r($a, true) . '<br>';
next($_POST);
}
echo '<hr>从后向前用while循环遍历$_POST数组' . '<br>';
reset($_POST);
end($_POST);
$i = 0;
while ($i < count($_POST)) {
$a = current($_POST);
$b = key($_POST);
echo $b . '------->' . print_r($a, true) . '<br>';
prev($_POST);
$i++;
}
} else {
echo '用GET传送的数据' . '<br>';
}
5.知识点总结
5.1for循环
用于预先知道脚步需要运行的次数的情况
循环执行代码指定的次数,或者当指定条件为真时循环执行代码块
例:
<?php
for ($i = 0; $i < count($_POST); $i++) {
$a = current($_POST);
$b = key($_POST);
echo $b . '------->' . print_r($a, true) . '<br>';
next($_POST);
}
5.2while循环
while循环将重复执行代码块,直到指定的条件不成立
通常判断条件的初始化应在while之前,在执行的代码块中应有判断条件的更新
有入口判断型(while)和出口判断(do……while)型两种,其中出口判断型中的代码块,不论条件真假,至少会运行一次
例:
<?php
$i = 0;
while ($i < count($_POST)) {
$a = current($_POST);
$b = key($_POST);
echo $b . '------->' . print_r($a, true) . '<br>';
prev($_POST);
$i++;
}
5.3数组指针
移动数组指针的操作next()
向后移动,同时会获得当前元素的值prev()
向前移动,同时会获得当前元素的值end()
移动到最后一个元素,并获得它的值reset()
移动到第一个元素,并获得它的值
获取指针指向元素信息的操作key()
获得当前数组指针指向元素的键current()
获得当前数组指针指向元素的值
5.4表单验证
$_SERVER[]
获取全局信息,里面包含传递信息的方法等$_POST[]
用post方法传递过来的信息$_GET[]
用get方法传递过来的信息empty()
判断传递过来的值是否为空count()
判断数组元素个数strlen()
判断字符串长度md5()
产生32位加密字符串