反應本機自定義表單驗證

Question

我創建了一個自定義的驗證方法，該方法可以在提交表單時運行，因為我發現沒有用於響應本機的有用且易於實現的驗證庫，我的驗證方法返回false ，並且代碼會繼續執行，不會凍結。

這是驗證和登錄方法

_validateEmail = (email) => {
    let isEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return isEmail.test(String(email).toLowerCase());
  }

_login = async () => {

    let user = this.state;

    console.log('before validate');

    await this._validateEmail(user.email);

    console.log('after validate');
}

即使輸入了錯誤的電子郵件地址，我的終端也會繼續記錄后驗證，我如何編寫一種自定義驗證方法來設置是否在每次單擊表單時顯示或隱藏錯誤消息的狀態？

PS：是否有一個簡單的驗證庫可用於此？

Answer 1

通常，您不需要自己進行電子郵件驗證，幾乎所有具有用戶輸入組件的UI組件庫都已解決了此任務。

現在，假設您正在使用React Native TextInput組件：

• 您必須將textContentType設置為emailAddress ，它將自動驗證您對提到的內容類型的輸入，例如<TextInput textContentType='emailAddress' />

• 之后，如果輸入有效，則使用onEndEditing TextInput事件更新狀態。

Answer 2

如果您使用默認的本機TextInput，則只需設置概率就足夠了，但是如果您仍然想自己執行驗證，則可以。 您應該執行以下操作。 關於您的登錄功能

_login = async () => {

    let user = this.state;

    console.log('before validate');

    await this._validateEmail(user.email);

    console.log('after validate');
}

這意味着每次調用登錄功能時，我們都希望打印之前和之后的驗證。 為了確保您的終端after validate輸入錯誤的電子郵件時不會記錄after validate字符串，那么您應該更改為以下內容

_login = async () => {

    let user = this.state;

    console.log('before validate');

    let re = await this._validateEmail(user.email);

    re && console.log('after validate');
}

因此，基本上，您應該檢查re，如果其為true，則您的驗證是正確的，否則為false，則您的驗證失敗。 在它為假的情況下，您可能需要在狀態中設置一些錯誤變量並進行檢查，以便向用戶提供反饋。 通常像

_login = async () => {

    let user = this.state;

    console.log('before validate');

    let re = await this._validateEmail(user.email);

    if(!re){
      setState({error: "invalid Email"})
      //perform what ever login you want here.
    }
}

上面的內容只有after validate when the email is correct才會記錄after validate when the email is correct因此您可以在代碼中調用onPress={()=>this._login()}登錄名