电子邮件验证（React Native）。将所有条目的结果返回为 'invalid'

Question

我正在尝试通过对照表达式检查用户电子邮件来验证它。但是我得到的结果对所有条目都是无效的。

更新代码

class dummytest extends Component{

  constructor(props){
    super(props);
    this.state = {
                email :'',
                validated: false ,
                 }
  };

go = () => {
           const reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
           if (reg.test(this.state.email) === true){
               alert( valid);
           }
           else{
               alert();
           }
 }
  render(){
       return(
         <View style={{alignSelf:'center',marginTop:100}}>
              <TextInput autoCapitalize="none" autoCorrect={false} style={{height:20,width:200,backgroundColor:'blue'}} value={this.setState.email}/>

              <Button onPress={this.go.bind(this)}>
                 <Text> GO </Text>
              </Button>
          </View>

       );
    }
}

Answer 1

看起来像是语法错误。您在 go.

的定义中直接有一个名为 validate 的嵌套函数

作为一般规则，我建议您保持缩进和大括号一致，这样一目了然就能检测到这类错误——当括号不对齐时，就会出现问题。

然后，您可以执行一些操作来使此代码正常工作：

删除 validate (email) 行及其伴随的关闭括号
参考电子邮件来自 this.state.email go
添加一个额外的状态变量来指示电子邮件是否已被发送验证与否。

类似于：

this.state = {
 email :'',
 validated : false,
}

还有...

go = () => {  
        if (this.state.email.test(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)==0) {
            this.setState({ validated : true });
        } else {
            this.setState({ validated : false });
        }
    }

Answer 2

好的，我的代码可以正常工作，下面您可以查看在每个用户输入时验证电子邮件的情况：

你的函数部分：

validate = (text) => {
  console.log(text);
  let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w\w+)+$/;
  if (reg.test(text) === false) {
    console.log("Email is Not Correct");
    this.setState({ email: text })
    return false;
  }
  else {
    this.setState({ email: text })
    console.log("Email is Correct");
  }
}

您的 TextInput 组件：

<TextInput
  placeholder="Email ID"
  onChangeText={(text) => this.validate(text)}
  value={this.state.email}
/>

Answer 3

我创建了一个 Helper class 并这样做：

export default class Helper {

     static isEmailValid(email) {
        let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        return reg.test(email) == 0;
   }
}

通过以下方式调用此方法：

if (Helper.isEmailValid(this.state.emailText)) {
    console.log("Email is correct");
} else {
    console.log("Email is not correct");
}

Answer 4

validate = (text) => {
console.log(text);
let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ ;
if(reg.test(text) === false)
{
alert("Email is Not Correct");
this.setState({email:text})
return false;
  }
else {
  this.setState({email:text})
  alert("Email is Correct");
}
}


You can put this function validate in onChangeText propert of TextInput

Answer 5

具有验证电子邮件的功能（可能在某个单独的模块中，因为您要重用它），

export function validateIsEmail(email) {
  return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email);
}

您可以验证电子邮件输入，

实时验证：

        <TextInput
              ...
          onChangeText={emailText => {
            setEmail(emailText);
            setInlineValidations({
              ...inlineValidations,
              emailNotValid: !validateIsEmail(emailText),
            });
          }}
        />

在此示例中，setEmail 和 setInlineValidations 是由 useState 挂钩定义的状态设置器，示例 const [email, setEmail] = useState('');，您当然可以根据您处理状态的方式进行调整。

Answer 6

   isEmailValid = () => {
    const expression = /(?!.*\.{2})^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([\t]*\r\n)?[\t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([\t]*\r\n)?[\t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
    return expression.test(String(this.state.email_id).toLowerCase())
}

Answer 7

无需编写大量代码即可轻松验证电子邮件，方法是使用名为 validator[=14 的 npm 包=]

安装
```
npm i validator
```

导入包

const validator = require('validator');

用它来验证电子邮件

validator.isEmail('john.doe@example.com');    // true

有关详细信息，请参阅文档： https://www.npmjs.com/package/validator

Answer 8

if you use hooks, you can try as this

const [email, setEmail] = useState('');
const [emailValidError, setEmailValidError] = useState('');

when user enter email this function will call

const handleValidEmail = val => {
let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w\w+)+$/;

if (val.length === 0) {
  setEmailValidError('email address must be enter');
} else if (reg.test(val) === false) {
  setEmailValidError('enter valid email address');
} else if (reg.test(val) === true) {
  setEmailValidError('');
}
};


 <TextInput
    style={styles.input}
    placeholder="Email"
    value={email}
    autoCorrect={false}
    autoCapitalize="none"
    onChangeText={value => {
      setEmail(value);
      handleValidEmail(value);
    }}
  />

enter this line bellow input field

{emailValidError ? <Text>{emailValidError}</Text> : null}

电子邮件验证（React Native）。将所有条目的结果返回为 'invalid'

Email Validation (React Native). Returning the result as 'invalid' for all the entries

javascript

validation

react-native

react-native-ios