时间戳

首页 > 解决方案 > react-native 自定义表单验证

javascript - react-native 自定义表单验证

问题描述

我创建了一个在提交表单时运行的自定义验证方法，因为我发现没有有用的、易于实现的 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：是否有一个简单的验证库可用于此？

标签： javascriptreactjsreact-native

解决方案

一般来说，您不需要自己进行电子邮件验证，这个任务已经在几乎每个具有用户输入组件的 UI 组件库中得到解决。

现在，假设您使用的是 React NativeTextInput组件：

  • 您必须将 设置textContentType为emailAddress，它会自动验证您对提到的内容类型的输入，就像这样<TextInput textContentType='emailAddress' />

  • 之后，onEndEditing如果输入有效，则使用 TextInput 事件更新状态

推荐阅读