ДРУЖЕСТВЕННОЕ РУКОВОДСТВО ДЛЯ НАЧИНАЮЩИХ ПО ПРОВЕРКЕ ДАННЫХ ПОЛЬЗОВАТЕЛЯ В ФОРМЕ ВЕБ-СТРАНИЦЫ С ИСПОЛЬЗОВАНИЕМ JAVASCRIPT.
Hi.
Вы, вероятно, читаете эту статью, потому что хотите освоить JavaScript, начиная с основ (включая проверку формы), и вам нужно краткое руководство. Что ж, возможно вы попали по адресу.Подождите. Это определенно не потому, что я профессионал в JavaScript, но вы видите, пока пару ночей назад я серьезно не боролся с пониманием и написанием JS, и в напряженный момент попыток понять его, я взломал несколько быстрых лайфхаков. Поэтому, хотя я полностью понимаю вашу борьбу, я также могу помочь вам простыми способами (надеюсь), которые помогут вам лучше понять JS.
В этой статье я покажу вам (через пошаговый процесс), как проверять данные пользователя в форме вашей веб-страницы с помощью циклов, операторов if/else, тегов объектов и сравнения.
Держитесь со мной.
Прежде чем мы перейдем к шагам к нашему решению, я думаю, что лучше всего поговорить о «проблеме», которую мы должны решить.
Во-первых, проверка формы в JavaScript в основном связана с поиском способа проверки данных формы на клиентском компьютере прямо перед их отправкой на веб-сервер.
Есть две основные функции проверки формы.
Базовая проверка. Здесь необходимо проверить форму, чтобы убедиться, что данные введены в каждое поле формы, для которого они требуются. Например, вы вводите свое имя пользователя в форму регистрации.
Однако при проверке формата данных, которая является второй, введенные данные должны быть проверены на правильность формы и значения. Примером этого является то, что вы пытаетесь зарегистрировать учетную запись Spotify, и ваше имя пользователя не должно содержать более шести символов, из которых должны быть один символ в верхнем регистре и символ. Это потребует больше логики для проверки правильности данных.
Мы пришли бы к нашему решению, используя эти простые шаги;
- Использование команд приглашения для принятия сведений о пользователе
- Использование объектов для хранения сведений о пользователе
- Проверка сведений о пользователе
ШАГ 1 (ЗАПРОС ИМЯ ПОЛЬЗОВАТЕЛЯ)
Я предполагаю, что вы уже вставили свой тег ‹script› в файл ‘index.html’, чтобы связать свой HTML-файл с вашим файлом ‘index.js’.
Итак, первый шаг — ввести команду приглашения в ваш JS-файл. Целью этого является создание всплывающего окна, которое предлагает пользователю ввести свои данные.
Вы можете создать команду приглашения для имени пользователя, введя;
Let username =Prompt («Введите имя пользователя»)
NB [Вы можете проверить, работает ли ваш код, введя console.log (имя пользователя)]
ШАГ 2 (ПРОВЕРКА ИМЯ ПОЛЬЗОВАТЕЛЯ)
После ввода подсказки и проверки правильности работы вашего кода вы можете перейти к проверке имени пользователя. Критерием этой проверки является то, что имя пользователя должно быть менее 8 символов. Любое имя пользователя, превышающее указанное количество символов, будет считать ваш код ложным.
Первым шагом к этому является написание простого объявления Function.
Функция ValidateUsername (имя пользователя){
Если (имя пользователя == null){
вернуть ложь
}
Если (имя пользователя.длина›8){
вернуть ложь
}еще{
вернуть истину
}
Проверьте свой код с помощью:console.log(validateUsername(username))
ШАГ 3 (ЗАПРОС И ПРОВЕРКА ПАРОЛЯ)
После запроса и проверки имени пользователя следует ввести пароль, поскольку ваш код должен быть структурирован последовательно. Пароли должны быть не менее 7 цифр.
К настоящему моменту ваш код должен выглядеть именно так; («//**» — это комментарии, предназначенные для того, чтобы помочь вам)
Let username =Prompt («Введите имя пользователя») //**запрос сведений
validateUsername(username) //**проверка
Let password =Prompt («Введите пароль») //*запрос пароля
validatePassword (пароль). //**проверка
Функция ValidateUsername(имя пользователя){
Если (имя пользователя == null){
вернуть ложь
}
Если (имя пользователя.длина›8){
вернуть ложь
}еще{
вернуть истину
}
//*Функция проверки имени пользователя
Функция ValidatePassword(пароль){
Если (пароль == null) {
вернуть ложь
}еще{
вернуть истину
}
Если (password.length ‹7) {
вернуть ложь
}еще{
вернуть истину
}
//*Функция проверки пароля
ШАГ 4 (СОЗДАНИЕ ПРЕДУПРЕЖДЕНИЙ ОБ ОШИБКЕ/УСПЕХЕ)
Что произойдет, если пользователь введет пароль или имя пользователя, которые не соответствуют установленным вами критериям? Несмотря на то, что на консоли определенно будет отображаться значение false, вы хотели бы, чтобы пользователь получил предупреждение об ошибке и сообщение с предложением ввести правильные данные. Вы можете добиться этого, добавив в свой код «While Loop».
Примечание. В JavaScript циклы используются для выполнения повторяющейся задачи на основе условия.
Пока (проверить имя пользователя (имя пользователя) ==false){
}
username=Prompt ("Имя пользователя недействительно. Введите имя пользователя еще раз")
Вот как должен выглядеть ваш код:
Пока (проверить имя пользователя (имя пользователя) ==false){
}
username=Prompt («Имя пользователя недействительно. Введите имя пользователя еще раз») //**сообщение об ошибке для имени пользователя
Пока (Подтвердить пароль (пароль) ==false){
}
password=Prompt («Пароль недействителен. Введите пароль еще раз») //**сообщение об ошибке при вводе пароля
Let username =Prompt («Введите имя пользователя») //**запрос на ввод имени пользователя
Let password =Prompt («Введите пароль») //**запрос на ввод пароля.
Функция ValidateUsername(имя пользователя){
Если (имя пользователя == null){
вернуть ложь
}
Если (имя пользователя.длина›8){
вернуть ложь
}еще{
возвратить true
}
//*Функция проверки имени пользователя
Функция ValidatePassword(пароль){
Если (пароль == null) {
вернуть ложь
}еще{
возвратить true
}
Если (password.length ‹7) {
вернуть ложь
}еще{
возвратить true
}
//**функция проверки пароля
Чтобы получить всплывающее окно об успехе в конце выполнения, вы можете вставить код предупреждения.
alert("Вы вошли")
Вот как должен выглядеть ваш код;
Пока (проверить имя пользователя (имя пользователя) ==false){
}
username=Prompt («Имя пользователя недействительно. Введите имя пользователя еще раз») //**сообщение об ошибке для имени пользователя
Пока (Подтвердить пароль (пароль) ==false){
}
password=Prompt («Пароль недействителен. Введите пароль еще раз») //**сообщение об ошибке при вводе пароля
Let username =Prompt («Введите имя пользователя») //**запрос на ввод имени пользователя
Let password =Prompt («Введите пароль») //**запрос на ввод пароля.
alert("Вы вошли") //**Всплывающее предупреждение
Функция ValidateUsername(имя пользователя){
Если (имя пользователя == null){
вернуть ложь
}
Если (имя пользователя.длина›8){
вернуть ложь
}еще{
возвратить true
}
//*Функция проверки имени пользователя
Функция ValidatePassword(пароль){
Если (пароль == null) {
вернуть ложь
}еще{
возвратить true
}
Если (password.length ‹7) {
вернуть ложь
}еще{
возвратить true
}
//**функция проверки пароля
Там! Ваша форма входа проверена и работает без сбоев. Если вы заметили какие-либо ошибки или у вас есть предложение, пожалуйста, напишите комментарий. Т за спасибо!
