Обзор
После реализации основ нашей формы входа/регистрации все, от макета, стиля и структуры, теперь нам нужно добавить некоторые функции в форму, чтобы сделать ее живой и действительно может выполнять действия (отзывчивые), поэтому мы собираемся создать систему проверки. , это позволит вам сказать, являются ли какие-либо входные данные пустыми или несовместимыми с данными, которые вам нужны, и это, сообщая пользователю, в чем проблема таким приятным способом.
Кроме того, мы постараемся создать генератор надежности паролей, который позволит нам определить, является ли пароль, который будет использоваться для регистрации, слабым, средним или достаточно сильным.
Мы собираемся работать только над компонентом регистрации, так как поля входа и регистрации практически одинаковы.
Проверка входных данных формы
Мы собираемся сделать это, создав массив ошибок в состоянии компонента, который будет содержать ошибки проверки, поступающие из входных данных (имя пользователя, адрес электронной почты и пароль).
Во-первых, давайте создадим методы, которые позволят нам манипулировать массивом ошибок (добавлять или удалять элемент из массива и обновлять состояние).
...
//Add New Error Object to the array {elm: msg}
showValidationErr(elm, msg) {
this.setState((prevState) => ({
errors: [
...prevState.errors, {
elm,
msg
}
]
}));
}
//Remove a specific element from the array
clearValidationErr(elm) {
this.setState((prevState) => {
let newArr = [];
//Add all elements from the prev array to the new one that has a different element
for (let err of prevState.errors) {
if (elm != err.elm) {
newArr.push(err);
}
}
return {errors: newArr};
});
}Теперь нам нужно сохранить входные данные в наше состояние (имя пользователя, адрес электронной почты и пароль), мы делаем это с помощью события onChange, что означает, что всякий раз, когда на входе вводится новый символ, что-то делать, и в этом случае мы хотим обновить состояние.
...
//Update Username, password, and email on change event
onUsernameChange(e) {
this.setState({username: e.target.value});
//We want to clear the error when ever the user type something new
this.clearValidationErr("username");
}
onEmailChange(e) {
this.setState({email: e.target.value});
this.clearValidationErr("email");
}
onPasswordChange(e) {
this.setState({password: e.target.value});
this.clearValidationErr("password");
}также обязательно привяжите его к соответствующим элементам ввода, чтобы обратный вызов события работал правильно.
<input
type="text"
name="username"
className="login-input"
placeholder="Username"
onChange={this
.onUsernameChange
.bind(this)}/>
//Do it for all the other inputsTo render the errors to the user we need to check first which elements are having a validation error then render them below each input that has the error.
Under the render method check for where the error is.
render() {
...
//NULL by default (help us check when rendering)
let usernameErr = null,
passwordErr = null,
emailErr = null;
//Loop and find which ones has the error
for (let err of this.state.errors) {
//Assign the validation error message
if (err.elm == "username") {
usernameErr = err.msg;
}
if (err.elm == "password") {
passwordErr = err.msg;
}
if (err.elm == "email") {
emailErr = err.msg;
}
//No (else if or else) statements cause we need to check for all possible elements
}
}So we can later use it like this to weather render or not
//Make sure to put this bellow each corresponding input (change it with the right variable)
render() {
...
<small className="danger-error">{usernameErr
? usernameErr
: ""}
</small>
}Последнее, что нужно сделать, это показать эти ошибки проверки всякий раз, когда это необходимо, поэтому, когда мы отправляем регистрационную форму, мы должны проверить, какие входные данные пусты, и показать ошибку для соответствующих элементов.
submitRegister(e) {
//Check for all input fields and show errors if empty (you can implement other cases!)
if (this.state.username == "") {
this.showValidationErr("username", "Username Cannot be empty!");
}
if (this.state.email == "") {
this.showValidationErr("email", "Email Cannot be empty!");
}
if (this.state.password == "") {
this.showValidationErr("password", "Password Cannot be empty!");
}
}Вы можете пойти дальше и попытаться отправить пустую регистрационную форму, которую вам должны отклонить, и вы получите ошибки проверки, Отлично!
Надежность Пароля
Таким образом, для генератора длины пароля нам нужно проверить введенную длину пароля и отобразить ее длину.
Поэтому нам нужна переменная состояния, которая содержит текущее состояние пароля (слабый, средний или сильный) и которое будет определяться при вводе пароля (при смене пароля).
Сначала проверьте длину пароля и обновите состояние относительно этого.
onPasswordChange(e) {
...
//By default the state is weak
this.setState({pwdState: "weak"});
if (e.target.value.length > 8) {
this.setState({pwdState: "medium"});
} else if (e.target.value.length > 12) {
this.setState({pwdState: "strong"});
}
}Для этого нам нужно определить текущее состояние пароля всякий раз, когда нам нужно обновить (рендерить) компонент.
render() {
...
//states are by default false = (do not render)
let pwdWeak = false,
pwdMedium = false,
pwdStrong = false;
//Weak password set onlt the pwdWeak to true, cause render only the first bar
if (this.state.pwdState == "weak") {
pwdWeak = true;
} else if (this.state.pwdState == "medium") {
//Medium pwd then render the weak and medium bars
pwdWeak = true;
pwdMedium = true;
} else if (this.state.pwdState == "strong") {
//Strong, render all the previoud bars
pwdWeak = true;
pwdMedium = true;
pwdStrong = true;
}
}Итак, мы проверяем текущее состояние и указываем, какой столбец (цвет) нужно отображать в правильном порядке (слабый › средний › сильный), каждый из которых также отображает предыдущие, чтобы мы могли имитировать генератор длины пароля.
Нам нужно отобразить столбцы длины пароля под полем ввода пароля.
/*Render a container that holds the state bars, by adding the show class to the classNames list we can either render the current bar or no and that is depending on the password state */
render() {
...
{this.state.password && <div className="password-state">
<div
className={"pwd pwd-weak " + (pwdWeak
? "show"
: "")}></div>
<div
className={"pwd pwd-medium " + (pwdMedium
? "show"
: "")}></div>
<div
className={"pwd pwd-strong " + (pwdStrong
? "show"
: "")}></div>
</div>}
}Вы можете скачать таблицу стилей, которую мы используем, с Github.
Теперь вы можете попробовать генератор надежности пароля, введя также разные пароли, вы можете использовать другие методы для угадывания надежности пароля.
Что дальше
Надеюсь, вам понравилось программировать поля формы входа/регистрации в React, теперь вы можете взять эту форму и реализовать больше функций, чтобы включить ее в свое приложение.
