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

Question

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

Answer 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
}

Answer 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
    }
  }
/>

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

How to validate TextInput values in react native?

javascript

validation

android

reactjs

react-native