Проверка js: Онлайн валидатор Javascript — iCoder.Uz

Вот синтаксис формы HTML:

 

  Имя:
  
  Фамилия:
  
  Отправить

 

Внешний интерфейс выглядит следующим образом:

Тег HTML действует как контейнер для различных элементов, таких как текст поле и кнопка отправки

• действие : Атрибут, указывающий, куда отправляются данные формы при отправке формы. Обычно это URL-адрес (абсолютный URL-адрес или относительный URL-адрес).
• метод : указывает метод HTTP, т. е. GET или POST , используемый для отправки данных при отправке формы.
• <метка> : Элемент, определяющий метку для других элементов формы. Метки улучшают доступность, особенно для программ чтения с экрана.
• : Элемент формы, который широко используется для структурирования полей формы. Это существенно зависит от значения атрибута типа . Типы ввода могут быть текст , флажок , электронная почта , радио и другие.
• : Представляет нажимаемую кнопку, которая используется для отправки данных формы.

Проверка формы

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

• Клиентская сторона : проверка выполняется в браузере
• На стороне сервера : проверка выполняется на сервере

Хотя оба эти типа одинаково важны, в этом руководстве рассматривается только проверка на стороне клиента.

Валидация на стороне клиента дополнительно классифицируется как:

• Встроенные : используют атрибуты на основе HTML, такие как , требуемые , тип , Minlength , MaxLength , Pattern и т. Д.
• На основе JavaScript : Проверка, закодированная с помощью JavaScript.

Встроенная проверка формы с использованием

• required : Указывает, какие поля должны быть заполнены перед отправкой формы.
• тип : указывает тип данных (т. е. число, адрес электронной почты, строка и т. д.).
• minLength : Указывает минимальную длину строки текстовых данных.
• maxLength : Указывает максимальную длину строки текстовых данных.

Таким образом, форма с использованием этих атрибутов может выглядеть так:

 
 
  номер ролика
  <ввод
    тип = "текст"
   
    имя = "рулон"
    необходимый
    минимальная длина = "10"
    максимальная длина = "20"
  />
  Имя:
  
  Отправить

 

При наличии этих проверок, когда пользователь пытается отправить пустое поле для имени, выдается ошибка, которая появляется прямо в поле формы. Точно так же номер рулона можно ввести только в том случае, если он состоит из 10-20 символов.

Проверка формы на основе JavaScript

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

В следующем примере показано использование JavaScript для проверки формы:

 
   Номер рулона:
  
  Имя:
  <тип ввода="текст" имя="имя" />
  Отправить

<скрипт>
  функция validateFormWithJS() {
    константное имя = document.querySelector('#name').value
    const rollNumber = document.querySelector('#rollNumber').value
    если (!имя) {
      alert('Пожалуйста, введите ваше имя. ')
      вернуть ложь
    }
    если (rollNumber.length < 3) {
      alert('Roll Number должен состоять не менее чем из 3 цифр.')
      вернуть ложь
    }
  }

 

Тег сценария HTML используется для встраивания любого кода JavaScript на стороне клиента. Он может либо содержать встроенные операторы сценария (как показано в примере выше), либо указывать на внешний файл сценария через атрибут

Проверка формы с использованием регулярных выражений

Проверка JavaScript с помощью регулярных выражений использует шаблон HTML-атрибут. Регулярное выражение (обычно известное как RegEx) — это объект, описывающий шаблон символов.

 
  Пароль:
  <ввод
    тип = "пароль"
   
    имя="pswrd"
    шаблон="[a-z0-9]{1,15}"
    title="Пароль должен состоять из цифр (от 0 до 9) или букв (от a до z)."
  />
  Отправить

 

Поле формы пароля должно содержать только цифры (от 0 до 9), строчные буквы (от a до z) и не должно превышать 15 символов в длину. Никакие другие символы (#, $, & и т. д.) не допускаются. Правило в RegEx записывается как [a-z0-9]{1,15} .

Чтобы узнать больше о HTML-формах, ознакомьтесь с веб-документами MDN.

В следующем разделе вы будете создавать формы в React с помощью Next.js.

Создайте новое приложение Next.js. Вы можете использовать приложение create-next-app для быстрого старта. В терминале командной строки выполните следующее:

 npx create-next-app
 

Ответьте на вопросы, чтобы создать свой проект, и дайте ему имя, в этом примере используется next-forms . Далее cd в этот каталог и запустите команду npm run dev или yarn dev , чтобы запустить сервер разработки.

Откройте URL-адрес, напечатанный в терминале, чтобы убедиться, что ваше приложение работает успешно.

И клиент, и сервер будут созданы с использованием Next.js. Для серверной части создайте конечную точку API, куда вы будете отправлять данные формы.

Next.js предлагает файловую систему маршрутизации, основанную на концепции страниц. Любой файл внутри папки pages/api сопоставляется с /api/* и будет рассматриваться как конечная точка API, а не как страница. Эта конечная точка API будет только на стороне сервера.

Перейдите к pages/api , создайте файл с именем form.js и вставьте этот код, написанный в Node.js:

 обработчик функции экспорта по умолчанию (req, res) {
  // Получить данные, представленные в теле запроса.
  константное тело = требуемое тело
  // Необязательное ведение журнала для просмотра ответов
  // в командной строке, где запущено приложение next.js.
  console.log('тело:', тело)
  // Предложение Guard проверяет имя и фамилию,
  // и возвращает раньше, если они не найдены
  если (!body.first || !body.last) {
    // Отправляет код ошибки неверного HTTP-запроса
    return res.status(400).json({ data: 'Имя или фамилия не найдены' })
  }
  // Имя найдено.
  // Отправляет HTTP-код успеха
  res.status(200).json({данные: `${body.first} ${body.last}` })
}
 

Эта функция обработчика формы получит запрос req от клиента (т.е. отправленные данные формы). А взамен он отправит ответ res в формате JSON, в котором будет и имя, и фамилия. Вы можете получить доступ к этой конечной точке API по адресу http://localhost:3000/api/form или заменить URL-адрес локального хоста фактическим развертыванием Vercel при развертывании.

Кроме того, вы также можете подключить этот API к базе данных, такой как MongoDB или Google Sheets. Таким образом, отправленные вами данные формы будут надежно сохранены для последующего использования. Для этого руководства база данных не используется. Вместо этого те же данные возвращаются пользователю для демонстрации того, как это делается.

Отправка формы без JavaScript

Теперь вы можете использовать относительную конечную точку /api/form внутри атрибута action формы. Вы отправляете данные формы на сервер, когда форма отправляется с помощью HTTP-метода POST (который используется для отправки данных).

 
  Имя:
  
  Фамилия:
  
  Отправить

 

Если вы отправите эту форму, она отправит данные в конечную точку API форм /api/form . Затем сервер отвечает, обычно обрабатывая данные и загружая URL-адрес, определенный атрибутом действия, вызывая загрузку новой страницы. Так что в этом случае вы будете перенаправлены на http://localhost:3000/api/form со следующим ответом от сервера.

Вы создали маршрут API Next.js для отправки формы. Теперь пришло время настроить клиент (саму форму) внутри Next.js с помощью React. Первым шагом будет расширение ваших знаний о HTML-формах и преобразование их в React (с использованием JSX).

Вот та же форма в функциональном компоненте React, написанном с использованием JSX.

 функция экспорта по умолчанию Form() {
  возвращаться (
    
      Имя
      
      Фамилия
      
      Отправить
    
  )
}
 

Вот что изменилось:

• Атрибут для изменен на htmlFor . (Поскольку вместо — это ключевое слово, связанное с циклом for в JavaScript, элементы React вместо этого используют htmlFor .)
• Атрибут действия теперь имеет относительный URL-адрес, который является конечной точкой API формы.

Это завершает базовую структуру вашей формы на основе Next.js.

Вы можете просмотреть весь исходный код примера репозитория next-forms, который мы создаем здесь, в качестве рабочего примера. Не стесняйтесь клонировать его и начать прямо сейчас. Эта демонстрация создана с помощью приложения create-next-app, и вы можете просмотреть базовые стили CSS формы внутри /styles/global.css файл.

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

Есть несколько причин, по которым пользователи отключают JavaScript:

• Устранение ограничений пропускной способности
• Увеличение времени автономной работы устройства (телефона или ноутбука)
• Для конфиденциальности, чтобы их не отслеживали с помощью аналитических скриптов

Независимо от причины отключение JavaScript частично, если не полностью, повлияет на функциональность сайта.

Затем откройте каталог next-forms . Внутри каталога /pages создайте файл no-js-form.js .

Краткий совет . В Next.js страница представляет собой компонент React, экспортированный из файла .js , .jsx , .ts или .tsx в каталоге pages. Каждая страница связана с маршрутом на основе имени файла.

Пример: если вы создадите pages/no-js-form.js , он будет доступен по адресу your-domain.tld/no-js-form .

Давайте воспользуемся тем же кодом, что и выше:

 функция экспорта по умолчанию PageWithoutJSbasedForm() {
  возвращаться (
    
      Имя
      
      Фамилия
      
      Отправить
    
  )
}
 

При отключенном JavaScript, когда вы нажимаете кнопку «Отправить», запускается событие, которое собирает данные формы и отправляет их в конечную точку нашего API форм, как определено в атрибуте action и с использованием метода POST HTTP . Вы будете перенаправлены на конечную точку /api/form , так как именно так работает форма action .

Данные формы будут отправлены на сервер в виде запроса req к функции обработчика формы, написанной выше. Он обработает данные и вернет строку JSON в качестве ответа res с включенным вашим именем.

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

Внутри /pages вы создадите еще один файл с именем js-form.js . Это создаст страницу /js-form в вашем приложении Next.js.

Теперь, как только форма будет отправлена, мы предотвратим перезагрузку страницы по умолчанию. Мы возьмем данные формы, преобразуем их в строку JSON и отправим на наш сервер, конечную точку API. Наконец, наш сервер ответит отправленным именем. Все это с базовым JavaScript функция handleSubmit() .

Вот как выглядит эта функция. Это хорошо задокументировано для понимания каждого шага:

 функция экспорта по умолчанию PageWithJSbasedForm() {
  // Обрабатывает событие отправки при отправке формы.
  const handleSubmit = async (событие) => {
    // Остановить отправку формы и обновить страницу.
    событие.preventDefault()
    // Получить данные из формы.
    постоянные данные = {
      сначала: event.target.first.value,
      последнее: событие.цель.последнее.значение,
    }
    // Отправляем данные на сервер в формате JSON.
    const JSONdata = JSON.stringify(данные)
    // Конечная точка API, куда мы отправляем данные формы.
    константная конечная точка = '/api/form'
    // Формируем запрос на отправку данных на сервер.
    постоянные параметры = {
      // Метод POST, потому что мы отправляем данные.
      метод: «ПОСТ»,
      // Сообщаем серверу, что мы отправляем JSON.
      заголовки: {
        «Тип контента»: «приложение/json»,
      },
      // Тело запроса — это данные JSON, которые мы создали выше. 
      тело: JSONданные,
    }
    // Отправьте данные формы в наш API форм на Vercel и получите ответ.
    константный ответ = ожидание выборки (конечная точка, параметры)
    // Получить данные ответа с сервера в формате JSON.
    // Если сервер возвращает отправленное имя, это означает, что форма работает.
    константный результат = ожидание ответа.json()
    alert(`Это ваше полное имя: ${result.data}`)
  }
  возвращаться (
    // Мы передаем событие в функцию handleSubmit() при отправке.
    <форма onSubmit={handleSubmit}>
      Имя
      
      Фамилия
      
      Отправить
    
  )
}
 

Это страница Next.js с компонентом функции React под названием PageWithJSbasedForm с элементом , написанным на JSX. Нет никаких действий с элементом . Вместо этого мы используем обработчик события onSubmit для отправки данных в нашу функцию {handleSubmit} .

Функция handleSubmit() обрабатывает данные формы в несколько этапов:

• event.preventDefault() запрещает элементу обновлять всю страницу.
• Мы создали объект JavaScript с именем data с первыми и последними значениями из формы.
• JSON — это формат передачи данных, не зависящий от языка. Поэтому мы используем JSON.stringify(data) для преобразования данных в JSON.
• Затем мы используем fetch() для отправки данных на нашу конечную точку /api/form с использованием JSON и HTTP POST 9Метод 0010.
• Сервер возвращает ответ с отправленным именем. Ууууу! 🥳

В этом руководстве рассмотрено следующее:

• Базовая форма HTML Элемент
• Понимание форм с React. js
• Проверка данных форм с помощью JavaScript и без него
• Использование маршрутов API Next.js для обработки req и res от клиента и сервера

Для получения более подробной информации пройдите обучающий курс Next.js.

Лучшая библиотека проверки для JavaScript

• Записано в ES6
• Безопасность типа с использованием TypeScript
• нулевые зависимости
• NO JQuery
• можно использовать в качестве AMD, модулей ES6 и Global Scripts

666666666666666666666666666666666666666666666666666666666666666666666666666666.

40+

Валидаторы

50+

Плагины

• Охватывают самые разные типы полей формы
• Разработка, повторное использование пользовательского валидатора
• Поддержка синхронизации и Async Valdators
• Архитектор на основе плагинов
• Small Core
• Все остальное построено в виде плагина

Объявление правил валидации

Decliking Опционеры Validator Viaw wia html Attributes

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
.  
  
 name="userName" 
 
 data-fv-not-empty="true" 
 
 data-fv-not-empty___message="Требуется имя пользователя" 
 
 data-fv-string-length=" правда" 
 
 data-fv-string-length___min="6" 
 
 data-fv-string-length___message="Имя должно быть длиннее 6 символов" 
 
 />