电子邮件验证(反应原生)。将所有条目的结果返回为"无效"

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

好吧，我得到了代码的工作，您可以在下面验证每个用户输入上的电子邮件：

1. 您的功能部分：

validate = (text) => {
  console.log(text);
  let reg = /^w+([.-]?w+)*@w+([.-]?w+)*(.ww+)+$/;
  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");
  }
}

2. 您的textInput组件：

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

Answer 2

看起来像是语法错误。您直接在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 3

通过使用称为 valivator

1. 安装

   npm i validator
   

2. 导入软件包

   const validator = require('validator');
   

3. 使用它来验证电子邮件

   validator.isEmail('[e-mail]');    // true
   

有关更多信息，请参见文档：https://www.npmjs.com/package/validator

Answer 4

when user enter email this function will call

const handleValidEmail = val => {
let reg = /^w+([.-]?w+)*@w+([.-]?w+)*(.ww+)+$/;
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}

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

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

Answer 5

我已经创建了一个助手类，并且这样做：

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

致电此方法：

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 6

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

Answer 7

具有验证电子邮件的函数(可能在您要重复使用时在某些单独的模块中(，

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

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

实时验证：

   isEmailValid = () => {
    const expression = /(?!.*.{2})^([a-zd!#$%&'*+-/=?^_`{|}~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]+(.[a-zd!#$%&'*+-/=?^_`{|}~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]+)*|"((([t]*rn)?[t]+)?([x01-x08x0bx0cx0e-x1fx7fx21x23-x5bx5d-x7eu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|\[x01-x09x0bx0cx0d-x7fu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))*(([t]*rn)?[t]+)?")@(([a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|[a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF][a-zd-._~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]*[a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]).)+([a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|[a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF][a-zd-._~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]*[a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]).?$/i;
    return expression.test(String(this.state.email_id).toLowerCase())
}

在此示例中，setemail和setInlineValidations是由usestate钩子定义的状态设定器，示例CC_9，您当然可以适应您处理状态的方式。

Answer 8

PP_18