Въведение в Формите в 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 формуляри с примери

Категория:

Разработване на софтуер