Tekstikenttien mukautetut validointimallit

A tekstikenttä hyväksyy kaiken, mitä käyttäjät kirjoittavat – mutta joskus tarvitaan tiettyjä muotoja. Verkkosivustojen URL-osoitteilla, tuotekoodeilla, lisenssinumeroilla tai pelkistä kirjaimista koostuvilla nimillä on kaikilla mallit, jotka tekevät niistä kelvollisia. Mukautettujen validointimallien avulla voit määrittää tarkalleen, mikä muoto on hyväksyttävä, ja havaita virheet ennen lähettämistä.

Tässä oppaassa opit lisäämään mukautettuja validointimalleja WordPress-lomakkeiden tekstikenttiin.

Mitä ovat validointimallit?

Käsite

Validointimallit ovat sääntöjä, jotka määrittävät, mikä syöte on kelvollinen:

• "Saa sisältää vain kirjaimia"
• "URL-osoitteen on oltava kelvollinen"
• "Muodon on oltava ABC-1234"
• "Täytyy olla täsmälleen 10 merkkiä"

Miten he toimivat

1. Käyttäjä kirjoittaa tekstikenttään
2. Lähetyksen yhteydessä (tai kirjoittamisen aikana) syötettä tarkistetaan mallia vasten.
3. Jos se täsmää: Validointi onnistuu
4. Jos ei: Virheilmoitus näytetään

Hyödyt

• Tiedon laatu: Varmista yhdenmukaiset muodot
• Virheiden ehkäisy: Huomaa virheet ajoissa
• Käyttäjän ohjeet: Selkeät odotukset
• Yhteensopivuus alavirran puolella: Data toimii muiden järjestelmien kanssa

Sisäänrakennetut validointimallit

Automaattinen lomakkeiden rakentaja sisältää yleisiä kuvioita:

Sisäänrakennettujen kuvioiden käyttäminen

Vaihe 1: Lisää tekstikenttä

1. Avaa lomakkeesi A.F.B.
2. Vetää teksti kentän muodostaminen
3. Napsauta määrittääksesi

Vaihe 2: Valitse validointimalli

1. Löytää Vahvistusmalli asetuksissa
2. Valitse alasvetovalikosta:
   • Ei mitään (ei kuviota)
   • Sähköposti
   • URL
   • Vain kirjaimia
   • Vain numerot
   • aakkosnumeerinen
   • Mittatilaus
3. Tallenna asetukset

Vaihe 3: Testin validointi

1. Esikatselulomake
2. Kokeile kelvollista syötettä – pitäisi onnistua
3. Kokeile virheellistä syötettä – pitäisi näyttää virhe

Kuvioesimerkkejä ja käyttötapauksia

URL-osoitteen vahvistus

Käyttää:

• Verkkosivusto-kenttä
• Portfoliolinkit
• Sosiaalisen median profiilit
• Viite-URL-osoitteet

Kelvollisia esimerkkejä:

• https://example.com
• http://www.example.com/page
• https://example.com/path?query=value

Virheellisiä esimerkkejä:

• esimerkki.com (puuttuva protokolla)
• www.esimerkki.com (puuttuva protokolla)
• vain tekstiä

Vain kirjaimia

Käyttää:

• Etu- ja sukunimet (yksinkertainen vahvistus)
• Kaupunkien nimet
• Maakoodit
• Aakkosellinen tunniste

Kelvollisia esimerkkejä:

• Johannes
• Seppä
• NewYork

Virheellisiä esimerkkejä:

• John123
• New York (avaruus)
• O'Brien (heittomerkki)

Huomautus: Pelkät kirjaimet ovat ehdoton vaatimus. Harkitse, tarvitsetko välilyöntejä, yhdysmerkkejä tai aksentteja.

Vain numerot

Käyttää:

• Tunnistenumerot
• Tilinumerot
• Määrä (kun numerokenttää ei käytetä)
• PIN-koodit

Kelvollisia esimerkkejä:

• 12345
• 00123
• 9876543210

Virheellisiä esimerkkejä:

• 123-456 (yhdysviiva)
• 123.45 (desimaali)
• 12345A

aakkosnumeerinen

Käyttää:

• Tuotekoodit
• Viitenumerot
• käyttäjätunnukset
• Sarjanumerot

Kelvollisia esimerkkejä:

• ABC123
• User42
• PROD001

Virheellisiä esimerkkejä:

• ABC-123 (yhdysviiva)
• ABC 123 (välilyönti)
• ABC_123 (alaviiva)

Mukautetut validointimallit (Regex)

Mikä on Regex?

Säännölliset lausekkeet (regex) ovat malleja, jotka kuvaavat tekstimuotoja:

• ^ = Merkkijonon alku
• $ = Merkkijonon loppu
• [A-Z] = Mikä tahansa iso kirjain
• [a-z] = Mikä tahansa pieni kirjain
• [0-9] = Mikä tahansa numero
• {3} = Tasan 3 edellisestä
• {2,5} = 2–5 edellisistä
• + = Yksi tai useampi
• * = Nolla tai enemmän
• ? = Valinnainen (nolla tai yksi)

Mukautettujen kuvioiden luominen

1. Valitse vahvistusvalikosta ”Mukautettu”
2. Syötä säännöllisen lausekkeen malli
3. Testaa eri syötteillä

Yleisiä mukautettuja kuvioesimerkkejä

Yhdysvaltain postinumero

Kuvio: ^\d{5}(-\d{4})?$

Vahvistaa:

• 12345 (5 numeroa)
• 12345-6789 (postinumero+4)

Hylkäykset:

• 1234 (liian lyhyt)
• 123456 (liian pitkä)
• ABCDE (kirjaimet)

Yhdysvaltain puhelinnumero

Kuvio: ^\d{3}-\d{3}-\d{4}$

Vahvistaa: 555-123-4567

Joustava muoto: ^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$

Vahvistaa:

• 555-123-4567
• (555) 123-4567
• 555.123.4567
• 555 123 4567

Tuotekoodi (ABC-1234-muodossa)

Kuvio: ^[A-Z]{3}-\d{4}$

Vahvistaa:

• ABC-1234
• XYZ-9999
• PRO-0001

Hylkäykset:

• abc-1234 (pienet kirjaimet)
• AB-1234 (vain 2 kirjainta)
• ABC1234 (puuttuu yhdysmerkki)

Rekisterikilpi (eri muodoissa)

Kuvio (Yhdysvaltojen yleinen): ^[A-Z0-9]{1,7}$

Vahvistaa: 1–7 isoa kirjainta/numeroa

Luottokortti (perusmuoto)

Kuvio: ^\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}$

Vahvistaa:

• 1234567890123456
• 1234 5678 9012 3456
• 1234-5678-9012-3456

Huomautus: Käytä varsinaisia ​​maksuja varten asianmukaisia ​​maksunvälittäjiä ja niiden validointia.

Käyttäjätunnus (kirjaimet, numerot, alaviiva)

Kuvio: ^[a-zA-Z][a-zA-Z0-9_]{2,19}$

Säännöt:

• Alkaa kirjaimella
• Yhteensä 3–20 merkkiä
• Vain kirjaimia, numeroita ja alaviivoja

Vahvistaa: käyttäjä_123, MattiMeikäläinen, testi42

Heksavärikoodi

Kuvio: ^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$

Vahvistaa:

• # FF5733
• #fff
• #ABC123

Päivämäärä (VVVV-KK-PP)

Kuvio: ^\d{4}-\d{2}-\d{2}$

Vahvistaa: 2026-01-15

Huomautus: Päivämäärien kohdalla on yleensä parempi käyttää päivämääräkenttää päivämäärävalitsimella.

Aika (HH:MM 24 tuntia)

Kuvio: ^([01]\d|2[0-3]):[0-5]\d$

Vahvistaa:

• 09:30
• 14:45
• 23:59

Laskun numero (INV-YYYY-NNNN)

Kuvio: ^INV-\d{4}-\d{4}$

Vahvistaa:

• INV-2026-0001
• INV-2025-1234

Sosiaaliturvatunnus (Yhdysvallat)

Kuvio: ^\d{3}-\d{2}-\d{4}$

Vahvistaa: 123-45-6789

Varoitus: Ole varovainen henkilötunnusten keräämisessä – se vaikuttaa tietoturvaan ja yksityisyyteen.

Omien kuvioiden rakentaminen

Vaiheittainen prosessi

1. Määritä vaatimukset: Minkä formaatin tarvitset?
2. Pura se: Mitä hahmoja, kuinka monta, missä järjestyksessä?
3. Rakenna malli: Käännä säännölliseksi lausekkeeksi
4. Testaa tarkasti: Kelvolliset JA virheelliset syötteet
5. Kirjoita virheilmoitus: Auta käyttäjiä ymmärtämään muotoa

Esimerkki: Työntekijätunnus

Vaatimus: 2 kirjainta + 4 numeroa + 1 kirjain (esim. AB1234C)

Hajota:

• 2 isoa kirjainta: [A-Z]{2}
• 4 numeroa: \d{4}
• 1 iso kirjain: [A-Z]
• Ei mitään ennen eikä jälkeen: ^ ja $

Lopullinen kuvio: ^[A-Z]{2}\d{4}[A-Z]$

Testausmallit

Ennen lomakkeen käyttöä:

• Testaa kelvolliset syötteet (pitäisi läpäistä)
• Testaa virheellisiä syötteitä (pitäisi epäonnistua)
• Testaa reunatapauksia (rajat, erikoismerkit)
• Käytä online-regex-testaajia debuggaukseen

Virheilmoitukset validointia varten

Oletusviestit

• "Anna kelvollinen arvo"
• "Tämä kenttä on virheellinen"

Parempia mukautettuja viestejä

Kerro käyttäjille odotettu muoto:

Paikkamerkkien ja ohjetekstien käyttö

Vältä virheet näyttämällä muoto etukäteen:

• Paikanpitäjä: ABC-1234
• Ohjeteksti: "Anna tuotekoodisi (esim. ABC-1234)"

Esimerkkikäytäntöjä

1. Aloita Simple

Käytä sisäänrakennettuja malleja aina kun mahdollista. Mukautettu regex lisää monimutkaisuutta.

2. Älä yliarvioi

Liian tiukat mallit turhauttavat käyttäjiä:

• Yhdysviivalla varustetut nimet (Mary-Jane)
• Nimet heittomerkeillä (O'Brien)
• Kansainväliset merkit (José, Müller)

3. Näytä odotettu muoto

Kerro käyttäjille aina, mitä odotat:

• Paikkamerkki esimerkillä
• Muotoa selittävä ohjeteksti
• Tyhjennä virheilmoitus

4. Testaa reunatapaukset

• Tyhjä syöte
• Välilyönnit alussa/lopussa
• Erikoismerkit
• Enimmäispituus

5. Harkitse vaihtoehtoja

Joskus muut lähestymistavat ovat parempia:

• Päivämäärät → Käytä päivämääräkenttää
• Numerot → Käytä numerokenttää
• Puhelin → Käytä Puhelin-kenttää muodossa
• Kiinteät asetukset → Käytä alasvetovalikkoa

Yhdistäminen muihin validointimenetelmiin

Kuvio + Pakollinen

• Kenttä on täytettävä JA sen on vastattava kuviota
• Tyhjä epäonnistuu "pakollinen"
• Väärä muoto epäonnistuu -kuvio

Kuvio + Min/Max-pituus

• Kuvio validoi muodon
• Pituus vahvistaa koon
• Molempien on läpäistävä

Kuvioiden vianmääritys

Kuvio ei toimi

Tarkistaa:

• Syntaksi on oikein (ei kirjoitusvirheitä)
• Erikoismerkit pakotettiin oikein
• ^ ja $-ankkurit tarvittaessa

Kelvollinen syöte hylätään

Tarkistaa:

• Kuvio voi olla liian tiukka
• Kuviosta puuttuu kelvollisia merkkejä
• Kirjainkoon herkkyysongelmat

Virheellinen syöte hyväksytään

Tarkistaa:

• Kuvio voi olla liian löysä
• Puuttuvat ankkurit (^ ja $)
• Testaa lisää esimerkkejä

Usein Kysytyt Kysymykset

Voinko yhdistää useita kuvioita?

Yksi kenttä käyttää yhtä mallia. Monimutkaista validointia varten yhdistä vaatimukset yhteen säännölliseen lausekkeeseen käyttämällä vuorottelua (|) tai luo malli, joka vastaa kaikkia vaatimuksia.

Ovatko kuviot kirjainkokoherkkiä?

Oletusarvoisesti kyllä. Käytä [A-Za-z] molempien kirjainkokoja vastaavaksi tai lisää kirjainkokoa ei erotteleva merkintä, jos se on tuettu.

Miten sallin välilyöntejä?

Lisää merkkiluokkaasi \s: [A-Za-z\s] löytää kirjaimet ja välilyönnit.

Entä kansainväliset hahmot?

Vakiomuotoiset [A-Za-z] eivät sisällä aksenttisia merkkejä. Kansainvälisten nimien kohdalla harkitse löyhempää validointia tai käytä \p{L}-merkkiä (jos tuettu) mille tahansa kirjaimelle.

Pitäisikö minun validoida sumennus vai lähettää se?

Molemmat toimivat. Sumennuksessa (tarkennuksen menetys) palaute on nopeampaa. Lähetyksessä kaikki näkyy. Monet lomakkeet tekevät molemmat.

Yhteenveto

Mukautettujen validointimallien lisääminen:

1. Valitse kuviotyyppi – Sisäänrakennettu tai mukautettu
2. Määritä kuvio – Valitse tai syötä säännöllinen lauseke
3. Lisää paikkamerkki – Näytä odotettu muoto
4. Lisää ohjeteksti – Selitä vaatimukset
5. Aseta virheilmoitus – Ohjainkorjaus
6. Testaa huolellisesti – Kelvolliset ja virheelliset syötteet

Yhteenveto

Mukautetut validointimallit varmistavat datan laadun valvomalla tiettyjä muotoja. Tarvitsetpa sitten URL-osoitteen validointia, tuotekoodeja tai mukautettuja tunnisteita, mallit havaitsevat virheet ennen lähettämistä ja ohjaavat käyttäjiä korjaamaan syötteet.

Automaattinen lomakkeiden rakentaja sisältää yleisiä kaavoja (sähköposti, URL, kirjaimet, numerot, aakkosnumeeriset) ja tukee mukautettuja säännöllisiä lausekkeita erikoistuneisiin validointitarpeisiin. Puhdas data alkaa asianmukaisesta validoinnista.

Oletko valmis vahvistamaan lomakkeelle syötetyt tiedot? Lataa automaattinen lomakkeiden rakentaja ja varmista, että lomakkeesi keräävät oikein muotoiltua tietoa.