Javascript 电子邮件验证工作不正常-don'；我不知道为什么'；它运转不正常

我创建此函数是为了在键入无效输入时更改输入的样式。除了电子邮件验证之外，一切都正常。（我希望边框在一切正常时变为绿色，不正常时变为红色。我所有的控制台日志都按照我的要求显示出来，所以我相信regex语句是正确的……它只是没有像预期的那样更改边框

知道为什么吗

onInputBlur = (event) => {
   console.log('onblur')
    let inputInfo = event.target
    let inputVal = event.target.value,
        { styles } = this.props,
        fontSize = styles.placeholder.fontSize || 10,
        top = styles.placeholder.top || 4
    let emailRegex = new RegExp(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
       console.log(inputInfo.id.toString())
       console.log(emailRegex.test(inputVal))




if(inputVal){
  //zipcode
           if(inputInfo.id.toString() == 'zip' && inputVal.split('').length < 4){
               console.log('ziphit')
                return this.setState(state =>({
                  inputCSS:{
                   ...state.inputCSS,
                   border: '1px solid red'
                 }
              }))
          } else if (inputInfo.id.toString() == 'zip' && inputVal.split('').length >= 4){
                return this.setState(state => ({
                  inputCSS: {
                    ...state.inputCSS,
                    border: '1px solid green'
                  }
                }))
              }
  //phone
          if(inputInfo.id.toString() == 'phone' && inputVal.split('').length < 10){
            return this.setState(state =>({
              inputCSS: {
                ...state.inputCSS,
                border: '1px solid red'
              }
            }))
          } else {
            return this.setState(state => ({
              inputCSS: {
                ...state.inputCSS,
                border: '1px solid green'
              }
            }))
          }
  //email
          if(inputInfo.id.toString() == 'email' && !emailRegex.test(inputVal)){
            console.log('email hit - invalid input')
            return this.setState(state => ({
              inputCSS: {
                ...state.inputCSS,
                border: '1px solid red'
              }
            }))
          } else {
            console.log('email hit - valid email')
            return this.setState(state => ({
              inputCSS: {
                ...state.inputCSS,
                border: '1px solid green'
              }
            }))
          }

    return this.setState(state =>({
      inputCSS: {
        ...state.inputCSS,
        border: '1px solid green'
     }
   }))
 }  else {
      return this.setState(state=> ({
        inputCSS: {
          ...state.inputCSS,
          border: '1px solid red'
        }
    }))
  }

}

onInputBlur=（事件）=>{
console.log（'onblur'）
让inputInfo=event.target
让inputVal=event.target.value，
{style}=this.props，
fontSize=styles.placeholder.fontSize | | 10，
top=styles.placeholder.top | | 4
设emailRegex=newregexp（/^[A-Z0-9.\uz0%+-]+@[A-Z0-9.-]+\[A-Z]{2,4}$/i）；
console.log（inputInfo.id.toString（））
console.log（emailRegex.test（inputVal））
如果（输入值）{
//zipcode
if（inputInfo.id.toString（）='zip'&&inputVal.split（''）.length<4）{
console.log（'ziphit'）
返回此.setState（状态=>({
输入CSS：{
…state.inputCSS，
边框：“1px纯红”
}
}))
}else if（inputInfo.id.toString（）='zip'&&inputVal.split（''）.length>=4）{
返回此.setState（状态=>({
输入CSS：{
…state.inputCSS，
边框：“1px纯绿”
}
}))
}
//电话
if（inputInfo.id.toString（）='phone'&&inputVal.split（''）.length<10）{
返回此.setState（状态=>({
输入CSS：{
…state.inputCSS，
边框：“1px纯红”
}
}))
}否则{
返回此.setState（状态=>({
输入CSS：{
…state.inputCSS，
边框：“1px纯绿”
}
}))
}
//电子邮件
if（inputInfo.id.toString（）='email'&&！emailRegex.test（inputVal））{
console.log（'电子邮件命中-输入无效'）
返回此.setState（状态=>({
输入CSS：{
…state.inputCSS，
边框：“1px纯红”
}
}))
}否则{
console.log（'电子邮件命中-有效电子邮件'）
返回此.setState（状态=>({
输入CSS：{
…state.inputCSS，
边框：“1px纯绿”
}
}))
}
返回此.setState（状态=>({
输入CSS：{
…state.inputCSS，
边框：“1px纯绿”
}
}))
}否则{
返回此.setState（状态=>({
输入CSS：{
…state.inputCSS，
边框：“1px纯红”
}
}))
}
}

您正在使用if/else@phone进行检查。请尝试console。登录手机壳的

else

（在发送电子邮件之前运行），我假设它将触发您现在放在那里的

console.log（）；

您可以看到，如果您输入的字段不是

phone

，则语句

if（inputInfo.id.toString（）==“phone”和&inputVal.split（“”）.length<10）

将始终返回到

else

因此，您永远无法通过手机的

else

语句。电子邮件在其下方，但函数在到达之前返回。电子邮件检查将永远不会执行

它应该像你的第一个函数，像这样

 if(inputInfo.id.toString() == 'phone' && inputVal.split('').length < 10){
            return this.setState(state =>({
              inputCSS: {
                ...state.inputCSS,
                border: '1px solid red'
              }
            }))
          } else if(inputInfo.id.toString() == 'phone') {
            return this.setState(state => ({
              inputCSS: {
                ...state.inputCSS,
                border: '1px solid green'
              }
            }))
          }

更好的做法是在代码中不要有如此多的返回，就像这样；

var fieldType = inputInfo.id.toString();
var returnValue = {};
switch (fieldType) {
  case "phone":
    if (inputVal.split('').length) {
      returnValue.state = "my stuff";
    } else {
      returnValue.state = "my stuff";
    }
    break;
  case "email":
    if (inputVal.split('').length) {
      returnValue.state = "my stuff";
    } else {
      returnValue.state = "my stuff";
    }
    break;
}
return this.setState(returnValue);

---

很抱歉没有使用ES6。我还不知道任何ES6语法=）

这有很多代码需要查看和“猜测”出了什么问题。你有一个有效的例子给我们吗？或者是一杯鸡尾酒？在这些问题上，我总是先问几个问题；1）元素是通过html呈现还是通过javascript呈现？2）元素是否甚至有边框，并且它是否不在包含

溢出：隐藏
的包装内console.log（'email hit'）通过了吗？我没有它的JSFIDLE，但它是通过React jsx呈现的。它确实有一个可见的边框，在页面加载时是黑色的。如果单击它并将其留空，边框将成功变为红色，但如果键入任何字符串值，边框将变为绿色。显示“email hit-invalid input”和“email hit-valid input”的控制台日志未触发，因此它们不知何故未被激活，即使控制台显示inputInfo.id已成功返回“email”和email.Regex.text（inputVal）正在成功返回正确的布尔值。这使我相信它与溢出无关：隐藏-所有其他输入值正在成功地根据需要更改其样式。很确定这与这里的逻辑有关。然后我假设输入至少被正确地找到（作为一个元素）。这意味着我们可以查看您的代码以查找错误。如果你说的是真的，那么应该很简单；如果
console.log（'email hit'）
没有启动，它就无法到达那里。你真是太棒了，宝贝！摇滚乐。我一定会努力实现这一点，@ScaryBelles当然，老板！非常感谢=）请不要忘记将我的答案标记为“答案”，以便将来的问题访问者知道这个问题确实解决了。好吧，我是哑巴。我正在努力寻找我点击的地方，让你的标记作为答案。有什么提示吗？
var fieldType = inputInfo.id.toString();
var returnValue = {};
switch (fieldType) {
  case "phone":
    if (inputVal.split('').length) {
      returnValue.state = "my stuff";
    } else {
      returnValue.state = "my stuff";
    }
    break;
  case "email":
    if (inputVal.split('').length) {
      returnValue.state = "my stuff";
    } else {
      returnValue.state = "my stuff";
    }
    break;
}
return this.setState(returnValue);