Question

我正在创建此函数以在输入无效输入时更改输入的样式。除了电子邮件验证之外，一切正常。（我希望边框在一切正常时变为绿色，而在不是时变为红色。我的所有控制台日志都按照我的要求完全出现，所以我相信正则表达式是正确的...它只是没有像它应该的那样改变边界。

知道为什么吗？

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'
        }
    }))
  }

}

Answer 1

您正在使用if / else @ phone进行检查。尝试在手机套else（在电子邮件之前运行）中使用console.logging，我假设它会触发您现在放置的console.log();。

您知道，如果您输入的字段不是if(inputInfo.id.toString() == 'phone' && inputVal.split('').length < 10)，则else语句将始终返回phone。

所以，你永远不会通过电话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'
              }
            }))
          }

- 确保对所有这些情况都这样做。

顺便说一下，通常情况下，在这些类型的场景中使用switch-cases。开关盒不需要else-if。它实际上打破了它应该打开的情况，防止像你现在面临的问题。像这样;

var fieldType = inputInfo.id.toString();
switch (fieldType) {
  case "phone":
    if (inputVal.split('').length) {
      //return on true
    } else {
      //return on false;
    }
    break;
}

更好的做法是在代码中没有这么多回报，就像这样;

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 个答案: