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

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

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

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

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

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

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

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

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

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

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

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

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

Во-первых,

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

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" (содержит пробел).

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" используется для указания того, что поле ввода должно принимать в качестве входных данных адрес электронной почты. Некоторые преимущества использования этого атрибута включают:

Улучшенный пользовательский опыт: Когда пользователю предлагается ввести адрес электронной почты, тип ввода "email" вызывает соответствующую клавиатуру на мобильном устройстве, что облегчает ввод адреса электронной почты.
Усовершенствованная проверка: При использовании типа ввода "email" браузер будет выполнять базовую проверку введенного пользователем адреса электронной почты, чтобы убедиться, что он имеет правильный формат. Это поможет предотвратить ошибки и повысить общее качество собираемых данных.
Улучшенная доступность: Вспомогательные технологии, такие как программы чтения с экрана, могут использовать тип ввода "email" для предоставления дополнительного контекста и подсказок пользователям с ограниченными возможностями.

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

Атрибут type для элемента input со значением "date" используется для создания поля формы для ввода даты. Некоторые преимущества использования этого атрибута включают:

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

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

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 могут использоваться для обеспечения того, чтобы вводимое значение попадало в заданный диапазон, что может помочь предотвратить ошибки и улучшить общее качество собираемых данных.