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

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

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

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

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

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

<!--file name validations.html-->

<html>
 <head>
 </head>
<body>
 <br>
 <h2>Employee Record Keeping System</h2>
 <div class=”container”>
 <form id=”form” onsubmit=”validation()”>
 <div class=”title”><b>Please Enter Values</b></div>

 <! — First Name input →
 <div>
 <label for=”fname”>First Name</label>
 <input
 type=”text”
 name=”fname”
 id=”fname”
 placeholder=”Vivek”/>
 <p id=”err1"></p>
 </div>

 <! — Last Name input →
 <div>
 <label for=”lname”>Last Name</label>
 <input
 type=”text”
 name=”lname”
 id=”lname”
 placeholder=”Chaudhary”/>
<p id=”err2"></p>
 </div>

 <! — EmployeeId input →
 <div>
 <label for=”eid”>EmployeeId</label>
 <input
 type=”text”
 name=”eid”
 id=”eid”
 placeholder=”1234"/>
 <p id=”err3"></p>
 </div> 

 <! — Email input →
 <div>
 <label for=”email”>Email</label>
 <input
 type=”email”
 name=”email”
 id=”email”
 placeholder=”[email protected]”/>
 <p id=”err4"></p>
 </div>

 <! — Department input →
 <div>
 <label for=”did”>DeptNo</label>
 <input
 type=”text”
 name=”did”
 id=”did”
 placeholder=”10"/>
 <p id=”err5"></p>
 </div>

 <br><br>
 <button id=”btn” type=”submit”>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 (объектной модели данных) и изменять их. Я разбил 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 reGex for Name validation
var rName = /^[A-Za-z]+$/;
// Javascript reGex for EmpID validation.
var rEmpID=/\d{4}$/; 
//Javascript reGex for Email Validation.
var rEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g; 
//JS for deptno validation
var rDeptno = /^\d{2}$/;

Определить функцию проверки

//file name is validation.js

function validation() {
 //first name validation
 if (fname.value==”” || !fname.value.match(rName)){
 err1.innerHTML=”*Firstname cannot be blank and should be characters”;
 fname.style.border = “2px solid red”;
 }
 else {
 err1.innerHTML=””;
 fname.style.border = “2px solid green”; 
 }

 //last name validation
 if (lname.value==”” || !lname.value.match(rName)){
 err2.innerHTML=”*Lastname cannot be blank and should be in characters”;
 lname.style.border = “2px solid red”;
 }
 else {
 err2.innerHTML=””;
 lname.style.border = “2px solid green”; 
 }

 //email validation
 console.log(“email id is “,email.value)
 if (email.value==”” && !rEmail.test(email.value)){
 console.log(“inside email if”)
 err4.innerHTML=”*EmailID should be non-empty and valid. Please follow rules”;
 email.style.border = “2px solid red”;
 }
 else {
 err4.innerHTML=””;
 email.style.border = “2px solid green”; 
 }

 //employee ID validation
 if (eid.value==”” || !rEmpID.test(eid.value)){
 err3.innerHTML=”*Please enter a valid Employee ID starting with 2 characters and 6 digits”;
 eid.style.border = “2px solid red”;
 }
 else {
 err3.innerHTML=””;
 eid.style.border = “2px solid green”; 
 }

 //department no validation
 dept=Number(did.value)
 console.log(‘value of dept ‘,dept +” “+typeof(dept))
 if (dept==”” || !rDeptno.test(dept)){
 console.log(‘inside if’)
 err5.innerHTML=”*DeptNo cannot be Empty or non-numeric. Please check again”;
 did.style.border = “2px solid red”;
 } 
 else if(!dept==”” && !deptno.includes(dept)) {
 console.log(“value of dept entered “, did.value + “ “+typeof(did.value))
 err5.innerHTML=”*DeptNo should be from list of values[10,20,30,40]. 
                     Please check again”;
 did.style.border = “2px solid red”;
 }
 else if(!dept==”” && deptno.includes(dept)){
 console.log(‘inside 2nd elif’)
 err5.innerHTML=””;
 did.style.border = “2px solid green”; 
 }
}

form.addEventListener(btn,(event)=>{
  event.preventDefault()
});

Проверки

Имя

let fname=document.getElementById(“fname”);
let err1=document.getElementById("err1");

// Javascript reGex for Name validation
var rName = /^[A-Za-z]+$/;

//first name validation
 if (fname.value=="" || !fname.value.match(rName)){
 err1.innerHTML="*Firstname cannot be blank and should be in characters";
 fname.style.border = "2px solid red";
 }
 else {
 err1.innerHTML="";
 fname.style.border = "2px solid green"; 
 }

получить доступ к элементу ввода формы текстового типа для имени с помощью document.getElementById(“fname”) также получить доступ к тегу ошибки с помощью document.getElementById(“err1”)
определите регулярное выражение для имя, используяrName = /^[A-Za-z]+$/
Следующая часть — это блок if-else, в котором выполняется сравнение для выполнения действия над формой. Если имя, введенное пользователем, имеет значение NULL или не соответствует критериям регулярного выражения, текстовое поле будет отмечено красным с сообщением об ошибке.

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

Логика проверки LastName такая же, как и FirstName.

2. Электронная почта.

let email=document.getElementById(“email”);
let err4=document.getElementById("err4");

//Javascript reGex for Email Validation.
var rEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g;

//email validation
 if (email.value=="" && !rEmail.test(email.value)){
 
 err4.innerHTML="*EmailID should be non-empty and valid. Please follow rules";
 email.style.border = "2px solid red";
 }
 else {
 err4.innerHTML="";
 email.style.border = "2px solid green"; 
 }

получить доступ к элементу ввода формы текстового типа для электронной почты, используя document.getElementById(“email”), а также получить доступ к тегу ошибки, используя document.getElementById(“err4”).
Если идентификатор электронной почты, введенный пользователем, имеет значение NULL или не соответствует критериям регулярного выражения, текстовое поле будет отмечено красным с сообщением об ошибке.

поскольку мы определили поле ввода текста как тип электронной почты, оно ожидает символ «@», иначе выдаст ошибку, как показано ниже:

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

3. Номер отдела

let did=document.getElementById(“did”);
let err5=document.getElementById("err5")

//list of values for departments
let deptno=[10,20,30,40,50]

//department no validation
 dept=Number(did.value)
 if (dept=="" || !rDeptno.test(dept)){
 console.log('inside if')
 err5.innerHTML="*DeptNo cannot be Empty or non-numeric. Please check again";
 did.style.border = "2px solid red";
 } 
 else if(!dept=="" && !deptno.includes(dept)) {
 err5.innerHTML="*DeptNo should be from list of values[10,20,30,40]. 
                     Please check again";
 did.style.border = "2px solid red";
 }
 else if(!dept=="" && deptno.includes(dept)){
 err5.innerHTML="";
 did.style.border = "2px solid green"; 
 }
}

получить доступ к элементу ввода формы текстового типа для электронной почты, используя document.getElementById(“did”). Также получить доступ к тегу ошибки, используя document.getElementById(“err5”) .
если значения, введенные пользователем, не удовлетворяют условию if, выдается ошибка, и текстовое поле помечается красным.

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

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

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

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

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

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

Краткое содержание:

напишите HTML, чтобы определить форму проекта.
добавьте CSS, чтобы стилизовать элементы HTML-формы.
JavaScript для проверки формы на стороне клиента.

Новые материалы

Как использовать JavaScript для парсинга веб-страниц

Работая с сайтами Higglo Digital, которые ежегодно посещают более 50 миллиардов веб-сайтов, я пишу на технические темы и учу инженеров иметь прочную основу, которая поможет им продвинуться в..

Как использовать вкладки в Vuetify

Вкладки — отличный способ упорядочить содержимое и добавить в приложение дополнительную иерархию навигации. В этой статье мы узнаем, как создавать их в Vuetify. v-вкладки и v-вкладки..

Модульное тестирование в чистой архитектуре с .NET

Обеспечение качества и надежности кода В этой статье мы рассмотрим важность модульного тестирования в чистой архитектуре и то, как оно влияет на общее качество программных проектов. Мы..

Динамическое программирование :

Запоминание и табулирование Давайте рассмотрим оба метода, поставив каждый из них перед одной и той же проблемой: как найти конкретное число Фибоначчи? Мемоизация Во-первых, давайте..

«Пора сдаться!»

«Пора сдаться!» Я пытался понять, как работает пакет всплывающих подсказок. Я не был успешным в течение одного полного дня. Когда я застрял, я научился делать следующее: Сделайте шаг..

Как добавить дополнительную функциональность к вашим модулям с помощью Babel

Краткое введение в АСТ Babel, компилятор JavaScript, прошел долгий путь с момента своего первоначального выпуска в 2014 году. Babel — первоначально называвшийся 6to5 (который превратил код..

C# стал еще острее!

Если вы пропустили, в этом году техническое сообщество пережило еще одну важную веху. Выпуск .NET Core 3.0 — это значительное достижение, в нем представлено множество новых функций, включая новую..

Метки

Machine Learning JavaScript Data Science Artificial Intelligence Software Development Web Development Python Coding Deep Learning AI Software Engineering React Nodejs Development Data Java NLP Typescript Front End Development Learning Tutorial Productivity Algorithms Tech Javascript Development Computer Science Angular ChatGPT CSS Python Programming Programming Languages Neural Networks Developer Javascript Tips Self Improvement React Native ES6 Science