反应中的输入文本验证是否包含至少一个字符和一个数字

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

请检查以下内容link

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 应用程序中的工作方式与您预期的一样。

Answer 2

顺便说一句

1) 可以替换

<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}
/>

有

<input
  {...props.input}
  {...props}
  className="form-control input-box__input"
  onKeyDown={this.onKeyDown}
/>

2) 您可以使用 html 次幂 ( https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_pattern ) 然后执行下一步：

<input
 {...props.input}
 {...props}
 {...this}
/>

这个class的属性是

className = 'form-control input-box__input';
onChange = (e) => {
 e.target.checkValidity();
 if (this.props.onChange) this.props.onChange()
}

但是要使用它，输入必须在<form></form>

里面

反应中的输入文本验证是否包含至少一个字符和一个数字

Input Text validation in react for containing at least one character and one number

javascript

reactjs

validation

onkeydown