• PHP表单处理的案例分析

    目录

    知识补充

    实现过程

    前端代码

    后端代码

    简单分析

     

    知识补充

    表单简介（来自Mr._Dang）

      action：提交的地址
      method：提交的方式
        get： 参数是在url中的，不安全，传输量比较少，不大于2KB。 默认是get
        post： 参数不在url中，相对比较安全。传输量没有限制。不过，服务器可能会对你传输的数据量进行限制。


    input
      type:input元素的类型。会根据type的不同，呈现为不同的控件。
      name：提交的数据的名字
      
    输入框
      type=text
      作用：创建一个允许用户输入的输入框。
      value：未输入之前的默认文本。
      placeholder：提示文本。
      maxlength：输入框最大输入字符长度。
      minlength:输入框最小的输入字符长度。
      autofocus:自动获取焦点   不需要书写属性值。
    密码框
      password

    单选
      radio
      属性：
        name：如果不设置name属性，浏览器不知道哪些单选框是一组，就不能起到单选的效果。我们需要给同一组的单选框添加一个相同的name属性值。
        checked:可以忽略属性值，表示当前单选默认选中。
        disabled 禁用 不仅仅是单选可用，别的input元素也可以使用。

    多选
      checkbox
      name是必填项。而且同一组的多选框的name值必须相同。

    按钮：
      value属性：按钮上的文字
      普通按钮
        button 配合js完成一些操作。
      提交按钮
        submit 将表单中的数据提交。
      重置按钮
        reset 重置表单中的数据

    文件上传
      file
      文件上传时，需要在form表单中添加这样一个属性
            enctype="multipart/form-data"

    label标签
      作用：为input元素添加标记。
        将label中的内容与input进行绑定，（input的id值），当鼠标点击label中的文本时，就会触发绑定的input元素。
      格式：
       

    提交的数据形式： 键值对  =前面为键 =后面为值。
      account=张三四五六&sex=男

     

    实现过程

    前端代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=, initial-scale=1.0">
    7.     <title>validatatitle>
    8.     <style>
    9.         #form{
    10.             width: 600px;
    11.             margin: 150px auto;
    12.             padding: 10px;
    13.             border: 1px solid #ddd;
    14.         }
    15.     style>
    16.     
    17. <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    18. head>
    19. <body>
    20.     <form id="form" action ="index.php" method="post">
    21.         <div class="form-group">
    22.           <label for="exampleInputEmail1">Email addresslabel>
    23.           <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" name="email">
    24.         div>
    25.         <div class="form-group">
    26.             <label for="exampleInputEmail1">Mobilelabel>
    27.             <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Mobile" name="mobile">
    28.           div>
    29.         <div class="form-group">
    30.           <label for="exampleInputPassword1">Passwordlabel>
    31.           <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" name="password">
    32.         div>
    33.         <button type="submit" class="btn btn-default">提交button>
    34.       form>
    35. body>
    36. html>

     

    后端代码

    2. $error=array();
    3. if($_SERVER["REQUEST_METHOD"]==="POST")
    4. {
    5. if(empty($_POST["email"]))
    6. {
    7.     array_push($error,"注意,email为必填项");
    8. }
    9. else
    10. {
    11.     $email=checkValue($_POST["email"]);//规范处理
    12.     if(!preg_match("/^\w+@\w+\.\w+$/",$email))
    13.     array_push($error,"邮箱输入不合法");
    14. }
    15.    /* |w：数字 字母 下划线;
    16.      +：可以有多个;
    17.       ^:起始位置;
    18.        $:结束位置;
    19.     .:任意字符，需要转义一下
    20.     \.：转义后为普通字符.
    21.     \d：一个字符的范围[0-9]
    22.     {n}:需要出现n个字符
    23.     {n,}:需要出现n个及n个以上的字符
    25. */
    26.  
    27.  
    28. if(empty($_POST["mobile"]))
    29. {
    30.     array_push($error,"注意,mobile为必填项");
    31. }
    32. else
    33. {
    34.     $mobile=checkValue($_POST["mobile"]);//规范处理
    35.     if(!preg_match("/^1\d{10}$/",$mobile))
    36.     array_push($error,"手机号输入不合法");
    37. }
    38. if(empty($_POST["password"]))
    39. {
    40.     array_push($error,"注意,password为必填项");
    41. }
    42. else
    43. {
    44.     $password=checkValue($_POST["password"]);//规范处理
    45.     if(!preg_match("/^\w{6,}$/",$password))
    46.     array_push($error,"密码输入不合法");
    47. }
    48. }
    49. function checkValue($value)
    50. {
    51. $data=trim($value);//移除字符串两侧的空白字符
    52. $data=htmlspecialchars($data);//把预定义的字符转化为html的实体（&,",',<,>）
    53. return $data;
    54. }
    55. $message=<<
    57. EOT;
    58. if(count($error)>0)
    59. {
    60.     echo $message;
    61. }
    62. else{
    63.     echo "注册成功";
    64. }
    65. ?>

     

    简单分析

    前端分析

    采取css模板实现了通过提交邮箱、手机号和密码进行登录的功能，此时前端通过type类型先对邮箱进行简单处理，发现需要输入@以及@后必须有内容，如图

    8fa27a5feb414bcd97eea05a6590c909.png

    2b67ce8347dc4b1aaf9bad116c8efb85.png 

    后端分析

    先确定请求方式为前端设置好的post并用empty函数判断输入是否为空，然后对输入的内容进行规范处理（trim去除两侧的空白字符，htmlspecialchars把预定义的字符转化为html的实体），再通过正则表达式判定输入的值是否合法，不合法则通过alert('$error[0]');history.go(-1)进行弹窗提示错误信息并返回上一级登录页面。

     正则表达式进行格式

       /* |w：数字 字母 下划线;
         +：可以有多个;
          ^:起始位置;
           $:结束位置;
        .:任意字符，需要转义一下
        \.：转义后为普通字符.
        \d：一个字符的范围[0-9]
        {n}:需要出现n个字符
        {n,}:需要出现n个及n个以上的字符

    */

     

  • 相关阅读:
    部署LVS-DR集群
    怎么快速制作书单视频？书单视频如何制作？
    ruby语言怎么写个通用爬虫程序？
    Liquid~
    MyBatis 动态 SQL 实践教程
    指数函数及其导函数
    户外运动耳机推荐、这几款耳机专为户外运动而生
    Map的遍历和Map的有序和无序
    [CISCN2019 华东南赛区]Web11
    运放-运算放大器经典应用电路大全-应用电路大全-20种经典电路
  • 原文地址：https://blog.csdn.net/qq_63701832/article/details/128112554