Узнайте, как правильно создавать готовые к использованию одноразовые пароли и поля ввода пароля с проверкой в ​​React.js. Эта исчерпывающая статья поможет вам создать безопасные и надежные компоненты OTP и ввода пароля для ваших проектов React.js.

Репозиторий GitHub: — https://github.com/TEJA2312/react-advance-inputs

Поле ввода OTP

Для создания блокированных входных данных мы используем несколько отдельных полей ввода. Например, если у нас есть 6-значный otp, у нас будет 6 полей ввода. Очень важно убедиться, что наш код является динамическим, что позволяет нам адаптировать его для любого количества цифр, например, 4 или 3 цифры. Для этого мы передаем желаемое количество цифр в качестве реквизита нашему компоненту.

Для начала мы устанавливаем переменную useState, инициализируя ее массивом пустых строк. Длина этого массива будет равна количеству цифр, которое мы хотим для поля ввода. Мы также создаем переменную useState для отображения сообщений об ошибках.

function OtpInputWithValidation({ numberOfDigits }) {
  const [otp, setOtp] = useState(new Array(numberOfDigits).fill(""));
  const [otpError, setOtpError] = useState(null);
}

Теперь мы используем useRef , который представляет собой хук React, используемый для создания изменяемой ссылки, которая сохраняется при рендеринге. Это позволяет вам напрямую взаимодействовать с элементами DOM и отслеживать значения, которые должны сохраняться между рендерингами. Теперь в приведенном ниже коде otpBoxReference.current[index].focus() используется для установки фокуса на следующее или предыдущее поле ввода, обеспечивая плавный пользовательский интерфейс при вводе одноразового пароля. Мы также создаем функцию, которая фокусируется на предыдущем поле ввода при нажатии Backspace и на следующем поле ввода при Enter.

  const [otp, setOtp] = useState(new Array(numberOfDigits).fill(""));
  const [otpError, setOtpError] = useState(null);
  const otpBoxReference = useRef([]);

  function handleChange(value, index) {
    let newArr = [...otp];
    newArr[index] = value;
    setOtp(newArr);

    if(value && index < numberOfDigits-1){
      otpBoxReference.current[index + 1].focus()
    }
  }

  function handleBackspaceAndEnter(e, index) {
    if(e.key === "Backspace" && !e.target.value && index > 0){
      otpBoxReference.current[index - 1].focus()
    }
    if(e.key === "Enter" && e.target.value && index < numberOfDigits-1){
      otpBoxReference.current[index + 1].focus()
    }
  }

Теперь простой useEffect для отображения сообщения об ошибке, когда otp неверен. вы можете изменить эту проверку otp с вашим сервером

  useEffect(() => { 
    if(otp.join("") !== "" && otp.join("") !== correctOTP){
      setOtpError("❌ Wrong OTP Please Check Again")
    }else{
      setOtpError(null)
    } 
   }, [otp]);

Теперь окончательный код с jsx

Поле ввода пароля

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

  1. Минимум 8 символов
  2. Хотя бы один символ верхнего регистра
  3. Хотя бы один специальный символ
  4. Хотя бы один номер

Для лучшего взаимодействия с пользователем мы выполняем проверку для всех четырех проверок по отдельности и запускаем процесс проверки при каждом изменении (событие onChange). Для реализации этой функциональности мы используем переменную useState, инициализированную следующим образом:

const PasswordInputWithValidation = () => {

  const [password, setPassword] = useState('');

  const [errors, setErrors] = useState({
    minValueValidation: false,
    numberValidation: false,
    capitalLetterValidation: false,
    specialCharacterValidation: false,
  });

}

Теперь, чтобы фактически проверить пароль для каждого события onChange:

  const handlePasswordChange = (event) => {
    const newPassword = event.target.value;
    setPassword(newPassword);
    validatePassword(newPassword);
  };

  const validatePassword = (password) => {
    setErrors({
      minValueValidation: password.length >= 8,
      numberValidation: /\d/.test(password),
      capitalLetterValidation: /[A-Z]/.test(password),
      specialCharacterValidation: /[^A-Za-z0-9]/.test(password),
    });
  };

Теперь окончательный код: