Введение в формы в JavaScript

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

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

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

Форма и проверка формы в JavaScript

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

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

  • Текстовое поле: для ввода текста
  • Нажмите кнопку: для выполнения действия
  • Переключатели: для выбора параметра из группы параметров.
  • Флажки: чтобы выбрать или отменить выбор одного независимого параметра

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

Типичная форма выглядит так, как показано ниже,

Код:



Примечание. Я предоставил атрибуты NAME = для всех элементов формы, включая саму форму.

Форма JavaScript использует обработчики событий, такие как onClick или onSubmit, для вызова действия JavaScript, когда пользователь выполняет действие в форме, например нажатие кнопки.

Пример для сбора и проверки информации о пользователе в JavaScript

Реализация кода для сбора и проверки пользовательской информации приведена ниже.

1. index.html

Код:



JavaScript | User Sign-In Form


Personal Information
Full Name


Email Address


Mobile Number


Password


Country
Select
Amstermdam
India
Mexico
UAE


Gender
Male
Female


Hobbies (Optional)
Sports
Reading
Music



JavaScript | User Sign-In Form


Personal Information
Full Name


Email Address


Mobile Number


Password


Country
Select
Amstermdam
India
Mexico
UAE


Gender
Male
Female


Hobbies (Optional)
Sports
Reading
Music






JavaScript | User Sign-In Form


Personal Information
Full Name


Email Address


Mobile Number


Password


Country
Select
Amstermdam
India
Mexico
UAE


Gender
Male
Female


Hobbies (Optional)
Sports
Reading
Music




2. vaidate.js

Код:

// Defining a function to display errtext message
function printerrtext(elemId, hintMsg) (
document.getElementById(elemId).innerHTML = hintMsg;
)
// Defining a function to validate form
function validateForm() (
// Retrieving the values of form elements
var name = document.demoForm.name.value;
var email = document.demoForm.email.value;
var mobile = document.demoForm.mobile.value;
var country = document.demoForm.country.value;
var gender = document.demoForm.gender.value;
var pswd = document.demoForm.pswd.value;
var hobbies = ();
var checkboxes = document.getElementsByName("hobbies()");
for(var i=0; i < checkboxes.length; i++) (
if(checkboxes(i).checked) (
// Populate hobbies array with selected values
hobbies.push(checkboxes(i).value);
)
)
// Defining errtext variables with a default value
var nameErr = emailErr = mobileErr = countryErr = genderErr = pswdErr = true;
// Validate name
if(name == "") (
printerrtext("nameErr", "Please enter your name");
) else (
var regex = /^(a-zA-Z\s)+$/;
if(regex.test(name) === false) (
printerrtext("nameErr", "Please enter a valid name");
) else (
printerrtext("nameErr", "");
nameErr = false;
)
)
// Validate email address
if(email == "") (
printerrtext("emailErr", "Please enter your email address");
) else (
// Regular expression for basic email validation
var regex = /^\ (email protected) \S+\.\S+$/;
if(regex.test(email) === false) (
printerrtext("emailErr", "Please enter a valid email address");
) else(
printerrtext("emailErr", "");
emailErr = false;
)
)
// Validate mobile number
if(mobile == "") (
printerrtext("mobileErr", "Please enter your mobile number");
) else (
var regex = /^(1-9)\d(9)$/;
if(regex.test(mobile) === false) (
printerrtext("mobileErr", "Please enter a valid 10 digit mobile number");
) else(
printerrtext("mobileErr", "");
mobileErr = false;
)
)
// Validate Password
if(pswd == "")(
printerrtext("pswdErr", "Please enter your password");
) else(
var regex = /^(?=.*(0-9))(?=.*( (email protected) #$%^&*))( (email protected) #$%^&*)(6, 16)$/;
if(regex.test(pswd) === false) (
printerrtext("pswdErr", "Min : 6 chacracter in form Asd4$l");
) else(
printerrtext("pswdErr", "");
pswdErr = false;
)
)
// Validate country
if(country == "Select") (
printerrtext("countryErr", "Please select your country");
) else (
printerrtext("countryErr", "");
countryErr = false;
)
// Validate gender
if(gender == "") (
printerrtext("genderErr", "Please select your gender");
) else (
printerrtext("genderErr", "");
genderErr = false;
)
// Prevent the form from being submitted if there are any errtexts
if((nameErr || emailErr || mobileErr || countryErr || genderErr || pswdErr) == true) (
return false;
) else (
// Creating a string from input data for preview
var dataPreview = "You've entered the following details: \n" +
"Full Name: " + name + "\n" +
"Email Address: " + email + "\n" +
"Mobile Number: " + mobile + "\n" +
"Country: " + country + "\n" +
"Gender: " + gender + "\n";
if(hobbies.length) (
dataPreview += "Hobbies: " + hobbies.join(", ");
)
// Display input data in a dialog box before submitting the form
alert(dataPreview);
)
);

3. form-style.css

Код:

body (
font-size: 16px;
background: #f9f9f9;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
)
h2 (
text-align: center;
text-decoration: underline;
)
form (
width: 300px;
background: #fff;
padding: 15px 40px 40px;
border: 1px solid #ccc;
margin: 50px auto 0;
border-radius: 5px;
)
label (
display: block;
margin-bottom: 5px
)
label i (
color: #999;
font-size: 80%;
)
input, select (
border: 1px solid #ccc;
padding: 10px;
display: block;
width: 100%;
box-sizing: border-box;
border-radius: 2px;
)
.row (
padding-bottom: 10px;
)
.form-inline (
border: 1px solid #ccc;
padding: 8px 10px 4px;
border-radius: 2px;
)
.form-inline label, .form-inline input (
display: inline-block;
width: auto;
padding-right: 15px;
)
.errtext (
color: red;
font-size: 90%;
)
input(type="submit") (
font-size: 110%;
font-weight: 100;
background: #006dcc;
border-color: #016BC1;
box-shadow: 0 3px 0 #0165b6;
color: #fff;
margin-top: 10px;
cursor: pointer;
)
input(type="submit"):hover (
background: #0165b6;
)

Выход № 1: правильный ввод пользователя

Вывод № 2: неверные / отсутствующие учетные данные пользователя

  • index.html: создает форму.
  • validate.js: проверяет форму.
  • form-style.css: Дизайн макета формы.

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

Вывод

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

Рекомендуемые статьи

Это руководство по формам в JavaScript. Здесь мы обсуждаем, как собирать и проверять информацию пользователя с соответствующими примерами. Вы также можете посмотреть следующие статьи, чтобы узнать больше

  1. Инкапсуляция в JavaScript (Работа, Преимущества)
  2. Шаги для создания объектов в JavaScript
  3. Логика для поиска обратного в JavaScript с примерами
  4. 6 лучших компиляторов в JavaScript
  5. Полное руководство по флажку в Bootstrap
  6. Типы форм в реакции с примерами
  7. Руководство по проверке формы HTML с примерами

Категория:

Разработка программного обеспечения