Валидация полей ввода для базовой формы React

RedDeveloper
31.12.2022 17:32
Валидация полей ввода для базовой формы React

В одном из моих проектов MERN Stack есть форма с именем, фамилией, контактным номером, адресом, электронной почтой, датой рождения, номером NIC, весом

и полем ввода количества крови.

Затем я решил использовать регулярное выражение для проверки полей ввода.

Прежде всего, что такое регулярное выражение?

Регулярное выражение, также известное как regex, - это последовательность символов, определяющая схему поиска. Обычно используется для сопоставления или извлечения определенных символов из текста. Википедия

Вот некоторые общие случаи использования регулярных выражений:

Поиск шаблонов в тексте: Вы можете использовать regex для поиска шаблонов в тексте. Например, можно использовать regex для поиска всех адресов электронной почты в большом документе.

Проверка подлинности вводимых пользователем данных: Регулярные выражения можно использовать для проверки соответствия вводимых пользователем данных определенным критериям. Например, вы можете использовать регулярное выражение для проверки надежности пароля, требуя, чтобы он содержал определенное число

прописных и строчных букв, цифр и специальных символов.

Извлечение конкретной информации: Вы можете использовать regex для извлечения определенных фрагментов информации из большого объема текста. Например, с помощью regex можно извлечь все номера телефонов из документа.

Замена текста: Регулярные выражения можно использовать для поиска шаблонов в тексте и замены их другим текстом. Например, можно использовать regex для замены всех вхождений определенного слова в документе на его синоним.

Хорошо! Теперь я объясню, как я добавил regex.

Во-первых,

01) в поле ввода имени/фамилии я использую шаблон = '[A-Za-z]{2,20}'

01) в поле ввода имени/фамилии я использую шаблон = '[A-Za-z]{220}'This is how an error message appears
<div className="col_half">
   <div className="input_field"> <span><i aria-hidden="true" className="fa fa-user"></i></span>
       <input type="text" name="firstName" value={firstName} placeholder="First Name" 
          pattern="[A-Za-z]{2,20}" 
          title="The first name must contain letters only" 
          onChange={(e) => onChange(e)} required />
   </div>
</div>

<div className="col_half">
  <div className="input_field"> <span><i aria-hidden="true" className="fa fa-user"></i></span>
    <input type="text" name="lastName" value={lastName} placeholder="Last Name" 
       pattern="[A-Za-z]{2,20}" 
       title="The last name must contain letters only" 
       onChange={(e) => onChange(e)} required />
  </div>
</div>

Шаблон '[A-Za-z]{2,20}' - это регулярное выражение, которое будет соответствовать любой строке, состоящей из 2-20 буквенных символов (в верхнем или нижнем регистре).

Вот как работают различные части шаблона:

'[A-Za-z]' - это класс символов, который соответствует любому алфавитному символу (в верхнем или нижнем регистре).

'{2,20}' - это квантификатор, который указывает, что предшествующий символ (в данном случае класс символов '[A-Za-z]') должен быть сопоставлен от 2 до 20 раз.

Используйте атрибут title для добавления "всплывающей подсказки" к полю ввода.

Атрибут title задает дополнительную информацию об элементе, которая отображается в виде всплывающей подсказки при наведении курсора мыши на элемент.

Далее,

02) В поле ввода контактного номера я использую шаблон = "^\+?94\d{9}$".

Шаблон "^\+?94\d{9}$" - это регулярное выражение, которое определяет строку, представляющую собой номер телефона в Шри-Ланке.

<div className="input_field"> 
 <span><i aria-hidden="true" className="fa fa-phone"></i></span>
  <input type="text" name="contactNumber" value={contactNumber} 
      placeholder="Contact Number" 
      pattern="^\+?94\d{9}$" 
      title="Enter valid contact number (ex - 94757713501)" 
      onChange={(e) => onChange(e)} required />
</div>

В данном шаблоне каретка ^ и знак доллара $ привязывают шаблон к началу и концу строки, соответственно.

Это означает, что строка должна точно соответствовать шаблону от начала до конца.

Часть \+? указывает, что строка может начинаться или не начинаться со знака плюс +.

Часть шаблона 94 указывает, что строка должна содержать цифры 94. Наконец,

\d{9} указывает, что строка должна содержать 9 цифр (0-9).

Например, шаблон будет соответствовать следующим строкам:

"+94712345678"

"94712345678"

Но он не будет соответствовать следующим строкам:

"9471234567" (содержит менее 9 цифр)

"947123456789" (содержит более 9 цифр)

"94 712345678" (содержит пробел).

"94 712345678" (содержит пробел)This is how an error message appears

Далее,

3) Поле ввода адреса я использую шаблон = "[A-Za-z0-9'\.\-\s\,]".

В шаблоне используется набор символов, чтобы указать, какие символы разрешено сопоставлять.

Шаблон состоит из следующих элементов:

[A-Za-Z]: Этот набор символов соответствует любой заглавной или строчной букве от A до Z.

0-9: Этот набор символов соответствует любой цифре от 0 до 9.

'\.: Этот набор символов соответствует апострофу, точке или обратной косой черте.

-: Этот символ соответствует дефису.

\s: Этот набор символов соответствует любому пробельному символу, включая пробелы, табуляцию и перевод строки.

\,: Этот набор символов соответствует запятой.

<div className="input_field"> <span><i aria-hidden="true" className="fa fa-home"></i></span>
  <input type="text" name="address" value={address} placeholder="Address" 
    pattern="[A-Za-z0-9'\.\-\s\,]" 
    title="Enter valid Address"
    onChange={(e) => onChange(e)} required />
</div>

Далее,

04) Я не добавлял никаких шаблонов в поля ввода Email, Дата рождения. Только изменил тип поля ввода.

Email:- type = "email"

Дата рождения:- type="date"

<div className="input_field"> <span><i aria-hidden="true" className="fa fa-envelope"></i></span>
  <input type="email" name="email" value={email} placeholder="Email"
onChange={(e) => onChange(e)} required />
</div>

<div className="input_field"> <span><i aria-hidden="true" className="fa fa-calendar"></i></span>
  <input type="date" name="dateOfBirth" value={dateOfBirth} placeholder="Date Of Birth"
onChange={(e) => onChange(e)} required />
Атрибут type для элемента input со значением "email" используется для указания того, что поле ввода должно принимать в качестве входных данных адрес электронной почты. Некоторые преимущества использования этого атрибута включают:
  1. Улучшенный пользовательский опыт: Когда пользователю предлагается ввести адрес электронной почты, тип ввода "email" вызывает соответствующую клавиатуру на мобильном устройстве, что облегчает ввод адреса электронной почты.
  2. Усовершенствованная проверка: При использовании типа ввода "email" браузер будет выполнять базовую проверку введенного пользователем адреса электронной почты, чтобы убедиться, что он имеет правильный формат. Это поможет предотвратить ошибки и повысить общее качество собираемых данных.
  3. Улучшенная доступность: Вспомогательные технологии, такие как программы чтения с экрана, могут использовать тип ввода "email" для предоставления дополнительного контекста и подсказок пользователям с ограниченными возможностями.

В целом, использование типа ввода "email" может помочь улучшить удобство использования, надежность и доступность вашей веб-формы.

Атрибут type для элемента input со значением "date" используется для создания поля формы для ввода даты. Некоторые преимущества использования этого атрибута включают:
  1. Улучшенный пользовательский опыт: Когда пользователю предлагается ввести дату, тип ввода "дата" вызовет соответствующее поле выбора даты в большинстве современных браузеров, что облегчит пользователю выбор даты.
  2. Расширенная проверка: При использовании типа ввода "дата" браузер будет выполнять базовую проверку даты, введенной пользователем, чтобы убедиться, что она имеет правильный формат. Это может помочь предотвратить ошибки и повысить общее качество собираемых данных.
  3. Улучшенная доступность: Вспомогательные технологии, такие как программы чтения с экрана, могут использовать тип ввода "дата" для предоставления дополнительного контекста и подсказок пользователям с ограниченными возможностями.

В целом, использование типа ввода "дата" может помочь улучшить удобство использования, надежность и доступность вашей веб-формы.

В целом использование типа ввода "дата" может помочь улучшить удобство использованияВ целом использование типа ввода "дата" может помочь улучшить удобство использованияThis is how an error message appears

Далее,

5) Для поля ввода Национального удостоверения личности Шри-Ланки (NIC) я использую шаблон="^\d{9}[V|v|X|x]$".

NIC состоит из 10-значного номера, первые девять цифр которого представляют дату рождения, а последняя цифра - пол владельца карты.

Вот регулярное выражение, которое можно использовать для поиска формата шри-ланкийского NIC:

<div className="input_field"> <span><i aria-hidden="true" className="fa fa-id-card-o"></i></span>
  input type="text" name="nic" value={nic} placeholder="NIC Number" 
        pattern="^\d{9}[V|v|X|x]$" 
        title="Enter valid NIC number (ex - 982742978V) , (ex - 98521656X)" 
        onChange={(e) => onChange(e)} required />
</div>

Это регулярное выражение соответствует строке, состоящей ровно из девяти цифр, за которыми следует буква "V", "v", "X" или "x".

Символы каретки (^) и знака доллара ($) используются для привязки шаблона к началу и концу строки соответственно, чтобы регулярное выражение соответствовало только полному NIC, а не только его части.

Символы каретки (^) и знака доллара ($) используются для привязки шаблона к началу и концуThis is how an error message appears

Наконец,

6) В данном случае я также не добавлял никакого шаблона.

Были изменены только типы полей ввода веса и объема крови.

Вес :- type="number"

Объем крови :- type="number"

<div className="input_field"> <span><i aria-hidden="true" className="fa fa-male"></i></span>
<input type="number" name="weight" value={weight} placeholder="Weight" 
       min="1" max="999"
       onChange={(e) => onChange(e)} required />
</div>
                          
<div className="input_field"> <span><i aria-hidden="true" className="fa fa-medkit"></i></span>
     <input type="number" name="bloodAmount" value={bloodAmount} placeholder="Blood Amount" 
       min="1" max="999"
       title="Enter valid number" 
       onChange={(e) => onChange(e)} required />
</div>

Когда пользователю предлагается ввести число, тип ввода "число" вызовет соответствующую цифровую клавиатуру на мобильном устройстве, что облегчит пользователю ввод числа.

А также используйте атрибуты "min" и "max", потому что атрибуты min и max могут использоваться для обеспечения того, чтобы вводимое значение попадало в заданный диапазон, что может помочь предотвратить ошибки и улучшить общее качество собираемых данных.

А также используйте атрибуты "min" и "max" потому что атрибуты min и max могутА также используйте атрибуты "min" и "max" потому что атрибуты min и max могутThis is how an error message appears

Спасибо всем. Пожалуйста, сообщите мне, если моя статья содержит какие-либо ошибки. Я буду чрезвычайно благодарен за это.

22 прощай! Я завершаю год своей первой статьей.

Шаблоны Angular PrimeNg
Шаблоны Angular PrimeNg

26.01.2023 14:14

Как привнести проверку типов в наши шаблоны Angular, использующие компоненты библиотеки PrimeNg, и настроить их отображение с помощью встроенной функции ngTemplateOutlet.

Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript

26.01.2023 13:19

Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего следующего сайта послужил начальный эпизод "Звездных войн"? 😁

Документирование API с помощью Swagger на Springboot
Документирование API с помощью Swagger на Springboot

26.01.2023 09:43

В предыдущей статье мы уже узнали, как создать Rest API с помощью Springboot и MySql .

Начала с розового дизайна
Начала с розового дизайна

25.01.2023 11:01

Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских интерфейсов.

Шлюз в PHP
Шлюз в PHP

25.01.2023 10:51

API-шлюз (AG) - это сервер, который действует как единая точка входа для набора микросервисов.

14 Задание: Типы данных и структуры данных Python для DevOps
14 Задание: Типы данных и структуры данных Python для DevOps

25.01.2023 09:17

проверить тип данных используемой переменной, мы можем просто написать: your_variable=100