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');
}

即使输入了错误的电子邮件地址，我的终端仍会记录后验证，我如何编写一种自定义验证方法来设置是否在每次单击表单时显示或隐藏错误消息的状态？

P.S：如果那里有一个简单的验证库，请告诉我。

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字符串，则应更改为

_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 这样一来，您就可以在代码中以onPress={()=>this._login()}

的身份登录

反应本机自定义表单验证

2 个答案: