PHP實現(xiàn)表單處理方法詳解
目錄
- 知識補充
- 實現(xiàn)過程
- 前端代碼
- 后端代碼
- 簡單分析
知識補充
表單簡介(來自Mr._Dang)
action:提交的地址
method:提交的方式 get: 參數(shù)是在url中的,不安全,傳輸量比較少,不大于2KB。 默認是get post: 參數(shù)不在url中,相對比較安全。傳輸量沒有限制。不過,服務器可能會對你傳輸?shù)臄?shù)據量進行限制。 input type:input元素的類型。會根據type的不同,呈現(xiàn)為不同的控件。 name:提交的數(shù)據的名字 輸入框 type=text 作用:創(chuàng)建一個允許用戶輸入的輸入框。 value:未輸入之前的默認文本。 placeholder:提示文本。 maxlength:輸入框最大輸入字符長度。 minlength:輸入框最小的輸入字符長度。 autofocus:自動獲取焦點 不需要書寫屬性值。 密碼框 password
單選
radio 屬性: name:如果不設置name屬性,瀏覽器不知道哪些單選框是一組,就不能起到單選的效果。我們需要給同一組的單選框添加一個相同的name屬性值。 checked:可以忽略屬性值,表示當前單選默認選中。 disabled 禁用 不僅僅是單選可用,別的input元素也可以使用。
多選
checkbox name是必填項。而且同一組的多選框的name值必須相同。
按鈕:
value屬性:按鈕上的文字 普通按鈕 button 配合js完成一些操作。 提交按鈕 submit 將表單中的數(shù)據提交。 重置按鈕 reset 重置表單中的數(shù)據
文件上傳
file 文件上傳時,需要在form表單中添加這樣一個屬性 enctype="multipart/form-data"
label標簽
作用:為input元素添加標記。 將label中的內容與input進行綁定,(input的id值),當鼠標點擊label中的文本時,就會觸發(fā)綁定的input元素。 格式: <label for="要綁定的input元素的ID值">文本</label>
提交的數(shù)據形式: 鍵值對 =前面為鍵 =后面為值。
account=張三四五六&sex=男
實現(xiàn)過程
前端代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>validata</title> <style>#form{ width: 600px; margin: 150px auto; padding: 10px; border: 1px solid #ddd;} </style> <!-- 新 Bootstrap 核心 CSS 文件 --><link rel="external nofollow" rel="stylesheet"></head><body> <form id="form" action ="index.php" method="post"><div> <label for="exampleInputEmail1">Email address</label> <input type="email" id="exampleInputEmail1" placeholder="Email" name="email"></div><div> <label for="exampleInputEmail1">Mobile</label> <input type="text" id="exampleInputEmail1" placeholder="Mobile" name="mobile"> </div><div> <label for="exampleInputPassword1">Password</label> <input type="password" id="exampleInputPassword1" placeholder="Password" name="password"></div><button type="submit">提交</button> </form></body></html>
后端代碼
<?php$error=array();if($_SERVER["REQUEST_METHOD"]==="POST"){if(empty($_POST["email"])){ array_push($error,"注意,email為必填項");}else{ $email=checkValue($_POST["email"]);//規(guī)范處理 if(!preg_match("/^\w+@\w+\.\w+$/",$email)) array_push($error,"郵箱輸入不合法");} /* |w:數(shù)字 字母 下劃線; +:可以有多個; ^:起始位置; $:結束位置; .:任意字符,需要轉義一下 \.:轉義后為普通字符. \d:一個字符的范圍[0-9] {n}:需要出現(xiàn)n個字符 {n,}:需要出現(xiàn)n個及n個以上的字符*/if(empty($_POST["mobile"])){ array_push($error,"注意,mobile為必填項");}else{ $mobile=checkValue($_POST["mobile"]);//規(guī)范處理 if(!preg_match("/^1\d{10}$/",$mobile)) array_push($error,"手機號輸入不合法");}if(empty($_POST["password"])){ array_push($error,"注意,password為必填項");}else{ $password=checkValue($_POST["password"]);//規(guī)范處理 if(!preg_match("/^\w{6,}$/",$password)) array_push($error,"密碼輸入不合法");}}function checkValue($value){$data=trim($value);//移除字符串兩側的空白字符$data=htmlspecialchars($data);//把預定義的字符轉化為html的實體(&,",",<,>)return $data;}$message=<<<EOT<script>alert("$error[0]");history.go(-1);</script>EOT;if(count($error)>0){ echo $message;}else{ echo "注冊成功";}?>
簡單分析
前端分析
采取css模板實現(xiàn)了通過提交郵箱、手機號和密碼進行登錄的功能,此時前端通過type類型先對郵箱進行簡單處理,發(fā)現(xiàn)需要輸入@以及@后必須有內容,如圖
后端分析
先確定請求方式為前端設置好的post并用empty函數(shù)判斷輸入是否為空,然后對輸入的內容進行規(guī)范處理(trim去除兩側的空白字符,htmlspecialchars把預定義的字符轉化為html的實體),再通過正則表達式判定輸入的值是否合法,不合法則通過alert('$error[0]');history.go(-1)進行彈窗提示錯誤信息并返回上一級登錄頁面。
正則表達式進行格式
/* |w:數(shù)字 字母 下劃線;
+:可以有多個;
^:起始位置;
$:結束位置;
.:任意字符,需要轉義一下
\.:轉義后為普通字符.
\d:一個字符的范圍[0-9]
{n}:需要出現(xiàn)n個字符
{n,}:需要出現(xiàn)n個及n個以上的字符*/
到此這篇關于PHP實現(xiàn)表單處理方法詳解的文章就介紹到這了,更多相關PHP表單處理內容請搜索以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持!
