#javascript #reactjs
#javascript #reactjs
Вопрос:
Я новичок как в javascript, так и в react. В качестве части домашнего задания я должен проверить поле ввода, в котором пользователь вводит свой пароль. Под этим полем пароля отображаются условия, которым должен соответствовать пароль. Они должны измениться с красного на черный, когда пароль соответствует условию. Приложение разделено на четыре разных компонента.
Проблема сейчас в моем ограниченном понимании как react, так и javascript. Предполагая, что реализованный Validation.js логика правильная, я не знаю, как написать функцию handleInputChange (), которая сравнивает эту логику с пользовательским вводом. Может ли кто-нибудь помочь мне в этом или дать подсказку о том, как действовать дальше?
Спасибо
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.querySelector("#root")); App.js
import React, { Component } from "react";
import Validation from "./Validation";
import Styles from "./Styles";
class App extends Component {
constructor(props) {
super(props);
this.state = {
value: "",
conditions: {
special: false,
uppercase: false,
lowercase: false,
number: false,
minLength: false
}
};
}
handleInputChange(e) {
console.log(e.target.value);
}
render() {
return (
<div className="wrapper">
<div className="password field">
<h1>Password Validation</h1>
<form onSubmit={this.handleSubmit}>
<div className="Password">
<label htmlFor="Password" />
<input
type="text"
placeholder="Type password here"
onChange={this.handleInputChange}
/>
</div>
<div className="conditions">
<p>The password needs to meet the following conditions:</p>
<ul style={Styles}>
<li className="special">
One Special Character{" "}
{this.state.value === this.state.special}
</li>
<li className="uppercase">
One Letter Uppercase {this.state.value}
</li>
<li className="lowercase">
One Letter Lowercase {this.state.value}
</li>
<li className="number">One Number {this.state.value}</li>
<li className="minLength">
Minimum Length Of 8 Characters {this.state.value}
</li>
</ul>
</div>
<div>
<button className="submit button" type="submit">
Submit
</button>
</div>
</form>
</div>
</div>
);
}
}
export default App; Validation.js
import React from "react";
const Validation = value => {
let special = `!#$%amp;'()* ,-./:;<=>?@[]^_{|}~"`;
for (let i = 0; i < special.length; i ) {
if (value.indexOf(special[i]) > -1) {
this.setState({
special: true
});
}
}
let uppercase = `ABCDEFGHIJKLMNOPQRSTUVXYZ`;
for (let i = 0; i < uppercase.length; i ) {
if (value.indexOf(uppercase[i]) > -1) {
this.setState({
uppercase: true
});
}
}
let lowercase = `abcdefghijklmnopqrstuvxyz`;
for (let i = 0; i < lowercase.length; i ) {
if (value.indexOf(lowercase[i]) > -1) {
this.setState({
lowercase: true
});
}
}
let number = `0123456789`;
for (let i = 0; i < number.length; i ) {
if (value.indexOf(number[i]) > -1) {
this.setState({
number: true
});
}
}
let minLength = "";
for (let i = 0; i < minLength.length; i ) {
if (minLength[i] >= 7) {
this.setState({
minLength: true
});
}
}
};
export default Validation; Ответ №1:
Я думаю, вам следует создать отдельные функции из validation js и использовать их. Например:
//App.js
hasSpecial(value) {
const special = '!#$%amp;'()* ,-./:;<=>?@[]^_{|}~"';
return value.split("").some(char => special.includes(char));
// or with regexp
return /[!#$%amp;'()* ,-./:;<=>?@[]^_{|}~"]/.test(value);
}
handleInputChange(value) {
this.setState({
value,
conditions: {
special: this.hasSpecial(value)
}
});
}
...
<input
type="text"
placeholder="Type password here"
onChange={e => this.handleInputChange(e.target.value)}
value={this.state.value}
/>
У меня есть несколько предложений по улучшению вашего кода и ваших навыков:
Ответ №2:
Звучит как чертовски хорошее место для использования регулярных выражений (regEx)
Вы можете написать какой-нибудь очень чистый код проверки, подобный этому, с регулярным выражением.
Я написал для вас пример здесь, но также смотрите ниже:https://codesandbox.io/s/nkqx1zmp6j
импортируйте React из «react»;
class Input extends React.Component {
constructor(props) {
super(props);
this.state = {
text: "",
validationError: ""
};
}
handleOnChange = event => {
this.setState({
text: event.target.value
});
};
checkPassword = event => {
event.preventDefault();
let pattern = /^(?=.*[0-9])(?=.*[!@#$%^amp;*])(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9!@#$%^amp;*]{5,20}$/;
let password = this.state.text;
if (!pattern.test(password)) {
this.setState({
validationError:
"Your password needs a number, special character, lowercase letter, capital letter and can only be between 5 and 20 characters"
});
} else {
console.log(true);
this.setState({
validationError: ""
});
}
};
render() {
return (
<div>
<form onSubmit={this.checkPassword}>
<input value={this.state.text} onChange={this.handleOnChange} />
<button type="submit">Submit</button>
</form>
<p>{this.state.validationError}</p>
</div>
);
}
}
export default Input;
Комментарии:
1. Привет, спасибо за твой ответ. Вместо использования вашего регулярного выражения я бы предпочел использовать мое Validation.js файл. Я, конечно, перейду к регулярным выражениям позже, но для понимания целей обучения я хотел бы, чтобы это работало таким образом. Есть мысли о том, как решить мою проблему, сохранив Validation.js что такое?
2. Сегодня я постараюсь кое-что подготовить для вас. Ваша цель сохранить логику проверки в отдельном файле?