如何在本机反应中验证 TextInput 值？

Posted 2023-04-13

【中文标题】如何在本机反应中验证 TextInput 值？

【英文标题】：How to validate TextInput values in react native?

【发布时间】：2016-07-08 22:05:15

【问题描述】：

例如，在 TextInput 中输入电子邮件时，它应该验证并显示错误消息。输入的电子邮件是否有效

【问题讨论】：

输入无效时你用什么来显示错误信息和感叹号？提前谢谢

是的，您使用的黑色弹出提示是什么？

【参考方案1】：

您可以使用正则表达式来检查输入的邮件是否有效。

正则表达式函数

validateEmail = (email) => 
  var re = /^(([^<>()\[\]\\.,;:\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 re.test(email);
;

提交文字输入功能

onSubmit = () => 
if (!this.validateEmail(this.state.text_input_email)) 
  // not a valid email
 else 
  // valid email

【讨论】：

此拒绝不支持：email@[123.123.123.123]

我需要在不提交表单的情况下进行验证。我怎样才能做到这一点？

【参考方案2】：

您可以使用TextInput 上的onBlur 事件验证您的输入值 您可以在此事件上应用您的正则表达式或检查条件。

像这样：

<TextInput
      onBlur= () => 
        //Conditions or Regex
      
/>

在你的情况下， 正则表达式函数：

validateEmail = (email) => 
var re = /^(([^<>()\[\]\\.,;:\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 re.test(email);
;

文本输入代码：

<TextInput
  onBlur= () => 
    if (!this.validateEmail(this.state.text_input_email)) 
       // not a valid email
     else 
       // valid email
    
  
/>