Question

我是Reactjs的新手。我想在reactjs中使用pattern属性（可以接受至少一个字符）来验证输入元素。以下是我尝试做的事情。

handle_text_input_change = (event) => {
    this.props.onChange(event);
    console.log("handle",event.target.name);
    this.setState({text_input_value: event.target.value});
    this.validate(event);
};

validate = (event) => {
    let name = event.target.name;
    console.log("target name", name);
    //const target = event.target;
    if (event.target.ValidityState.patternMismatch) {
            this.setState({is_valid: false});
            this.setState({error: 'Enter the'+ {name} +'with atleast one 
         character'});
     }};

 return (
        <div>
            <input {...rest}
                type="text"
                onChange={this.handle_text_input_change}
                disabled={disabled}
                onBlur={this.handle_blur}
                onFocus={this.handle_focus}
                pattern=".+"
            />
            {(valid && active)&& <span className="error">Enter a name</span>}
        </div>
    );

因此，当输入无效时，它将显示错误消息。但是，在validate方法中，我正在检查输入值是否不为null，然后认为有效。但是我该如何使用模式属性进行输入验证并类似地显示错误消息。谢谢。

编辑：我已经尝试使用html5验证api，如上面的代码所示。但随后出现错误“未捕获的TypeError：无法读取未定义的属性'valueMissing'”。有人可以帮我吗谢谢。

Answer 1

您尚未在value上添加input属性：

<input {...rest}
  type="text"
  onChange={this.handle_text_input_change}
  disabled={disabled}
  onBlur={this.handle_blur}
  onFocus={this.handle_focus}
  value={this.state.text_input_value}
/>

使用React.js中的模式属性进行输入验证

1 个答案: