javascript - react native 自定义表单验证

Question

我创建了一个在提交表单时运行的自定义验证方法，因为我发现没有有用的、易于实现的 React Native 验证库，我的验证方法返回 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 事件，用于在输入有效时更新状态