HTML5 telefonnummervalidering med mønster

HTML5 telefonnummervalidering med mønster
Skjemaer er hoveddelen av HTML -dokumentet for å samle inn brukerdata og informasjon. For å få riktig innspill i skjemaet fra brukere, er det nødvendig å begrense brukerne fra å legge inn ugyldig informasjon. Utviklere må legge til noen valideringssjekker på HTML -dokumenter. For dette formålet kan brukeren legge til validering på forskjellige objekter i skjemaet, for eksempel telefonnummervalidering gjennom "mønster" Egenskap.

Dette innlegget vil forklare hvordan du bruker HTML5 telefonnummervalidering med mønsteret.

Hvordan du bruker HTML5 telefonnummervalidering med mønster?

For å legge til telefonnummervalidering med et mønster, følg de gitte instruksjonene.

Trinn 1: Lag en "div" -beholder

Opprinnelig lage en "div" -beholder ved å bruke "”Element og tilordne“id" Egenskap.

Trinn 2: Legg til overskrifter

Deretter legger du til to overskrifter ved å bruke "

”Og“

”Tagger. “

”Tag brukes til å legge inn overskriften på nivå en, og“

”Angir overskriften på nivå to.

Trinn 3: Lag skjema

Deretter lager du et skjema ved å bruke "”Tag sammen med følgende elementer:

  • Sett inn en “”Tag sammen med“til”Attributt til å merke elementet. “For” -attributtet relaterer det spesifikke elementet med etiketten.
  • “”Element legges til etter“”Tag, som refererer til et inngangsfelt for å sette inn data.
  • “” -Elementet er utstyrt med “Type” og “Mønster” -attributter.
  • type”Attributt bestemmer den spesielle typen definerte inngang. Bruk “Tlf”Verdi for å få telefonnummeret fra brukeren.
  • mønster”Definerer formatet til de oppgitte inndatatypene, inkludert e -post, dato, tekst, søk, url, tlf og passord.
  • Opprett en knapp ved hjelp av "type" som "knapp”Og“ verdi ”som“Tast inn”:

Linuxhint Ltd UK


HTML5 telefonnummervalidering med mønster



Format av telefonnummer: xxx-xxx-xxxx







Produksjon

Trinn 4: Stil “Div” -element

For å style “div”Element, Først tilgang til elementet av ID”#validering”Og bruk følgende egenskaper:

#validering
tekst-align: sentrum;
Border-stil: Ridge;
Margin: 50px;
grensefarge: RGB (85, 85, 245);
bakgrunnsfarge: RGB (243, 242, 160);

Her:

  • Tekstalign”Eiendom er satt som“senter”For å justere teksten i sentrum.
  • grensestil”Brukes til å bestemme grensestilen. For eksempel har vi brukt "ridge”Borderstil.
  • margin”Tildeler plassen på utsiden av elementet.
  • grensefarge”Brukes for å spesifisere den fargerike grensen rundt det definerte elementet.
  • bakgrunnsfarge”Angir bakgrunnsfargen på beholderen.

Produksjon

Vi har demonstrert hvordan du bruker HTML5 -telefonnummervalidering med mønsteret.

Konklusjon

For å bruke HTML5 -telefonnummervalideringsmønsteret, oppretter du først et skjema ved å bruke "”Merk og legg til“”Som merker inngangsfeltet. Etter det, legg til “”Element sammen med“type" som "Tlf”Og“ mønster ”attributter. “mønster”Attributt Angir mønsteret for validering av telefonnummer. Dette innlegget har vist prosedyren for å legge til HTML5 -telefonnummervalidering med mønsteret.