# 表單驗證 實作

###### tags: `實作` `正則`

[實作頁面連結](https://allenw0815.github.io/mission/mission_21/index.html)


### Flowchart
1. 寫HTML結構，需有<input>、submit 按鍵
2. 寫CSS
3. 透過JS取 input.value 去做 Regex 比對
4. 要讓submit的時候頁面不要跳轉

> JS 流程

1. 取得各個 input 的 DOM
2. 拿到各個 value 後用 trim() 處理空白
3. 判斷與該格式是否符合來決定顯示錯誤的提示與否及內容
4. 完成

### 紀錄

text-indent: 10px;

* 用來調整文字輸入的起始位置

let str = ' abc de f  '
str.trim()
// 'abc de f'

* 用來去除字串頭尾空白


* 這個用來關閉 input 的歷史紀錄顯示


* 不用正則的話沒法避開符號


* 讓 submit 時不跳轉

### 小記
不難，憑當前理解的部分加 google 一下，可將所需要的功能大致寫出來。
先繼續下一篇實作練習，有空回來補一些其他的樣式及功能。
* 樣式再美化一點
* 判斷所有 input 皆符合格式才 submit
* 成功 submit 的畫面