Paano Ipapatupad ang Pagpapatunay ng Form sa Angular JS?

Magbibigay sa iyo ang artikulong ito ng isang detalyado at komprehensibong kaalaman kung paano ipatupad ang Pagpapatunay ng Form sa Angular JS na may Mga Halimbawa

Ang pagpapatunay ay isang pamamaraan upang patunayan ang gumagamit. Ginagamit ito sa lahat ng gusto ng Web Technologies at . Ngunit ngayon ang aming pokus ay nasa Validation in Angular JS sa sumusunod na pagkakasunud-sunod:

Ano ang pagpapatunay ng Form?

Ang pagpapatunay ng form ay isang pamamaraan kung saan maaari naming mapatunayan ang form na HTML. Kumuha tayo ng isang simpleng halimbawa upang ipagpalagay na ang isang gumagamit ay may isang form na HTML at ang form na HTML ay may iba't ibang mga patlang, ang patlang na ito ay napatunayan ng form validator kapag nais naming patunayan ang form na kailangan lang namin upang suriin ang halaga ng partikular na larangan na may ekspresyon ng validator .





validation-in-angular-jsKung ang regular na expression at ang halaga ng patlang ay pareho sa gayon maaari naming sabihin na ang aming form ay napatunayan. Sa form na HTML, mayroong iba't ibang mga uri ng pagpapatunay tulad ng email, kinakailangan, min, max, password, atbp.

Form Validation sa Angular JS

Pag-usapan natin kung paano natin mapatunayan ang isang form sa angular JS. Nagbibigay ang Angular JS ng iba't ibang uri ng mga katangian ng pagpapatunay ng form na maaari naming magamit upang mapatunayan ang form o makuha ang data mula sa form.



  • $ wasto : Sinasabi ng pag-aari na ito kung ang patlang ay wasto o hindi sa pamamagitan ng paglalapat ng naaangkop na patakaran dito.

  • $ invalid : Tulad ng sinabi ng pangalan na hindi wasto ang panahon ng mga tile na ito ang patlang ay hindi wasto o hindi batay sa naaangkop na panuntunan doon.

    parse xml file sa java
  • $ malinis : Magbabalik ito totoo sa patlang ng pag-input ng form ay hindi ginagamit.



  • $ marumi : Magbabalik ito ng totoo sa ginamit na patlang ng pag-input.

  • hinawakan ni $ : BooleanTrue kung malabo ang input.

Upang ma-access ang form: .

Upang ma-access ang isang input: ..

Ngayon ay ipaliwanag natin ang pagpapatunay ng form sa angular JS na may isang halimbawa kaya unang gumawa kami ng dalawang mga file, ang isa ay app.js at isa pa ang index.html. Naglalaman ang aming file ng index.htm ng isang simpleng form na HTML na may angular na pagpapatunay at ang aming file na app.js ay naglalaman ng backend code upang mahawakan ang pagpapatunay ng form sa pahina ng index.html.

isang pangunahing pagkakaiba sa pagitan ng isang hacker at isang etikal na hacker ay ang:

Angindex.htmlform ng nilalaman ng pahina na maywalang bisapag-aari at ano ang eksaktong kahulugan nito?

Ang novalidate na pag-aari sa form tag ay nagsasabi sa HTML na maaari naming magamit ang aming pagpapatunay ng pasadyang form. Kung hindi namin ibibigay ang novalidate na pag-aari noon at ang form ng HTML ay nagpapatunay sa pamamagitan ng paggamit ng mga katangian ng pagpapatunay ng default na form na HTML5.

Mga Hakbang sa Pagpapatunay ng Form

Sa aming form, lumikha kami ng 6 na mga patlang sa aming form ang mga ito ang unang pangalan, apelyido, email, telepono, password, at mensahe.

  1. Una, idinagdag namin ang kinakailangang patunay ng patlang, sinasabi ng validator na ito sa mga gumagamit na kinakailangan ng isang tukoy na patlang.

  2. Susunod ay ang patlang ng email kung ang isang gumagamit ay hindi nagbibigay ng anumang wastong email pagkatapos ang aming nagpapatunay ng email ay nagtapon ng isang error sa pagpapatunay ng email.

  3. Itinakda namin ang minimum at ang maximum na haba sa aming pagpapatunay ng password ang minimum na haba ay 5 at ang maximum na haba ay 8 upang ang gumagamit ay maaaring magbigay ng isang wastong password sa pagitan ng 5 hanggang 8 na mga character.

  4. Sa wakas, itinakda namin ang telepono at mga patlang ng mensahe na kinakailangan at partikular, naglalapat ng pagpapatunay ng numero sa na-file na telepono.

Code para sa Pagpapatunay ng Form sa Angular JS

index.html

Halimbawa ng anggulo ng saklaw na Unang Pangalan 

Ang file na ito ay kinakailangan

Huling pangalan

Ang file na ito ay kinakailangan

Email

Ang file na ito ay kinakailangan

Hindi wastong email

malaking data tutorial para sa mga nagsisimula
Telepono

Ang file na ito ay kinakailangan

Hindi ito wastong telepono

Password

Ang file na ito ay kinakailangan

Ang password sa pagitan ng 5 hanggang 8 na mga character

Mensahe

Ang file na ito ay kinakailangan

Ipasa

app.js

var app = angular.module ('ngValidApp', []) app.controller ('ngValidController', pagpapaandar ($ saklaw) {})

Pag-usapan natin ang ilang direktiba sa pagpapatunay na ginamit sa form:

  • ng-required : Para sa pagbibigay ng kinakailangang larangan
  • ng-show : Upang ipakita ang mensahe ng error batay sa kundisyon (suriin ang mga pag-aari ng pagpapatunay)
  • ng-minlength : Para sa pagbibigay ng minimum na haba
  • ng-maxlength : Para sa pagbibigay ng maximum na haba
  • ng-pattern : Upang tumugma sa isang tukoy na pattern
  • ng-model : Binds ang patlang na may mga pag-aari ng pagpapatunay tulad ng $ error, $ valid, atbp.

Sa pamamagitan nito, natapos namin ang pagpapatunay ng artikulong ito sa Angular JS. Inaasahan kong nakakuha ka ng pag-unawa sa iba't ibang mga bagay na isasaalang-alang para sa form Validation sa Angular JS.

Kung nais mong matuto nang higit pa tungkol sa Angular framework, pagkatapos ay suriin ang aming na kasama ng live na pagsasanay na pinamunuan ng magtuturo at karanasan sa proyekto sa totoong buhay. Tutulungan ka ng pagsasanay na ito na maunawaan ang malalim na Angular at tutulong sa iyo na makamit ang mastery sa paksa.

May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento ng artikulong ito at Babalikan ka namin.