反应本机自定义表单验证

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()}登录名