Проверка формы на клиентской стороне с использованием JavaScript

Проверка формы с JavaScript на клиентской стороне.

Целью данной статьи является изучение того, как выполнять проверку формы с помощью JavaScript. В учебных целях я разработал форму для веб-сайта по учету сотрудников с использованием HTML, CSS и JavaScript. Логика проверки формы разработана с использованием JavaScript.

Ниже приведена демонстрация проекта:

Разработка проекта разделена на три этапа:

  • Написание HTML
  • Добавление CSS
  • Написание JavaScript

Написание HTML для создания формы

<!--file name validations.html--><html> <head> </head><body> <br> <h2>Система учета сотрудников</h2> <div class=”container”> <form id=”form” onsubmit=”validation()”> <div class=”title”><b>Пожалуйста, введите значения</b></div> <! — Ввод имени → <div> <label for=”fname”>Имя</label> <input type=”text” name=”fname” id=”fname” placeholder=”Вивек”/> <p id=”err1"></p> </div> <! — Ввод фамилии → <div> <label for=”lname”>Фамилия</label> <input type=”text” name=”lname” id=”lname” placeholder=”Чаудхари”/><p id=”err2"></p> </div> <! — Ввод идентификатора сотрудника → <div> <label for=”eid”>Идентификатор сотрудника</label> <input type=”text” name=”eid” id=”eid” placeholder=”1234"/> <p id=”err3"></p> </div>  <! — Ввод электронной почты → <div> <label for=”email”>Электронная почта</label> <input type=”email” name=”email” id=”email” placeholder=”vivch@gmail.com”/> <p id=”err4"></p> </div> <! — Ввод отдела → <div> <label for=”did”>Номер отдела</label> <input type=”text” name=”did” id=”did” placeholder=”10"/> <p id=”err5"></p> </div> <br><br> <button id=”btn” type=”submit”>Отправить</button> </form> </div></body></html>

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

Закончили с HTML.

Добавление CSS для стилизации формы

CSS помогает добавить стилизацию и эффекты к нашей форме, чтобы она выглядела более привлекательно.

<style> * { margin: .5; padding: .5; box-sizing: border-box;}body { font-family: sans-serif;}form { display: flex; flex-direction: column; justify-content: center; max-width: 400px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); padding: 50px;}input[type=”text”],input[type=”email”]{ width: 100%; border: 1px solid #333; box-sizing: border-box}label { display: block; margin-bottom: 5px;}input:invalid{ box-shadow:0 0 5px 1px red;}input:focus { border: 2px solid #f2796e;}form div input { width: 100%; height: 40px; border-radius: 8px; outline: none; border: 2px solid #c4c4c4; padding: 0 30px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);}form div { position: relative; margin-bottom: 15px;}input:focus { border: 2px solid #f2796e;}button { margin-top: 15px; width: 100%; height: 45px; background-color: #6e98f2; border: 2px solid #6e98f2; border-radius: 8px; color: #fff; font-size: 20px; cursor: pointer; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.1s ease;}.success-icon,.failure-icon { right: 0.5; opacity: 0.5;}button:hover { opacity: 0.7;}</style>

После добавления компонентов CSS к нашим объектам HTML, вот так выглядит наша форма.

Закончили со стилизацией.

Добавление JavaScript для валидации.

JavaScript помогает нам получать доступ и изменять элементы DOM (Data Object Model). Я разбил JavaScript на несколько частей для лучшего понимания.

Получение доступа к элементам HTML DOM по их идентификаторам:

let fname=document.getElementById(“fname”);let lname=document.getElementById(“lname”);let eid=document.getElementById(“eid”);let email=document.getElementById(“email”);let did=document.getElementById(“did”);let form=document.getElementById(“form”)let err1=document.getElementById(“err1”)let err2=document.getElementById(“err2”)let err3=document.getElementById(“err3”)let err4=document.getElementById(“err4”)let err5=document.getElementById(“err5”)let successIcon = document.getElementsByClassName(“success-icon”)let failureIcon = document.getElementsByClassName(“failure-icon”)let deptno=[10,20,30,40,50]let btn=document.getElementById("btn").type

Метод getElementById() является одним из наиболее распространенных методов в HTML DOM. Он используется для доступа или изменения элемента HTML.

Метод getElementByClassName() возвращает коллекцию элементов с указанными именами классов.

Мы используем оба метода для доступа к компонентам формы и изменения их поведения.

Определение регулярных выражений для валидации компонентов формы

// Регулярное выражение JavaScript для валидации имениvar rName = /^[A-Za-z]+$/;// Регулярное выражение JavaScript для валидации EmpID.var rEmpID=/\d{4}$/; //Регулярное выражение JavaScript для валидации Email.var rEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g; //JS для валидации deptnovar rDeptno = /^\d{2}$/;

Определение функции для валидации

// имя файла - validation.jsfunction validation() { // валидация имени if (fname.value==”” || !fname.value.match(rName)){ err1.innerHTML=”*Имя не может быть пустым и должно состоять только из букв”; fname.style.border = “2px solid red”; } else { err1.innerHTML=””; fname.style.border = “2px solid green”;  } // валидация фамилии if (lname.value==”” || !lname.value.match(rName)){ err2.innerHTML=”*Фамилия не может быть пустой и должна состоять только из букв”; lname.style.border = “2px solid red”; } else { err2.innerHTML=””; lname.style.border = “2px solid green”;  } // валидация электронной почты console.log(“идентификатор электронной почты - “,email.value) if (email.value==”” && !rEmail.test(email.value)){ console.log(“внутри email if”) err4.innerHTML=”*Электронная почта должна быть заполнена и быть действительной. Пожалуйста, следуйте правилам”; email.style.border = “2px solid red”; } else { err4.innerHTML=””; email.style.border = “2px solid green”;  } // валидация идентификатора сотрудника if (eid.value==”” || !rEmpID.test(eid.value)){ err3.innerHTML=”*Введите действительный идентификатор сотрудника, начинающийся с 2 символов и состоящий из 6 цифр”; eid.style.border = “2px solid red”; } else { err3.innerHTML=””; eid.style.border = “2px solid green”;  } // валидация номера отдела dept=Number(did.value) console.log(‘значение номера отдела ‘,dept +” “+typeof(dept)) if (dept==”” || !rDeptno.test(dept)){ console.log(‘внутри if’) err5.innerHTML=”*Номер отдела не может быть пустым или не являться числом. Пожалуйста, проверьте еще раз”; did.style.border = “2px solid red”; }  else if(!dept==”” && !deptno.includes(dept)) { console.log(“введенное значение номера отдела “, did.value + “ “+typeof(did.value)) err5.innerHTML=”*Номер отдела должен быть из списка значений [10,20,30,40]. Пожалуйста, проверьте еще раз”; did.style.border = “2px solid red”; } else if(!dept==”” && deptno.includes(dept)){ console.log(‘внутри 2-го elif’) err5.innerHTML=””; did.style.border = “2px solid green”;  }}form.addEventListener(btn,(event)=>{  event.preventDefault()});

Проверки

  1. Имя
let fname=document.getElementById(“fname”);let err1=document.getElementById("err1");// Регулярное выражение на JavaScript для проверки имениvar rName = /^[A-Za-z]+$/;// Проверка имени if (fname.value=="" || !fname.value.match(rName)){ err1.innerHTML="*Имя не может быть пустым и должно состоять из букв"; fname.style.border = "2px solid red"; } else { err1.innerHTML=""; fname.style.border = "2px solid green";  }
  • получить доступ к элементу формы с типом “text” для имени с помощью document.getElementById(“fname”), также получить доступ к тегу ошибки с помощью document.getElementById(“err1”)
  • определить регулярное выражение для имени с помощью rName = /^[A-Za-z]+$/
  • следующая часть – блок if-else, в котором производится сравнение для выполнения действий над формой. Если имя, введенное пользователем, является пустым или не соответствует критериям регулярного выражения, текстовое поле будет помечено красным цветом с сообщением об ошибке.

  • когда имя, введенное пользователем, соответствует политике, результат будет следующим: текстовое поле помечено зеленым цветом.

Логика проверки фамилии такая же, как и для имени.

2. Email

let email=document.getElementById(“email”);let err4=document.getElementById("err4");// Регулярное выражение на JavaScript для проверки emailvar rEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g;// Проверка email if (email.value=="" && !rEmail.test(email.value)){  err4.innerHTML="*Email должен быть непустым и действительным. Пожалуйста, следуйте правилам"; email.style.border = "2px solid red"; } else { err4.innerHTML=""; email.style.border = "2px solid green";  }
  • получить доступ к элементу формы с типом “text” для email с помощью document.getElementById(“email”), также получить доступ к тегу ошибки с помощью document.getElementById(“err4”)
  • если введенный пользователем email является пустым или не соответствует критериям регулярного выражения, текстовое поле будет помечено красным цветом с сообщением об ошибке.

  • поскольку мы определили текстовое поле как тип email, оно ожидает символ “@” или в противном случае выдаст ошибку, как показано ниже:

  • когда email, введенный пользователем, соответствует политике, результат будет следующим: текстовое поле помечено зеленым цветом.

3. DeptNo

let did=document.getElementById(“did”);let err5=document.getElementById("err5")//список значений для отделовlet deptno=[10,20,30,40,50]//проверка номера отдела dept=Number(did.value) if (dept=="" || !rDeptno.test(dept)){ console.log('inside if') err5.innerHTML="*DeptNo не может быть пустым или не являться числом. Пожалуйста, проверьте снова"; did.style.border = "2px solid red"; }  else if(!dept=="" && !deptno.includes(dept)) { err5.innerHTML="*DeptNo должен быть из списка значений [10,20,30,40]. Пожалуйста, проверьте снова"; did.style.border = "2px solid red"; } else if(!dept=="" && deptno.includes(dept)){ err5.innerHTML=""; did.style.border = "2px solid green";  }
  • Доступ к элементу формы типа текст для email с использованием document.getElementById(“did”). Также доступ к тегу ошибки с помощью document.getElementById(“err5”).
  • Если значения, введенные пользователем, не удовлетворяют условию if, то возникает ошибка, и текстовое поле помечается красным.

  • Если значения, введенные пользователем, не удовлетворяют условию else if, то возникает ошибка, и текстовое поле помечается красным.

  • Если значения, введенные пользователем, удовлетворяют условию else if, то текстовое поле помечается зеленым.

Вот и все, что касается логики проверки формы, написанной на JavaScript.

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

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

Областью этой статьи являются только клиентские проверки.

Резюме:

  • написать HTML для определения формы проекта.
  • добавить CSS для стилизации элементов HTML формы.
  • JavaScript для обработки проверки формы на клиентской стороне.

От идеи до бизнеса, основанного на искусств...
Prompt Engineering Как обмануть ИИ и решить...
GPTQ или bitsandbytes Какой метод квантован...
Невероятная новая функция среднего восстано...
Как интерпретировать коэффициенты логистиче...
Как создать полярную гистограмму с помощью ...
Искусственный интеллект

Искусственный интеллект