Question

我有一个预填了电子邮件ID的输入字段。我可以使用逗号分隔将其值更改为一个有效的电子邮件ID或多个emailId。我面临的一个问题是，它无法验证电子邮件ID是否有效。无论是一个电子邮件ID还是使用逗号分隔

的多个电子邮件ID

下面是我尝试过的代码。

import React, {Component } from 'react'

class Email extends React.Component{

 sendContactEmailId
 getCommaSeparateValue

  constructor(props){
    super(props);

    this.state = {
      emailValue : "abc@gmail.com",
      error:''
    }
  }

  checkEmailInput = (value) => {
    const regEx = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    var result = value.replace(/\s/g, "").split(/,|;/);        

    for(var i = 0;i < result.length;i++) {
        
        if(!regEx.test(result[i])) {
            this.setState({
                error : 1,  
            })
        }

        this.setState({
            error : 0,
            emailValue : value,
        })
    } 

if(this.state.emailValue.indexOf(',') > -1){

        let getEmailId = this.state.emailValue.substr(0, this.state.emailValue.indexOf(','));

        this.sendContactEmailId = getEmailId,
        this.getCommaSeparateValue = this.state.emailValue.substr(this.state.emailValue.indexOf(",") + 1)
    
        console.log("Send Contact Email : " , this.sendContactEmailId)
        console.log("Get Comma Separate Value : " , this.getCommaSeparateValue);

        this.arrayOfString = this.getCommaSeparateValue.split(',');
        console.log("Array of String: " , this.arrayOfString);

    }      
}

changeValue = (value) => {
  this.setState({
    emailValue: value
});
}
  render(){
    return(
      <div>
        <input type="text" value={this.state.emailValue} 
          onBlur={(e) => this.checkEmailInput(e.target.value)}  onChange={e => this.changeValue(e.target.value)}
          
        />
        {
            this.state.error === 1 ?

            <span>Invalid Email</span> : ''
          }
      </div>
    )
  }
}


export default Email

任何帮助都会很棒。

谢谢。

Answer 1

您每次在验证for循环中都将error设置为0。

将错误值设置为0时，您需要检查else情况。
（意思是，只有在regEx.test通过的情况下，您才需要关闭错误。）

for (var i = 0; i < result.length; i++) {
  if (!regEx.test(result[i])) {
    this.setState({
      error: 1
    });
  } else {
    this.setState({
      error: 0,
      emailValue: value
    });
  }
}

而且，我建议您将肯定的测试用例放在if中，因为它可以使代码更具可读性，并减少认知负荷。

  // Check for positive instead of negative.
  // It improves the readability and
  // put less cognitive load.
  if (regEx.test(result[i])) {
    this.setState({
      error: 0,
      emailValue: value
    });
  } else {
    this.setState({
      error: 1
    });
  }
}

工作演示

要回答comment，

您可以简单地拆分字符串并过滤出空记录。
您需要filter才能删除空字符串（请参阅下面的演示）。

运行代码片段以查看其工作。

let result = "xyz@gmail.com, ".split(",").map(email => email.trim()).filter(email => email);
console.log(result);

result = "xyz@gmail.com, ".split(",").map(email => email.trim());
console.log(`result without filter`, result);

result = "xyz@gmail.com, y@y.com".split(",").map(email => email.trim()).filter(email => email);
console.log(result);

Answer 2

如果输入参数是“a@gmail.com,b@gmail.com,c@123”；

为了验证电子邮件，首先用“,”分割，然后使用 isEmailsValid 函数验证电子邮件列表。

const input = "a@gmail.com,b@gmail.com,c@123";

const emailList = input.split(',');

const emailValidationResult = isEmailsValid(emailList);

/* 
* if result is true then the list of emails are valid
* else list of emails are not valid
*/


// Function to validate list of emails by iterating through the list.
isEmailsValid = (emailList) => {
    for(let i=0; i<emailList.length; i+=1){
        const regEx = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        if(!regEx.test(email)){
            return false;
        }
    }
    return true;
}

React JS：检查电子邮件ID是否有效以及以逗号分隔的电子邮件ID

2 个答案: