Как проверить номер паспорта ReactJS?

Опубликовано: 7 Августа, 2021

Проверка номера паспорта - важный шаг для подтверждения номера паспорта пользователя. В следующем примере показано, как проверить номер паспорта пользователя с помощью модуля npm в ReactJS.

Синтаксис:

 isPassportNumber (str, countryCode)

Параметры: эта функция принимает два параметра, как указано выше и описано ниже:

str: это входное значение строкового типа.
countryCode : это код страны для этого паспорта, например: «AM», «US», «IN» и т. д.

Создание приложения React и установка модуля:

Шаг 1. Создайте приложение React, используя следующую команду:

npx создать-реагировать-приложение имя папки

Шаг 2: После создания папки проекта, т.е. имени папки , перейдите в нее с помощью следующей команды:

 cd имя папки

Шаг 3: После создания приложения ReactJS установите модуль валидатора, используя следующую команду:

 npm установить валидатор

Структура проекта: это будет выглядеть следующим образом.

Структура проекта

App.js: теперь запишите следующий код в файл App.js. Здесь App - это наш компонент по умолчанию, в котором мы написали наш код.

Javascript

 import React, { useState } from "react" ;
 import validator from 'validator'
 
const App = () => {
 
  const [errorMessage, setErrorMessage] = useState( '' )
 
  const validate = (textInput) => {
 
    if (validator.isPassportNumber(textInput, 'IN' )) {
      setErrorMessage( 'Is Valid Passport Number' )
    } else {
      setErrorMessage( 'Is Invalid Passport Number' )
    }
  }
 
  return (
    <div style={{
      marginLeft: '200px' ,
    }}>
      <pre>
        <h2>Validate Passport Number in ReactJS</h2>
        <span>Enter Passport Number: </span><input type= "text"
          onChange={(e) => validate(e.target.value)}></input> <br />
        <span style={{
          fontWeight: 'bold' ,
          color: 'red' ,
        }}>{errorMessage}</span>
      </pre>
    </div>
  );
 }
 
export App default 

Шаг для запуска приложения: запустите приложение, используя следующую команду из корневого каталога проекта:

 npm start

Выход:

Если пользователь вводит неверный номер паспорта, будет выведено следующее.

Если пользователь вводит действительный номер паспорта, результатом будет следующее.

Technical Scripter JavaScript

Как проверить номер паспорта ReactJS?

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ