React 表單驗證

Irakli Tchigladze 2022年5月18日

React React Form

在我們這個時代，公司為了許多不同的目的儲存、維護和分析資料。

無論是維護使用者資料庫、生成報告，還是其他任何事情，資料的作用都不為過。因此，資料需要結構化和組織良好。

由 React 驅動的 Web 應用程式必須使用表單驗證來確保使用者輸入遵循標準約定。這樣，你可以促進使用者旅程並以有組織的方式收集資料。

糟糕的資料驗證也可能導致惡意攻擊，因此實施適當的解決方案還可以提高應用程式的安全性。

React 表單驗證

對於正確的 React 應用程式，表單驗證是必不可少的功能。例如，電子郵件必須包含 @ 符號、有效字尾並滿足其他條件。

`onChange` 事件

在 React 中實現表單驗證的最有效方法是偵聽 onChange 事件並在元件的 state 中維護使用者輸入。首先，你必須擁有受控輸入，因此如果你有兩個欄位要驗證（比如姓名和電子郵件），你需要使用以下空值初始化狀態：

constructor(props){
    super(props)
    this.state = {
    inputFields: {"name": "", "email": ""},
    errorMessages: {}
  }
}

編寫類元件時，必須在 constructor() 函式中初始化狀態。擁有 errorMessages 屬性也很好，你可以在其中儲存訊息以告訴使用者輸入的值有什麼問題。

表單驗證的第一步應該是使用 onChange 事件偵聽器設定 <input> 元素。輸入欄位中的更改也將自動反映在狀態中。

我們的 render() 方法應該是這樣的：

render() {
    return (
    <form>
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": e.target.value, "email": this.state.inputFields.email}})} />
    <br />
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": this.state.inputFields.name,"email": e.target.value, }})}/>
    </form>
    )
  }

這是一個很好的開始;儘管如此，我們還需要為表單驗證設定條件並生成錯誤訊息。為此，我們建立了一個自定義的 validate() 函式。

為簡單起見，我們將設定兩個基本規則：名稱應長於 2 個字母，電子郵件值應包含 @。現在，我們的整個應用程式應該是這樣的：

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
    inputFields: {"name": "", "email": ""},
    errorMessages: {}
  }
}
  render() {
    console.log(this.state)
    const validate = () => {
      let inputFields = this.state.inputFields
      let errors = {}
      let validityStatus = true
      if (inputFields["name"].length <= 2){
        validityStatus = false
        errors["name"] = "The name should contain more than two symbols"
      }
      if (inputFields["email"].indexOf("@") === -1 ){
        validityStatus = false
        errors["email"] = "The email should contain @"
      }
      this.setState({errorMessages: errors})
      return validityStatus
    }
    const handleSubmit = (e) => {
      e.preventDefault();
      if (validate()){
        alert("form complete")
      }
      else {
        alert("errors")
      }
    }
    return (
    <form onSubmit={(e) => handleSubmit(e)}>
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": e.target.value, "email": this.state.inputFields.email}})} />
    <br />
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": this.state.inputFields.name,"email": e.target.value, }})}/>
    <br />
    <button type="submit">Submit</button>
    </form>
    )
  }
}

提交表單後，我們的 validate() 函式會檢查輸入到欄位中的值，如果滿足所有條件則返回 true，否則返回 false。一旦檢查結束，handleSubmit() 函式會提醒 form complete 或 errors。

該函式還包括本地 errors 變數，用於儲存每個文字欄位的警告訊息。檢查完成後，它會引用該變數以更新 errorMessages 狀態屬性。

為方便起見，你可以在每個欄位下新增一個文字，以顯示該欄位的錯誤訊息。下面是一個例子：

return (
    <form onSubmit={(e) => handleSubmit(e)}>
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": e.target.value, "email": this.state.inputFields.email}})} />
    <p style={{color: "red"}}>{this.state.errorMessages.name}</p>
    <br />
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": this.state.inputFields.name,"email": e.target.value, }})}/>
    <p style={{color: "red"}}>{this.state.errorMessages.email}</p>
    <br />
    <button type="submit">Submit</button>
    </form>
    )

這樣，你可以使用 errorMessages 狀態屬性中的警告訊息為使用者提供有用的小警告，以幫助他們修復錯誤。

作者： Irakli Tchigladze

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

React 表單驗證

onChange 事件

`onChange` 事件