登录  /  注册
博主信息
博文 22
粉丝 1
评论 0
访问量 19166
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
0108作业-PHP数组指针、循环控制和登录表单的验证-php培训十期线上班
Dseven
原创
645人浏览过

1.作业要求:循环遍历、数组指针和表单验证

2.完成思路:编写一个表单验证程序,并在后台验证完毕后用循环控制和数组指针函数来遍历关联数组

3.运行效果图

3.1按表单要求填写数据

3.2不符合表单要求的数据

用户名字符数超标

两次密码不一致

4.代码

4.1前端页面代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <div class="container">
  9. <span>用户注册</span>
  10. <form action="text.php" method="post" id="reg" name="reg">
  11. <span>
  12. <span>
  13. <label for="username">用户名:</label>
  14. <input type="text" name="username" id="username" placeholder="请输入用户名"
  15. autocomplete="off" list="usernamelist" form="reg" required autofocus>
  16. <label for="username">不超过20个字符</label>
  17. <datalist id="usernamelist">
  18. <option value="小张">小张</option>
  19. <option value="小李">小李</option>
  20. <option value="小王">小王</option>
  21. <option value="小赵">小赵</option>
  22. </datalist>
  23. </span>
  24. <span>
  25. <label for="password1">密码:</label>
  26. <input type="password" name="password1" id="password1" placeholder="请输入密码" form="reg" required autofocus>
  27. <label for="password1">不少于8位</label>
  28. </span>
  29. <span>
  30. <label for="password">重复密码:</label>
  31. <input type="password" name="password" id="password" placeholder="请重复密码" required autofocus>
  32. <label for="password">两次密码必须一致</label>
  33. </span>
  34. <span>
  35. <label for="age">年龄:</label>
  36. <input type="number" name="age" id="age" min="18" max="99" step="1" value="20" >
  37. </span>
  38. <span>
  39. <label for="opa">职业:</label>
  40. <select id="opa" name="opa" form="reg">
  41. <option value="1">公务员</option>
  42. <option value="2">农民</option>
  43. <option value="3">工人</option>
  44. <option value="4" selected>其他</option>
  45. </select>
  46. </span>
  47. <span>
  48. <label for="male">性别:</label>
  49. <input type="radio" name="sex" id="male" value="male" required autofocus><label for="male"></label>
  50. <input type="radio" name="sex" id="female" value="female" required autofocus><label for="female"></label>
  51. <input type="radio" name="sex" id="secret" value="secret" checked required autofocus><label for="male">保密</label>
  52. </span>
  53. <span>
  54. <label for="php">兴趣:</label>
  55. <input type="checkbox" name="like[]" id="php" value="php" checked><label for="php">PHP</label>
  56. <input type="checkbox" name="like[]" id="html" value="html" ><label for="html">HTML</label>
  57. <input type="checkbox" name="like[]" id="css" value="css" ><label for="css">CSS</label>
  58. <input type="checkbox" name="like[]" id="js" value="js" checked><label for="js">JavaScript</label>
  59. </span>
  60. </span>
  61. </form>
  62. <span><button form="reg" >提 交</button></span>
  63. </div>
  64. </body>
  65. </html>

4.2前端样式代码

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. /*outline: 1px solid beige;*/
  5. }
  6. body {
  7. margin: 30px auto;
  8. width: 410px;
  9. }
  10. .container {
  11. display: flex;
  12. flex-flow: column nowrap;
  13. width: 410px;
  14. height: 400px;
  15. padding: 20px;
  16. box-sizing: border-box;
  17. background-color: #28ade6;
  18. border-radius: 10px;
  19. justify-content: center;
  20. color: beige;
  21. box-shadow: 0 0 8px #8a949f;
  22. /*align-items: center;*/
  23. }
  24. /*设置标题样式*/
  25. .container > span:first-child {
  26. width: 85px;
  27. align-self: center;
  28. font-size: 20px;
  29. font-weight: 800;
  30. margin-bottom: 10px;
  31. color: beige;
  32. }
  33. /*设置表单样式*/
  34. form > span{
  35. display: flex;
  36. flex-flow: column nowrap;
  37. }
  38. form > span > span {
  39. display: flex;
  40. flex-flow: row nowrap;
  41. position: relative;
  42. align-items: center;
  43. justify-content: space-between;
  44. height: 35px;
  45. }
  46. input {
  47. width: 150px;
  48. height: 20px;
  49. /*padding: 10px;*/
  50. box-sizing: border-box;
  51. border-radius: 2px;
  52. border: none;
  53. }
  54. form > span span:first-of-type{
  55. position: relative;
  56. }
  57. form > span span:first-of-type input{
  58. position: absolute;
  59. left:80px;
  60. }
  61. form > span span:first-of-type label:first-of-type{
  62. width:80px;
  63. }
  64. form > span span:first-of-type label:last-of-type{
  65. width: 140px;
  66. padding-left: 5px;
  67. box-sizing: border-box;
  68. font-size: 12px;
  69. }
  70. form > span span:nth-of-type(2){
  71. position: relative;
  72. }
  73. form > span span:nth-of-type(2) input{
  74. position: absolute;
  75. left:80px;
  76. }
  77. form > span span:nth-of-type(2) label:first-of-type{
  78. width:80px;
  79. }
  80. form > span span:nth-of-type(2) label:last-of-type{
  81. width: 140px;
  82. padding-left: 5px;
  83. box-sizing: border-box;
  84. font-size: 12px;
  85. }
  86. form > span span:nth-of-type(3){
  87. position: relative;
  88. }
  89. form > span span:nth-of-type(3) input{
  90. position: absolute;
  91. left:80px;
  92. }
  93. form > span span:nth-of-type(3) label:first-of-type{
  94. width:80px;
  95. }
  96. form > span span:nth-of-type(3) label:last-of-type{
  97. width: 140px;
  98. padding-left: 5px;
  99. box-sizing: border-box;
  100. font-size: 12px;
  101. /*color: gray;*/
  102. }
  103. form > span span:nth-of-type(4){
  104. position: relative;
  105. }
  106. form > span span:nth-of-type(4) input{
  107. position: absolute;
  108. left:80px;
  109. }
  110. form > span span:nth-of-type(4) label:first-of-type{
  111. width:80px;
  112. }
  113. form > span span:nth-of-type(5){
  114. position: relative;
  115. }
  116. form > span span:nth-of-type(5) select{
  117. position: absolute;
  118. left:80px;
  119. width: 150px;
  120. height: 20px;
  121. /*padding: 10px;*/
  122. box-sizing: border-box;
  123. border-radius: 2px;
  124. border: none;
  125. }
  126. form > span span:nth-of-type(5) label:first-of-type{
  127. width:80px;
  128. }
  129. form > span span:nth-of-type(6){
  130. position: relative;
  131. display: flex;
  132. justify-content: flex-start;
  133. }
  134. form > span span:nth-of-type(6) input {
  135. width: 10px;
  136. margin-left: 10px;
  137. margin-right: 5px;
  138. }
  139. form > span span:nth-of-type(6) label:nth-of-type(1){
  140. width:80px;
  141. }
  142. form > span span:nth-of-type(6) label:nth-of-type(2),
  143. form > span span:nth-of-type(6) label:nth-of-type(3),
  144. form > span span:nth-of-type(6) label:nth-of-type(4)
  145. {
  146. width:40px;
  147. font-size: 12px;
  148. }
  149. form > span span:nth-of-type(7){
  150. position: relative;
  151. display: flex;
  152. justify-content: flex-start;
  153. }
  154. form > span span:nth-of-type(7) input {
  155. width: 10px;
  156. margin-left: 10px;
  157. margin-right: 5px;
  158. }
  159. form > span span:nth-of-type(7) label:nth-of-type(1){
  160. width:80px;
  161. }
  162. form > span span:nth-of-type(7) label:nth-of-type(2),
  163. form > span span:nth-of-type(7) label:nth-of-type(3),
  164. form > span span:nth-of-type(7) label:nth-of-type(4),
  165. form > span span:nth-of-type(7) label:nth-of-type(5)
  166. {
  167. width:40px;
  168. font-size: 12px;
  169. }
  170. /*设置提交按钮样式*/
  171. .container > span:last-of-type{
  172. width: 370px;
  173. margin-top: 15px;
  174. }
  175. .container > span:last-of-type button{
  176. width: 370px;
  177. height: 25px;
  178. border-radius: 10px;
  179. border: none;
  180. color: #28ade6;
  181. font-size: 16px;
  182. background-color: #ffffff;
  183. }
  184. .container > span:last-of-type button:hover {
  185. cursor: pointer;
  186. box-shadow: 0 0 10px #8a949f;
  187. }

4.3后台页面代码

  1. <?php
  2. //判断请求方法的类型
  3. if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  4. echo '用POST传送的数据:' . '<br>';
  5. //测试数据是否为空
  6. if (!empty($_POST['username'])) {
  7. $userName = trim($_POST['username'], '\n');//用trim函数去除多余的空格
  8. }
  9. if (!empty($_POST['password1'])) $userPassword1 = $_POST['password1'];
  10. if (!empty($_POST['password'])) $userPassword = $_POST['password'];
  11. if (!empty($_POST['age'])) $userAge = $_POST['age'];
  12. if (!empty($_POST['opa'])) $userWork = $_POST['opa'];
  13. if (!empty($_POST['sex'])) $userGender = $_POST['sex'];
  14. if (!empty($_POST['like'])) $userLikes = $_POST['like'];
  15. //用switch分支将性别由数值转换成字符串
  16. switch (true) {
  17. case $userGender == 'male':
  18. $userGender = '先生';
  19. break;
  20. case $userGender == 'female' :
  21. $userGender = '女士';
  22. break;
  23. default:
  24. $userGender = '先生/女士';
  25. }
  26. //用if分支测试数据是否符合要求
  27. if (strlen($userName) > 20) {
  28. echo '用户名字符数量超过20个,请重填' . '<br>';
  29. } elseif ($userPassword !== $userPassword1) {
  30. echo '两次密码不一致' . '<br>';
  31. } elseif (strlen($userPassword) < 8) {
  32. echo '密码少于8位' . '<br>';
  33. } else {
  34. $userPassword = md5($userPassword);
  35. echo $userName . $userGender . '<br>';
  36. echo '您加密前的密码是:' . $userPassword1 . '<br>';
  37. echo '您加密后的密码是:' . $userPassword . '<br>';
  38. }
  39. //用switch分支查看工作类型并输出
  40. switch ($userWork) {
  41. case 1:
  42. $userWork = '公务员';
  43. echo '您的职业是' . $userWork . '<br>';
  44. break;
  45. case 2:
  46. $userWork = '农民';
  47. echo '您的职业是' . $userWork . '<br>';
  48. break;
  49. case 3:
  50. $userWork = '工人';
  51. echo '您的职业是' . $userWork . '<br>';
  52. break;
  53. default:
  54. $userWork = '其他';
  55. echo '您的职业是' . $userWork . '<br>';
  56. }
  57. //用count()查看爱好数组的元素个数
  58. echo '您的爱好有:' . count($userLikes) . '个' . '<br>';
  59. //用foreach循环遍历爱好数组的值并输出
  60. foreach ($userLikes as $userLike) {
  61. echo $userLike . '<br>';
  62. }
  63. //用数组指针函数遍历post数组中的值
  64. echo '<hr>从前向后用for循环遍历$_POST' . '<br>';
  65. reset($_POST);
  66. for ($i = 0; $i < count($_POST); $i++) {
  67. $a = current($_POST);
  68. $b = key($_POST);
  69. echo $b . '------->' . print_r($a, true) . '<br>';
  70. next($_POST);
  71. }
  72. echo '<hr>从后向前用while循环遍历$_POST数组' . '<br>';
  73. reset($_POST);
  74. end($_POST);
  75. $i = 0;
  76. while ($i < count($_POST)) {
  77. $a = current($_POST);
  78. $b = key($_POST);
  79. echo $b . '------->' . print_r($a, true) . '<br>';
  80. prev($_POST);
  81. $i++;
  82. }
  83. } else {
  84. echo '用GET传送的数据' . '<br>';
  85. }

5.知识点总结

5.1for循环

用于预先知道脚步需要运行的次数的情况
循环执行代码指定的次数,或者当指定条件为真时循环执行代码块
例:

  1. <?php
  2. for ($i = 0; $i < count($_POST); $i++) {
  3. $a = current($_POST);
  4. $b = key($_POST);
  5. echo $b . '------->' . print_r($a, true) . '<br>';
  6. next($_POST);
  7. }

5.2while循环

while循环将重复执行代码块,直到指定的条件不成立
通常判断条件的初始化应在while之前,在执行的代码块中应有判断条件的更新
有入口判断型(while)和出口判断(do……while)型两种,其中出口判断型中的代码块,不论条件真假,至少会运行一次
例:

  1. <?php
  2. $i = 0;
  3. while ($i < count($_POST)) {
  4. $a = current($_POST);
  5. $b = key($_POST);
  6. echo $b . '------->' . print_r($a, true) . '<br>';
  7. prev($_POST);
  8. $i++;
  9. }

5.3数组指针

移动数组指针的操作
next()向后移动,同时会获得当前元素的值
prev()向前移动,同时会获得当前元素的值
end()移动到最后一个元素,并获得它的值
reset()移动到第一个元素,并获得它的值
获取指针指向元素信息的操作
key()获得当前数组指针指向元素的键
current()获得当前数组指针指向元素的值

5.4表单验证

$_SERVER[]获取全局信息,里面包含传递信息的方法等
$_POST[]用post方法传递过来的信息
$_GET[]用get方法传递过来的信息
empty()判断传递过来的值是否为空
count()判断数组元素个数
strlen()判断字符串长度
md5()产生32位加密字符串

6.手写代码

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:很久没看到这么好的作业了
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学