使用reactjs中的模式属性进行输入验证
使用reactjs中的模式属性进行输入验证
提问于 2018-09-14 04:15:33
我是第一次接触reactjs。我想在reactjs中验证带有模式属性(至少可以接受一个字符)的输入元素。下面是我尝试做的事情。
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方法中，我检查输入值是否不为空，然后认为是有效的。但是，如何使用模式属性进行输入验证，并以类似方式显示错误消息。谢谢。
编辑:我已经尝试使用上述代码中的html5验证应用编程接口。但随后我收到错误消息"Uncaught : Cannot read property 'valueMissing‘of undefined“。有人能帮我一下吗。谢谢。
回答 1
Stack Overflow用户
发布于 2018-09-14 07:23:22
您尚未在input上添加value属性
<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}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52321190
复制相关文章
相似问题