Home-theater-designers
Ang JavaScript ay isa sa pinakatanyag at maraming nalalaman na mga wika ng programa na maaari kang magsimula ngayon. Ang wikang ito sa pagprograma ay tama na sinabi na wika ng web at mahalaga para sa pagdaragdag ng kakayahang umangkop sa iyong mga website.
Ang elemento ng form ay isa sa mga pinaka ginagamit na elemento ng HTML sa mga website. Ang mga form na ito ay kukuha ng input mula sa gumagamit at pinoproseso ito sa browser o server. Gayunpaman, mahalagang patunayan ang mga input na ito upang matugunan ang mga isyu sa seguridad at mga hindi ginustong mga bug.
Pag-unawa sa Manipulasyon ng DOM
Bago kami magpatuloy na magpatupad ng pagpapatunay sa form ng panig ng client sa JavaScript, mahalagang maunawaan ang Modelong Bagay ng Dokumento, na karaniwang kilala bilang 'DOM'. Ang DOM ay isang pamantayan na API na nagbibigay-daan sa JavaScript na makipag-ugnay sa mga elemento sa isang web page na HTML.
Dagdagan ang nalalaman: Ang Nakatagong Bayani ng Mga Website: Pag-unawa sa DOM
Para sa pagdaragdag ng mga tagapakinig ng kaganapan at pagkuha ng mga input ng gumagamit, kakailanganin mong maunawaan ang mga pangunahing kaalaman sa pagmamanipula ng DOM. Narito ang isang halimbawa na nagpapaliwanag kung paano mo mababago ang mga nilalaman ng webpage gamit ang DOM API at JavaScript:
Document
const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';
Sa code sa itaas, ang
Ngayon na naintindihan mo ang mga pangunahing kaalaman ng pagmamanipula ng DOM, magpatuloy tayo at magpatupad ng pagpapatunay ng form.
Form Validation Sa JavaScript
Mayroong iba't ibang mga uri ng mga input na maaari mong kunin mula sa isang gumagamit. Ang uri ng teksto, uri ng email, uri ng password, mga pindutan ng radyo, at mga checkbox ay ilan sa mga pinakakaraniwan na maaari mong makasalamuha. Dahil sa karamihan ng mga uri ng pag-input na ito, kakailanganin mong gumamit ng iba't ibang lohika upang mapatunayan ang bawat isa sa kanila.
Bago sumailalim sa pagpapatunay, maglaan muna tayo ng sandali upang maunawaan ang mga form ng HTML at ang kanilang kahalagahan. Ang mga form ng HTML ay isa sa mga pangunahing paraan ng pakikipag-ugnay sa website dahil pinapayagan kang ipasok ang iyong data, maglapat ng mga pagbabago, magpatawag ng mga pop-up, magsumite ng impormasyon sa isang server, at higit pa.
mag-download ng anumang video mula sa anumang site online na libre
Ang HTML Ginagamit ang elemento upang likhain ang mga form na nakaharap sa gumagamit. Narito kung paano mo mapatunayan ang mga input ng isang form na HTML:
1. Pagpapatunay ng Email
Gumagawa ka man ng isang sistema ng pagpapatotoo o pagkolekta lamang ng mga email ng gumagamit para sa iyong newsletter, mahalagang patunayan ang email bago mo maiimbak ito sa iyong database o iproseso ito. Upang suriin kung nasiyahan ng isang email ang lahat ng kinakailangang mga kundisyon, maaari kang gumamit ng a regular na pagpapahayag .
HTML:
JavaScript:
const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}2. Pagpapatunay ng Password
Ang mga password ay isang mahalagang piraso ng data na nangangailangan ng isang espesyal na uri ng pagpapatunay upang matiyak ang seguridad nito. Isaalang-alang ang isang form sa pag-signup na mayroong dalawang mga patlang: password at kumpirmahin ang mga patlang ng password. Upang mapatunayan ang pares ng mga input na ito, narito ang ilang mga bagay na kakailanganin mong isaalang-alang:
- Ang password ay dapat na higit sa 6 na character ang haba.
- Ang halaga ng password at ang patunay na patlang ng password ay dapat na pareho.
HTML:
JavaScript:
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}3. Pagpapatunay ng Input ng Radyo
Ang pag-input ng radyo sa HTML ay isang espesyal na uri ng elemento ng kontrol na grapiko na nagpapahintulot sa gumagamit na pumili lamang ng isa sa isang paunang natukoy na hanay ng mga kapwa eksklusibong pagpipilian. Ang isang karaniwang kaso ng paggamit ng naturang isang input ay para sa pagpili ng kasarian. Upang mapatunayan ang naturang pag-input, kakailanganin mong suriin kung hindi bababa sa isa sa mga ito ang napili.
Maaari itong makamit gamit ang lohikal na mga operator tulad ng AND ( && ) at hindi ( ! ) operator sa ganitong paraan:
HTML:
Male
Female
Others
JavaScript:
const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!'); 4. Piliin ang Pagpapatunay ng Input
Ang Ginamit ang elemento ng HTML upang lumikha ng isang drop-down na listahan. Ang mga tag sa loob ng tukuyin ng elemento ang mga magagamit na pagpipilian sa drop-down na listahan. Bawat isa sa mga ang mga tag ay may isang katangian na katangian na nauugnay sa kanila.
kung paano ilagay iphone 8 sa recovery mode
Para sa default o paunang pagpipilian, maaari mong itakda ang halaga nito upang maging isang walang laman na string upang ito ay maituring bilang isang hindi wastong pagpipilian. Para sa lahat ng iba pang mga pagpipilian, magtakda ng isang naaangkop na katangian ng halaga. Narito ang isang halimbawa kung paano mo mapatunayan ang a elemento ng pag-input:
HTML:
Select One
Mr
Mrs
Ms
JavaScript:
kung paano makakuha ng wifi sa iyong bahay na walang internet
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}5. Pagpapatunay ng Checkbox
Ang mga elemento ng pag-input ng uri ng checkbox ay nai-render bilang default bilang mga kahon na naka-check o na-tick kapag naaktibo. Pinapayagan ka ng isang checkbox na pumili ng iisang mga halaga para sa pagsusumite sa isang form. Ang mga checkbox ay isang tanyag na pagpipilian para sa input na 'tanggapin ang mga tuntunin at kundisyon'.
Upang malaman kung ang isang checkbox ay nai-tik o hindi, maaari mong ma-access ang naka-check na katangian sa input ng checkbox. Narito ang isang halimbawa:
HTML:
I agree to the terms and conditionsJavaScript:
const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}
Ang Pag-iwas Ay Mas Mabuti kaysa sa Pagaling
Palaging inirerekumenda na patunayan ang lahat ng mga input na natanggap mo mula sa isang bisita upang magbigay ng isang ligtas at ligtas na karanasan. Palaging sinusubukan ng mga hacker na magpasok ng nakakahamak na data sa mga patlang ng pag-input upang maisagawa ang mga pag-atake ng cross-site scripting at mga injection ng SQL.
Ngayon na naiintindihan mo kung paano patunayan ang iyong mga input sa HTML, bakit hindi subukan ito sa pamamagitan ng pagbuo ng isang form at pagpapatupad ng mga diskarte na nakita mo sa itaas?
Magbahagi Magbahagi Mag-tweet Email Paano Lumikha ng isang Form sa HTMLPayagan ang iyong mga gumagamit na maglagay ng data sa iyong mga website na may mga form na HTML.
Basahin Susunod Mga Kaugnay na Paksa- Programming
- HTML
- JavaScript
- Pag-unlad sa Web
- Mga Tutorial sa Coding
Ang Nitin ay isang masugid na developer ng software at isang mag-aaral sa computer engineering na bumubuo ng mga aplikasyon sa web gamit ang mga teknolohiya ng JavaScript. Gumagawa siya bilang isang freelance web developer at gustong magsulat para sa Linux at Programming sa kanyang libreng oras.
Higit pa Mula sa Nitin RanganathMag-subscribe sa aming newsletter
Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!
Mag-click dito upang mag-subscribe