Johdatus JavaScriptin lomakkeisiin

JavaScript on ohjelmointikieli, jota käytetään yleisesti web-sovelluksissa tietojen laskemiseen, manipulointiin ja validointiin, dynaamisten sivujen luomiseen ja vuorovaikutukseen käyttäjän kanssa. Koska JavaScriptillä on monia käyttötapauksia, tässä artikkelissa opitaan lomakkeista ja niiden validoinnista JavaScriptin kautta.

JavaScriptin avulla voimme parantaa, validoida HTML-muotoa ja sen elementtejä asiakaspuolella edes käyttämättä palvelinta. JavaScript voi varmistaa, että käyttäjä täyttää kaikki vaatimukset ennen lomakkeen lähettämistä sovellusohjelmaan.

Koska voimme vahvistaa lomakkeen asiakaspuolella, tietojen käsittely nopeutuu palvelinpuolen validointiin verrattuna. Suurin osa web-kehittäjistä käyttää JavaScriptin lomakkeiden validointia.

Lomake ja lomakkeen validointi JavaScript-muodossa

Lomakkeet ovat tärkeä osa mitä tahansa verkkosovellusta käyttäjän tietojen, palautteen tai kyselyiden keräämiseksi. JavaScriptin avulla voimme tarjota paremman käyttökokemuksen näyttämällä tuloksia käyttäjälle tehokkaalla tavalla.

Elementit, joita käytetään yleisimmin lomakkeissa tietojen keräämiseen, ovat:

  • Tekstiruutu: Tekstin kirjoittaminen
  • Painike: Suorittaa toiminnon
  • Radiopainikkeet: Valitse vaihtoehto vaihtoehtoryhmästä
  • Valintaruudut: Voit valita yhden yksittäisen vaihtoehdon tai poistaa sen valinnan

Lomakkeita toteutettaessa meidän on annettava nimi lomakkeellemme ja lomakkeessamme käyttämille elementeille, koska nimeämämme nimet auttavat meitä viittaamaan kyseiseen esineeseen (muoto ja sen elementti) JavaScript-koodiin.

Tyypillinen muoto näyttää alla esitetyltä,

Koodi:



Huomaa: Olen toimittanut NAME = -attribuutit kaikille lomakeelementeille, myös itse lomakkeelle.

JavaScript-lomake käyttää tapahtumakäsittelijöitä, kuten onClick tai onSubmit, JavaScripti-toiminnon käynnistämiseen, kun käyttäjä suorittaa lomakkeen toiminnon, kuten napsauttamalla painiketta.

Esimerkki käyttäjän tietojen keräämiseksi ja validoimiseksi JavaScript-muodossa

Koodin toteutus käyttäjätietojen keräämistä ja validointia varten on annettu alla.

1. hakemisto.html

Koodi:



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

Koodi:

// 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. muoto-tyyli.css

Koodi:

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;
)

Lähtö # 1: Oikea käyttäjän syöttö

Tulos # 2: Väärä / puuttuva käyttäjän käyttäjätiedot

  • index.html: Luo muodon.
  • validate.js: Vahvistaa lomakkeen.
  • form-style.css: Suunnittelee lomakkeen asettelun.

Lomakkeeseen syötettyjen tietojen on oltava oikeassa muodossa, kuten hakemuksessa vaaditaan, ja tietyt kentät on pakollisesti täytettävä lomakkeen toimittamiseksi.

johtopäätös

Tässä artikkelissa olemme oppineet lomakkeesta ja lomakkeissa käytetyistä eri elementeistä tai säätimistä ja siitä, mikä rooli JavaScript on lomakkeen validoinnissa, käyttäjän syöttämien tietojen todentamisessa, tapahtumien käsittelytoiminnoissa, kun toiminto suoritetaan, kuten painikkeen napsauttaminen ja sen edut.

Suositellut artikkelit

Tämä on opas lomakkeisiin JavaScript-muodossa. Tässä keskustellaan siitä, kuinka kerätä ja validoida käyttäjätietoja sopivilla esimerkeillä. Voit myös katsoa seuraavia artikkeleita saadaksesi lisätietoja-

  1. Kapselointi JavaScriptiin (toimiva, edut)
  2. Objektien luomisen vaiheet JavaScript-sovelluksessa
  3. Logiikka löytää käänteinen JavaScriptillä esimerkkien avulla
  4. 6 suosituinta kääntäjää JavaScriptissä
  5. Täydellinen opas Bootstrap-valintaruutuun
  6. Reagoi esimerkkeihin
  7. Opas HTML-lomakkeen validointiin esimerkkien avulla

Luokka:

Ohjelmistokehitys