繼續前面幾篇文章的分享,本次分享下 -- 輸入驗證
為了保持項目的可學習性,我這裡將之前分享的代碼積累了下,放在github上,想要儘快入手學習的,可以直接cloneMy Code,寫代碼不上手,都等於白搭,光看的話,對於我來說,我是不行的,沒辦法學會。
項目地址
https://github.com/durban89/wiki_blogtag: 1.0.4
有些同學可能看不懂,怎麼就只給了這些,完全不懂呀。我把使用的命令打出來,照著操作,就應該可以解決了
git clone https://github.com/durban89/wiki_blog /local/pathcd /local/pathgit fetch origingit checkout 1.0.4
這些我覺得 夠清晰了。OK!
繼續分享的輸入驗證的邏輯。
Web開發中最重要的原則之一是您不能信任用戶端使用者表單中的任何內容。
您必須在使用之前驗證所有傳入資料。
許多網站都受到這個問題的影響,這個問題既簡單又至關重要。
有兩種方法可以驗證常用的表單資料。
第一個是前端的JavaScript驗證,第二個是後端的伺服器驗證。
本次繼續上次分享,分享Web開發中的伺服器端驗證第四部分
選項按鈕
如果我們想知道文章的開放狀態是開啟還是關閉,我們可以使用選項按鈕,開啟為1,關閉為2。
然而,當提交文章的時候發送了一個3的值,程式是否會拋出異常?肯定會,但是要如果處理。
我們需要使用與下拉式清單中相同的方法,以確保我們的選項按鈕僅返回預期值,操作如下
在edit.html添加如下代碼
<div class="checkbox"> <label for="category">文章狀態</label></div><div class="radio"> <label> <input type="radio" name="openStatus" id="openStatus1" value="1" checked> 開啟 </label> <label> <input type="radio" name="openStatus" id="openStatus2" value="2"> 關閉 </label></div>
在ArticleSave方法中使用以下代碼來驗證輸入:
if !helpers.ValidateInArray(openStatusSlice, openStatus) { fmt.Println("openStatus not in openStatusSlice") http.Redirect(w, r, "/view/"+title, http.StatusFound) return}
並添加接收和輸出的邏輯如下
openStatus := r.FormValue("openStatus")fmt.Println("openStatus: ", openStatus)
跟上次分享判斷“分類”是一樣的邏輯
重新編譯並運行項目,如果選擇“開啟”的話,提交後會在終端接收到如下輸出
openStatus: 1
複選框
假設有一些使用者興趣的複選框,並且您不需要此處的無關值。
您可以驗證以下內容:
在這種情況下,清理與驗證按鈕和複選框輸入略有不同,因為在這裡我們從複選框中得到一個切片。執行個體操作如下:
在edit.html添加如下代碼
<div class="checkbox"> <label for="category">頻道</label></div><div class="checkbox"> <label> <input type="checkbox" name="channel" value="news"> 新聞 </label> <label> <input type="checkbox" name="channel" value="technology"> 科技 </label> <label> <input type="checkbox" name="channel" value="other"> 其他 </label></div>
在ArticleSave方法中使用以下代碼來驗證輸入:
添加接收和輸出的邏輯如下
channel := r.FormValue("channel")fmt.Println("channel: ", channel)fmt.Println("channels: ", r.Form["channel"])
重新編譯並運行項目,如果選擇“新聞”、“科技”的話,提交後會在終端接收到如下輸出
channel: newschannels: [news technology]
從輸出可以看出,使用r.FormValue擷取的值並不是我們提交後擷取的值,反而r.Form["channel"]符合我們的要求,因此在以後的開發中,針對複選框的擷取值的方式要留意下。
下面我們添加如下代碼,對擷取的值進行驗證
先添加一個協助函數
// ValidateSliceIntersection 交集func ValidateSliceIntersection(sourceSlice []string, targetSlice []string) []string { var slice3 []string for _, slice1 := range sourceSlice { for _, slice2 := range targetSlice { if slice1 == slice2 { slice3 = append(slice3, slice2) } } } return slice3}
在方法中調用
chennelSlice := []string{"news", "technology", "other"}a := helpers.ValidateSliceIntersection(channel, chennelSlice)if len(a) == 0 { fmt.Println("channel is empty") http.Redirect(w, r, "/view/"+title, http.StatusFound) return}
重新編譯並運行項目,如果什麼頻道選項什麼也不選的話,提交後會在終端接收到如下輸出
channels: []channel is empty
如果感興趣也可以試試選擇“新聞”,“科技”後再試試
今天就分享到這裡,如果你有更好的方法請在下方留言或者加群交流
項目更新地址
https://github.com/durban89/typescript_demo.gittag: 1.0.5