javascript - React 中的输入文本验证至少包含一个字符和一个数字

Question

我想在用户输入 onKeyDown 事件值时在输入字段中添加验证。验证是我的输入必须至少包含一个字符和至少一个数字。当验证为真时，必须启用或禁用验证文本。此外，如果用户退格并且文本不包含至少一个值或一个数字，则必须启用验证。我已经用两个标志设置了内部状态。我的问题是我的验证功能必须如何？代码:

const InputField = props => (
  <div className="input-row">
    <input
      {...props.input}
      type={props.type}
      className="form-control input-box__input"
      placeholder={props.placeholder}
      value={props.value}
      defaultValue={props.defaultValue}
      defaultChecked={props.defaultChecked}
      disabled={props.disabled}
      onChange={props.onChange}
      onKeyDown={this.onKeyDown}
      checked={props.checked}
    />
    {props.meta.touched && props.meta.error &&
    <span className="error">
        {props.intl.formatMessage({ id: props.meta.error }) }
      </span>}
  </div>
);

const onKeyDown = (e) => {
    // Add logic here
    }
}

Answer 1

请检查以下链接

https://jsfiddle.net/69z2wepo/201010/

它有以下代码:

class Hello extends React.Component {
    state = {hasError:false};

    onChange(event){
    if(event.target.value.match(/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/)){
        this.setState({hasError:false});
    }else{
        this.setState({hasError:true});
    }
  }

  render() {
    return <div>
      <input name="name" onChange={this.onChange.bind(this)}/>
      {this.state.hasError && <span>Error</span>}
    </div>;
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

这正如您在 React 应用程序中所期望的那样工作。