输入文本验证在反应中包含至少一个字符和一个数字答案

【问题标题】：Input Text validation in react for containing at least one character and one number输入文本验证在反应中包含至少一个字符和一个数字
【发布时间】：2018-06-22 08:50:27
【问题描述】：

当用户输入值 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
    }
}

【问题讨论】：

添加代码、参考、示例、输出。如果你帮不了我们，我们也帮不了你。参考：How do I ask a good question?
用我的代码检查我更新的问题
Regex pattern to match at least 1 number and 1 character in a string的可能重复
当用户即时输入文本时，如何在我的函数中添加此模式

标签： javascript reactjs validation onkeydown

【解决方案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 应用程序中可以正常工作。

【讨论】：

【解决方案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}
/>

这个类的属性在哪里

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

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

【讨论】：