使用错误数组响应验证输入字段
使用错误数组响应验证输入字段
提问于 2022-01-24 12:51:44
我想对HTML字段应用一些验证规则，并在每次检查不通过时将错误消息添加到errors状态数组中。
<input
name="email"
type="email"
value={ email }
placeholder="Type your email address here..."
onChange={ handleChange }
/>
<button
className="Form_Submit"
onClick={ handleSubmit }
>
<i className="fas fa-arrow-right" />
</button>handleSubmit() {
const {
values: {
email = '',
errors = []
} = {}
} = this.state;
if (!validateEmailAddress(email)) {
errors.push('Please provide a valid e-mail address');
}
if (isEmpty(email)) {
errors.push('Email address is required');
}
}更新：
if (!validateEmailAddress(email)) {
this.setState({
errors: [...errors, 'Please provide a valid e-mail address']
});
}
if (isEmpty(email)) {
this.setState({
errors: [...errors, 'Email address is required']
});
}以下语法不占用组件更新时间，因此每次单击submit按钮时，我都会收到4-8条消息。是否有方法处理errors数组中的输入字段验证(最后显示所有消息)以将单个值推送到数组中，然后删除它？
回答 2
Stack Overflow用户
发布于 2022-01-24 13:09:13
我想你错过了设定状态。
handleSubmit() {
const {
values: {
email = '',
errors = ''
} = {}
} = this.state;
if (!validateEmailAddress(email) && !errors.contains('Please provide a valid e-mail address')) {
errors.push('Please provide a valid e-mail address')
}
if (!!email && !errors.contains('Email address is required')) {
errors.push('Email address is required');
}
setValues({...rest, errors});
if (!errors.length) {
doFunc(); //your expected function
}
}Stack Overflow用户
发布于 2022-01-24 13:42:15
您可以参考这段代码https://www.codegrepper.com/code-examples/javascript/push+unique+values+in+array+javascript
const myArray = ['a', 1, 'a', 2, '1'];
const unique = [...new Set(myArray)]; // ['a', 1, 2, '1']设置在javascript存储唯一的值，所以它将是有帮助的。您可以应用以下代码
const errorSet = new Set([...this.state.errors]);
if (!validateEmailAddress(email)) {
errorSet.add('Please provide a valid e-mail address');
}
if (isEmpty(email)) {
errorSet.add('Email address is required');
}
this.setState({
errors: [...errorSet]
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70834165
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号