Полный подход к основной проверке формы в React.js
Обеспечение точности и достоверности данных, отправленных пользователями, является важной частью обеспечения безопасности любого веб-приложения React.js в современном мире быстро развивающейся среды веб-разработки.
В этом подробном пошаговом руководстве я покажу вам, как выполнить проверку формы с помощью React.js, а в конце этой статьи вы освоите процесс проверки формы в React.js. Вы также создадите удобную для пользователя форму и настроите сквозное и модульное тестирование в своем приложении.
Контур
- Введение в проверку формы и ее важность
- Как реализовать проверку формы в React.js
- Заключение
Введение в проверку формы и ее важность
Проверка формы — это процесс проверки точности, полноты и отсутствия вредоносных данных, отправленных пользователями, перед их отправкой на сервер. Существует два основных типа проверки формы. Проверка происходит на стороне пользователя перед отправкой формы на сервер. Этот тип проверки также известен как проверка на стороне клиента. Второй тип проверки выполняется на сервере после отправки формы.
Проверка на стороне сервера является наиболее эффективным типом проверки, поскольку злоумышленники могут обойти проверку на стороне клиента. Клиентская сторона также имеет свои преимущества, но не следует полностью полагаться на проверку на стороне клиента, у вас должны быть дополнительные методы проверки на стороне сервера.
В этой статье мы сосредоточимся на проверке на стороне клиента и на том, как вы можете реализовать проверку на стороне клиента в своем приложении React.js.
Правильная проверка формы приводит к повышению производительности в React.js, повышая удобство работы пользователей. Лучший пользовательский опыт приведет к возможному удержанию пользователей. Итак, в этой статье мы реализуем проверку формы в React.js.
Как реализовать проверку формы в React.js
Создание удобных и интерактивных форм имеет решающее значение для обеспечения беспрепятственного взаимодействия с пользователем. При создании логики проверки формы вам придется подумать о добавлении таких функций, как проверка в реальном времени и обратная связь, которые дадут пользователям лучший опыт.
Существуют разные способы добавления проверки формы в форму React.js, но в этой статье вы собираетесь реализовать проверку формы без использования внешних библиотек и API.
Несколько входных атрибутов, таких как атрибуты required и pattern, были введены в HTML5 для облегчения базовой проверки формы без использования кода JavaScript. В этом разделе вы будете использовать эти атрибуты для реализации базовой проверки формы в вашем приложении React.js.
Создайте свое приложение React.js
Вы начнете с создания проекта React.js, если вы еще не создали его. Вы можете пропустить этот шаг, если у вас уже есть проект react.js.
Откройте папку проекта VScode, а затем откройте встроенный терминал VScide и выполните приведенную ниже команду.
npm create vite@latest
Это вызовет диалоговое окно в терминале, чтобы вы могли назвать свой проект. Вы можете дать ему любое имя и нажать на кнопку enter. Затем вам будет предложено выбрать фреймворк для вашего проекта, просто прокрутите вниз до того места, где вы видите react, и снова нажмите кнопку enter .
Наконец, вам будет предложено выбрать язык для вашего проекта, переместите стрелку туда, где вы видите JavaScript, и нажмите enter, и ваш проект React.js будет создан для вас с помощью этих простых шагов.
Теперь все, что вам нужно сделать, это запустить приведенную ниже команду и установить все зависимости, необходимые для запуска вашего приложения Vite React.
Сначала перейдите в папку, в которой вы создали свой проект React.js с помощью vite.
cd ./project-name
project-name выше означает имя, которое вы назвали своим проектом при его создании.
Затем выполните команду ниже:
npm install
Затем откройте свое приложение в браузере с помощью следующей команды:
npm run dev
Создайте простую форму React.js
В этом разделе вы создадите простую форму с 6 полями ввода. В первом поле ввода будут собраны полные имена пользователя. Это поле ввода будет принимать только буквы, а не цифры или специальные символы, в то время как второе поле будет полем username, это поле будет принимать цифры, буквы или специальные символы. Затем у вас также есть поле email , где пользователю будет предложено ввести правильный адрес электронной почты, и ваша форма подтвердит правильность введенного адреса электронной почты.
Тогда у вас есть поле Date of Birth, это поле не будет обязательным в этом руководстве, но если вы создаете приложение, которое не подходит для молодых людей, например, сайт знакомств, вы можете сделать его обязательным.
Затем у вас есть поле password, в этом поле вы будете устанавливать правила, которые заставят ваших пользователей делать их пароли как можно более сложными. Вы проверите, содержит ли ввод пользователя прописные и строчные буквы, цифры и специальные символы, а также содержит ли он до 8 символов.
У вас также будет aConfirm Password field, это поле, как следует из названия, подтвердит пароль пользователя, проверив, соответствуют ли введенные значения значениям в the password field. Затем, наконец, кнопка Submit, которая запускает процессы обработки формы.
Создайте папку внутри папки src вашего приложения React.js и назовите ее components. Внутри папки components создайте файл и назовите его Form.jsx.
Внутри your Form.jsx file создайте компонент aForm с кодом ниже:
{/***Components/Form.jsx*/}
import React from 'react'
const Form = () => {
return (
<div>Form</div>
)
}
export default Form
Затем импортируйте компонент формы в the App.jsx file с помощью кода ниже:
{/***Components/Form.jsx*/}
import React from 'react'
import './App.css'
import Form from './components/Form'
const App = () => {
return (
<div className='app'>
<Form />
</div>
)
}
export default App
Теперь ваше приложение отображает компонент yourForm, но вам нужно создать настоящую форму, поэтому в файле Form.jsx добавьте приведенный ниже код, чтобы создать простую форму с 6 полями ввода.
{/***Components/Form.jsx*/}
import React from 'react'
const Form = () => {
return (
<div className='formInput'>
<form>
<h1>Register</h1>
{/**Full Name field */}
<div className='form'>
<label>Full Name</label>
<input
type='text'
placeholder='John Doe'
/>
</div>
{/**User Name field */}
<div className='form'>
<label>User Name</label>
<input
type='text'
placeholder='JohnDoe1'
/>
</div>
{/**Email address field */}
<div className='form'>
<label>Email address</label>
<input
type='email'
placeholder='[email protected]'
/>
</div>
{/**Date of Birth field */}
<div className='form'>
<label>Date of Birth</label>
<input
type='date'
/>
</div>
{/**Password field */}
<div className='password'>
<div className='password-input'>
<label>Password</label>
<input placeholder='Enter a strong password'
type="password"
/>
</div>
</div>
{/**Confirm Password filed */}
<div className='confirmPassword'>
<label>Confirm Password</label>
<input placeholder='confirm your password'
type='password'
/>
</div>
{/** Submit Button */}
<button>Submit</button>
</form>
</div>
)
}
export default Form
Приведенный выше код создаст простой файл с 6 полями ввода. Прямо сейчас ваше поле пароля не отображает свое значение для пользователя при вводе, это потому, что его тип был установлен на password, но иногда ваши пользователи могут захотеть увидеть, что они вводят, поэтому было бы неплохо, если бы вы могли настроить функция, которая будет либо отображать, либо скрывать пароль пользователя при вводе в поле пароля, для этого вам нужно использовать значок.
Один из способов использования значка в React.js без установки библиотеки — сделать ремикс значков и загрузить файл svg значка. Иконки ремиксов имеют множество бесплатных значков, которые вы можете использовать в своем приложении React.js, просто перейдите к значкам ремиксов и найдите значок eye icons,select eye-fill, установите размер 24 пикселя, и загрузите файл SVG, выберите значок eye-off-fill, также установите его размер 24 пикселя, и скачать SVG файл.
Создайте папку внутри папки src и назовите ее assets. Перетащите файлы eye-fill.svg и eye-off-fill.svg в папку assets.
Теперь импортируйте файлы eye-fill.svg и eye-off-fill.svg в ваш файл Form.jsx с кодом
{/***Components/Form.jsx*/}
import React from 'react'
import Eyeicon from '../assets/eye-fill.svg'
import Eyeofficon from '../assets/eye-off-fill.svg'
Чтобы отобразить значок в браузере, вы должны использовать HTML-тег img и связать его источник с изображениями Eyeicon and Eyeofficon, которые вы импортировали с помощью HTML-атрибута src . В операторе return под вашим password-input div tag добавьте приведенный ниже код.
{/***Components/Form.jsx*/}
<div className='password-eye'>
<img src={Eyeicon}/>
<img src={Eyeofficon} />
</div>
В настоящее время в вашей форме будут отображаться как Eyeicon, так и Eyeofficon , но вам нужно отображать только по одному за раз. Например, если тип поля password input должен отображаться как text то Eyeofficon, а если это password то должен отображаться Eyeicon.
Чтобы реализовать эту функцию, создайте функцию a showPassword state и setShowPassword и установите для нее значение false с помощью приведенного ниже кода.
{/***Components/Form.jsx*/}
import React, {useState} from 'react'
import Eyeicon from '../assets/eye-fill.svg'
import Eyeofficon from '../assets/eye-off-fill.svg'
const Form = () => {
{/**Show password state */}
const [showPassword, setshowPassword] = useState(false)
Теперь вам нужно создать функцию handleShowPassword , которая будет переключать значение состояния showPassword между falseи true с помощью приведенного ниже кода.
{/***Components/Form.jsx*/}
{/**handleShowPassword function */}
const handleShowPassword = () =>{
setshowPassword(!showPassword)
}
Затем используйте тернарный оператор для отображения the Eyeicon and Eyeofficon и передайте the handleShowPassword function в an onClick event с кодом ниже
{/***Components/Form.jsx*/}
<div className='password-eye'>
{(showPassword === true)? <img src={Eyeicon} onClick={handleShowPassword}/>:<img src={Eyeofficon} onClick={handleShowPassword}/>}
</div>
Из приведенного выше кода вы проверили, является ли состояние showPassword 67_ для отображения Eyeicon или ложно для отображения Eyeofficon. Затем вы передали функцию handleShowPassword событию onClick. Поэтому всякий раз, когда вы нажимаете на изображение, значение the showPassword state будет меняться, и будет отображаться другой значок.
Чтобы сделать поле ввода пароля динамическим, измените тип ввода с помощью приведенного ниже кода.
{/***Components/Form.jsx*/}
{/**Password field*/}
type={(showPassword === true)? "text": "password"}
Наконец, создайте файл form.css в папке your component и добавьте в него приведенный ниже код, чтобы придать вашей форме стиль.
body{
background: rgb(198,197,214);
background: linear-gradient(90deg, rgba(198,197,214,1) 0%, rgba(190,56,187,1) 71%, rgba(116,202,219,1) 100%);
height: 100%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.app{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 100vh;
}
.form{
display: flex;
flex-direction: column;
width: 280px;
}
input{
padding: 15px;
margin: 10px 0px;
}
form{
background-color: white;
padding: 0px 150px;
border-radius: 10px;
}
h1{
color: blue;
text-align: center;
padding-top: 10px;
}
label{
size: 12px;
color: grey;
}
button{
width: 100%;
height: 50px;
padding: 10px;
border: none;
background-color: blue;
color: white;
border-radius: 10px;
margin-top: 10px;
margin-bottom: 10px;
font-weight: bold;
font-size: 18px;
cursor: pointer;
}
.password-input{
display: flex;
flex-direction: column;
}
.confirmPassword{
display: flex;
flex-direction: column;
}
.password-eye{
position: absolute;
right: 37rem;
top: 32.2rem;
color: black;
font-size: 1.5rem;
line-height: 2rem;
}
Импортируйте файл form.css в Form.js с помощью приведенного ниже кода.
{/***Components/Form.jsx*/}
import './form.css'
При этом у вас есть простая и хорошо оформленная форма, но вы не включили требования проверки. Следующим шагом будет добавление требований проверки.
Добавьте правила проверки формы и сообщения об ошибках
На предыдущих шагах вы смогли настроить свой проект React.js, создать и оформить простую форму, но ваша форма не может проверять ввод пользователей.
На этом шаге вы добавите функцию проверки ввода во все поля ввода в вашей форме.
Для поля Full Name вы убедитесь, что пользователи вводят только буквы, а не цифры или специальные символы. Чтобы реализовать эту функцию, добавьте приведенный ниже код в тег ввода поля «Полное имя».
{/*** Components/Form.js*/}
{/**Full Name field*/}
<input
pattern="^[A-Z a-z]{3,16}$"
required/>
Из приведенного выше кода вы только что сделали поле Full Name обязательным полем с атрибутом required , затем вы реализовали функцию, которая будет проверять, имеют ли символы, введенные пользователем, длину до 3 символов, не более 16 символов и содержат только алфавиты, передав шаблон регулярного выражения для атрибута pattern .
Обратите внимание, что в вашем шаблоне регулярного выражения вы добавили пробел, это указывает на то, что значение вашего поля ввода «Полное имя» может содержать пробелы. Это связано с тем, что полные имена представляют собой несколько имен, поэтому, чтобы пользователь мог разделить каждое имя, им необходимо включить пробелы, чтобы добавить пробелы между каждым именем.
Следующее поле — the Username field. В этом поле вы должны реализовать функцию, которая позволит пользователю использовать любые символы, кроме специальных символов и пробелов. Добавьте приведенный ниже код в тег ввода your Username field.
{/***Components/Form.js*/}
{/***Username field*/}
<input
pattern='^[A-Za-z0-9]{3,16}$'
required
Как и в случае с полем Full Name , вы сделали поле Username обязательным полем с добавленным атрибутом required , а затем вставили шаблон регулярного выражения в атрибут pattern , чтобы убедиться, что входные данные, введенные пользователем, содержат только буквы и цифры, и они соответствуют 3 символа длиной и не более 16 символов.
Следующее поле — the Email field. Все, что вам нужно сделать в этом поле, это добавить атрибут required к входному тегу, чтобы сделать его обязательным полем. Вы уже установили его шаблон как электронную почту, установив it type to email. Поэтому, если пользователь вводит ввод, который не похож на адрес электронной почты, ваша форма должна выдать ошибку.
Следующее поле — поле Date of Birth . Это поле не будет обязательным в этой статье, но если вы создаете такие приложения, как сайты знакомств или некоторые другие типы веб-приложений, которые имеют ограничения для определенных возрастных групп, вы можете сделать его обязательным, добавив к нему атрибут required.
Следующее поле — the Password field. В этом поле нужно убедиться, что пароль пользователя очень сложный и трудно угадываемый. Для этого добавьте приведенный ниже код в тег ввода your Password field.
{/*** Components/Form.js*/}
{/***Password field*/}
<input
pattern='^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,16}$'
required
Из приведенного выше кода вы сделали поле Password обязательным полем с атрибутом required, затем проверили, содержит ли пароль строчную и прописную букву, цифру и какой-либо специальный символ, а также длина пароля не превышает 8 символов. Вы смогли сделать это, передав шаблон регулярного выражения в атрибут the pattern attribute.
Наконец, вы должны сделать поле Confirm Password обязательным полем и убедиться, что входные данные совпадают с входными данными в поле Password . Создайте состояние пароля и функцию setPassword с помощью приведенного ниже кода.
import Eyeofficon from '../assets/eye-off-fill.svg'
const Form = () => {
const [password, setPassword] = useState("")
Затем установите значение состояния пароля на введенное пользователем значение в поле Password, передав атрибут onChange в поле Password .
{/*** Components/Form.js*/}
{/***Password field*/}
<input placeholder='Enter a strong password'
type={(showPassword === true)? "text": "password"}
onChange={e=> setPassword(e.target.value)}
pattern='^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8}$'
required
/>
Теперь в поле Confirm Password добавьте приведенный ниже код, чтобы установить шаблон поля Confirm Password в состояние password, а также сделать его обязательным полем.
{/***Components/Form.js*/}
{/***Confirm Password field*/}
<input
pattern={password}
onPaste={e=>{
e.preventDefault()
false
}}
required
В приведенном выше коде вы использовали атрибут pattern для установки правила проверки, которое будет проверять, совпадает ли ввод в поле Confirm Password the с полем Password , а также вы предотвратили копирование и вставку текста из поля Password в поле Confirm Password , установив для атрибута onPaste значение false, после чего вы сделали это обязательное поле с использованием атрибута required .
Ваши правила проверки формы были успешно установлены, но вам необходимо добавить сообщения об ошибках, которые будут отображаться в каждом поле, если пользователь не соответствует каким-либо требованиям проверки. В поле «Полное имя» добавьте приведенный ниже код под тегом input tag.
{/***Components/Form.js*/}
{/***Full Name*/}
<span>Your name should be 3-16 characters with only letters </span>
В поле «Имя пользователя» также добавьте приведенный ниже код под тегом input tag.
{/*** Components/Form.js*/}
{/***Username field*/}
<input
/>
<span>Your username can contain all characters and should be 3-16 characters</span>
Добавьте приведенный ниже код в поле электронной почты:
{/***Components/Form.js*/}
{/***Email*/}
<span>This not a valid email address</span>
Затем добавьте приведенный ниже код в поле your Password под полем Password input tag.
{/***Components/Form.js*/}
{/***Password field*/}
<span>A strong password should have atleast one <br /> uppercase and lowercase letter, one number and any <br /> special character and should be atleast 8 characters</span>
затем, наконец, добавьте приведенный ниже код в поле your Confirm Password field,
<span>Passwords does not match</span>
Теперь стилизуйте сообщения об ошибках формы. Обратите внимание, что сообщения об ошибках черные и слишком большие, а также отображаются без ошибок.
Что вам нужно сделать, так это отображать сообщения об ошибках всякий раз, когда есть ошибка в любом из полей формы. Итак, в файле form.css добавьте приведенный ниже код, чтобы оформить сообщение об ошибке.
span{
font-size: 10px;
padding: 3px;
color: red;
display: none;
}
input:invalid ~ span{
display: block;
}
Таким образом, вы создали и внедрили функцию проверки формы в форму React.js.
Заключение
Разработчику важно освоить проверку формы, это поможет вам защитить ваше приложение от кибератак, а также защитить конфиденциальные данные пользователей.
Проверка формы гарантирует, что пользователи вводят правильные данные, а также повышает удобство работы пользователей. Хотя существуют внешние библиотеки, которые можно использовать для проверки формы в React.js, также важно, чтобы вы понимали эти библиотеки, прежде чем использовать их для проверки формы, поскольку большинство из этих библиотек также могут быть уязвимы.
Если вы когда-нибудь захотите использовать библиотеку для настройки проверки формы в React.js, я рекомендую вам использовать библиотеку the react-hook-form. У меня есть статья здесь, которая учит, как вы можете использовать его для проверки формы.
В этой статье вы смогли создать простую форму React.js с 6 полями, затем вы сделали поля обязательными и применили шаблон, который будет проверять и подтверждать входные данные пользователей в каждом из полей. Вы также добавили сообщения об ошибках в каждое из полей формы.
