如何在 Reactjs 中设置输入验证的 setTimeout
介绍 您可能有过这样的经历：在输入字段中输入内容后，突然发现输入内容全是错误。这是一种糟糕的用户体验—您肯定不希望自己的Web应用程序的用户遇到这种情况。 在本指南中，我将解决这个普遍存
介绍
您可能有过这样的经历：在输入字段中输入内容后，突然发现输入内容全是错误。这是一种糟糕的用户体验 — 您肯定不希望自己的 Web 应用程序的用户遇到这种情况。
在本指南中，我将解决这个普遍存在的问题，并向您展示一种使用setTimeout函数延迟错误消息的方法。
一个例子
对于本指南，我将创建一个非常最小的登录表单，其中有两个输入字段：电子邮件和密码。
我们的组件状态如下所示：
this.state = {
values: {
email: "",
password: ""
},
errors: {
email: "",
password: ""
}
};
我们将为每个输入字段分别设置错误状态。
验证函数
电子邮件和密码验证函数如下：
validateEmail = email => {
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!re.test(String(email).toLowerCase()))
this.setErrors({ email: "Email is invalid" });
else this.setErrors({ email: "" });
};
validatePassword = password => {
if (password.length < 8)
this.setErrors({ password: "Password must have at least 8 characters" });
else this.setErrors({ password: "" });
};
在validateEmail()函数中，我们使用正则表达式来测试用户输入的电子邮件，在validatePassword()函数中，我们检查用户输入的密码是否至少有8个字符。如果验证失败，我们将为相应的字段设置错误状态并显示它。
setErrors = error =>
this.setState({
errors: { ...this.state.errors, ...error }
});
事件处理程序
当输入发生变化或失去焦点时，我们将验证输入字段。为了简化输入处理，我们将为两个输入编写一个onChange处理程序。
handleInputChange = e => {
if (e.target.name === "email") {
this.validateEmail(e.target.value);
}
if (e.target.name === "password") {
this.validatePassword(e.target.value);
}
this.setState({
values: { ...this.state.values, [e.target.name]: e.target.value }
});
};
在onBlur处理程序中，我们将对各个字段调用验证函数，如下所示：
// ...
<input
type="email"
name="email"
id="email"
value={this.state.values.email}
onChange={this.handleInputChange}
onBlur={e => this.validateEmail(e.target.value)}
title="Email"
required
/>
// ...
<input
type="password"
name="password"
id="password"
value={this.state.values.password}
onChange={this.handleInputChange}
onBlur={e => this.validatePassword(e.target.value)}
title="password"
required
/>
// ...
此时，验证将立即完成，因此我们需要将其延迟至少 800 毫秒。
使用 setTimeout 进行延迟
我们将在setTimeout()函数的回调中调用setErrors()函数。
setTimeout ()函数接受第一个参数作为在特定持续时间后执行的函数，第二个参数是以毫秒为单位的时间持续时间。
因此我们更新的验证函数如下：
validateEmail = email => {
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!re.test(String(email).toLowerCase()))
setTimeout(() => this.setErrors({ email: "Email is invalid" }), 800);
else this.setErrors({ email: "" });
};
validatePassword = password => {
if (password.length < 8)
setTimeout(
() =>
this.setErrors({
password: "Password must have at least 8 characters"
}),
800
);
else this.setErrors({ password: "" });
};
完整代码
index.js 文件
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class SignInForm extends Component {
constructor(props) {
super(props);
this.state = {
values: {
email: "",
password: ""
},
errors: {
email: "",
password: ""
}
};
}
submitForm = async e => {
e.preventDefault();
if (
this.state.errors.email.length > 0 &&
this.state.errors.password.length > 0
)
return false;
console.log(this.state);
};
validateEmail = email => {
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!re.test(String(email).toLowerCase()))
setTimeout(() => this.setErrors({ email: "Email is invalid" }), 800);
else this.setErrors({ email: "" });
};
validatePassword = password => {
if (password.length < 8)
setTimeout(
() =>
this.setErrors({
password: "Password must have at least 8 characters"
}),
800
);
else this.setErrors({ password: "" });
};
setErrors = error =>
this.setState({
errors: { ...this.state.errors, ...error }
});
handleInputChange = e => {
if (e.target.name === "email") {
this.validateEmail(e.target.value);
}
if (e.target.name === "password") {
this.validatePassword(e.target.value);
}
this.setState({
values: { ...this.state.values, [e.target.name]: e.target.value }
});
};
render() {
return (
<div>
<form onSubmit={this.submitForm}>
<div className="input-group">
<label htmlFor="email">E-mail Address</label>
<input
type="email"
name="email"
id="email"
value={this.state.values.email}
onChange={this.handleInputChange}
onBlur={e => this.validateEmail(e.target.value)}
title="Email"
autoComplete="off"
required
/>
<p class="error">{this.state.errors.email}</p>
</div>
<div className="input-group">
<label htmlFor="password">Password</label>
<input
type="password"
name="password"
id="password"
value={this.state.values.password}
onChange={this.handleInputChange}
onBlur={e => this.validatePassword(e.target.value)}
title="password"
required
/>
<p class="error">{this.state.errors.password}</p>
</div>
<button type="submit">Sign In</button>
</form>
</div>
);
}
}
function App() {
return (
<div className="App">
<h1>Sign In To Your Account</h1>
<SignInForm />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
样式.css
.App {
font-family: sans-serif;
}
.input-group {
margin-bottom: 10px;
}
.input-group label {
display: block;
margin-bottom: 5px;
}
button {
border: none;
padding: 8px 24px;
}
.message {
margin-top: 20px;
font-weight: 600;
}
.error {
color: red;
font-size: 14px;
}
结论
在本指南中，我们研究了如何解决输入验证中的常见 UX 问题，以增强 Web 应用程序中表单的可用性。
这就是本指南的全部内容。希望你喜欢它。有关更多其他提示，请参阅我关于 React 的其他指南。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
阅读全文
请先 登录后发表评论 ~