Corak Pengesahan Tersuai untuk Medan Teks

A medan teks menerima apa sahaja yang ditaip pengguna—tetapi kadangkala anda memerlukan format tertentu. URL laman web, kod produk, nombor lesen atau nama huruf sahaja semuanya mempunyai corak yang menjadikannya sah. Corak pengesahan tersuai membolehkan anda menentukan dengan tepat format yang boleh diterima, mengesan ralat sebelum penyerahan.

Dalam panduan ini, anda akan belajar cara menambah corak pengesahan tersuai pada medan teks dalam borang WordPress anda.

Apakah Corak Pengesahan?

Konsep itu

Corak pengesahan ialah peraturan yang menentukan input yang sah:

• "Hanya perlu mengandungi huruf"
• "Mesti URL yang sah"
• "Mesti sepadan dengan format ABC-1234"
• "Mesti betul-betul 10 aksara"

Bagaimana Mereka Bekerja

1. Jenis pengguna dalam medan teks
2. Semasa menghantar (atau semasa mereka menaip), input disemak terhadap corak
3. Jika sepadan: Pengesahan lulus
4. Jika tidak: Mesej ralat dipaparkan

Faedah

• Kualiti data: Pastikan format yang konsisten
• Pencegahan ralat: Tangkap kesilapan awal
• Panduan pengguna: Jangkaan yang jelas
• Keserasian hiliran: Data berfungsi dengan sistem lain

Corak Pengesahan Terbina Dalam

Pembina Borang Automatik merangkumi corak-corak umum:

Menggunakan Corak Terbina Dalam

Langkah 1: Tambah Medan Teks

1. Buka borang anda dalam A.F.B.
2. Seret teks medan untuk membentuk
3. Klik untuk mengkonfigurasi

Langkah 2: Pilih Corak Pengesahan

1. Cari Corak Pengesahan dalam tetapan
2. Pilih daripada menu lungsur turun:
   • Tiada (tiada corak)
   • E-mel
   • URL
   • Huruf Sahaja
   • Nombor Sahaja
   • Alphanumerik
   • Adat
3. Simpan tetapan

Langkah 3: Pengesahan Ujian

1. Borang pratonton
2. Cuba input yang sah—sepatutnya lulus
3. Cuba input tidak sah—sepatutnya menunjukkan ralat

Contoh Corak dan Kes Penggunaan

Pengesahan URL

Gunakan untuk:

• Medan laman web
• Pautan portfolio
• Profil media sosial
• URL Rujukan

Contoh yang sah:

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

Contoh tidak sah:

• example.com (protokol tiada)
• www.example.com (protokol tiada)
• hanya beberapa teks

Huruf Sahaja

Gunakan untuk:

• Nama pertama/nama keluarga (pengesahan mudah)
• Nama-nama bandar
• Kod negara
• Pengecam abjad

Contoh yang sah:

• John
• Smith
• NewYork

Contoh tidak sah:

• John123
• New York (angkasa)
• O'Brien (apostrof)

Catatan: Huruf sahaja adalah ketat. Pertimbangkan sama ada anda memerlukan jarak, tanda hubung atau aksen.

Nombor Sahaja

Gunakan untuk:

• Nombor pengenalan
• Nombor akaun
• Kuantiti (apabila tidak menggunakan medan nombor)
• kod PIN

Contoh yang sah:

• 12345
• 00123
• 9876543210

Contoh tidak sah:

• 123-456 (tanda sempang)
• 123.45 (perpuluhan)
• 12345A

Alphanumerik

Gunakan untuk:

• Kod produk
• Nombor rujukan
• Nama pengguna
• Nombor siri

Contoh yang sah:

• ABC123
• User42
• PROD001

Contoh tidak sah:

• ABC-123 (tanda sempang)
• ABC 123 (ruang)
• ABC_123 (garis bawah)

Corak Pengesahan Tersuai (Regex)

Apa itu Regex?

Ungkapan biasa (regex) ialah corak yang menggambarkan format teks:

• ^ = Permulaan rentetan
• $ = Penghujung rentetan
• [A-Z] = Sebarang huruf besar
• [a-z] = Mana-mana huruf kecil
• [0-9] = Sebarang digit
• {3} = Tepat 3 daripada sebelumnya
• {2,5} = Antara 2 dan 5 daripada sebelumnya
• + = Satu atau lebih
• * = Sifar atau lebih
• ? = Pilihan (sifar atau satu)

Mencipta Corak Tersuai

1. Pilih “Tersuai” daripada menu lungsur turun pengesahan
2. Masukkan corak regex anda
3. Uji dengan pelbagai input

Contoh Corak Tersuai Biasa

Poskod AS

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

Mengesahkan:

• 12345 (5 digit)
• 12345-6789 (Poskod+4)

Tolak:

• 1234 (terlalu pendek)
• 123456 (terlalu panjang)
• ABCDE (huruf)

Nombor Telefon AS

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

Mengesahkan: 555-123-4567

Untuk format fleksibel: ^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$

Mengesahkan:

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

Kod Produk (format ABC-1234)

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

Mengesahkan:

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

Tolak:

• abc-1234 (huruf kecil)
• AB-1234 (hanya 2 huruf)
• ABC1234 (tanda sempang hilang)

Plat Lesen (Pelbagai Format)

Corak (umum AS): ^[A-Z0-9]{1,7}$

Mengesahkan: 1-7 huruf besar/nombor

Kad Kredit (Format Asas)

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

Mengesahkan:

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

Catatan: Untuk pembayaran sebenar, gunakan pemproses pembayaran yang betul dengan pengesahannya.

Nama Pengguna (Huruf, Nombor, Garis Bawah)

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

Peraturan:

• Bermula dengan huruf
• Jumlah 3-20 aksara
• Hanya huruf, nombor, garis bawah

Mengesahkan: pengguna_123, JohnDoe, test42

Kod Warna Heks

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

Mengesahkan:

• #FF5733
• # fff
• #ABC123

Tarikh (TTTT-BB-HH)

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

Mengesahkan: 2026-01-15

Catatan: Untuk tarikh, penggunaan medan Tarikh dengan pemilih tarikh biasanya lebih baik.

Masa (HH:BB 24 jam)

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

Mengesahkan:

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

Nombor Invois (INV-YYYY-NNNN)

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

Mengesahkan:

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

Nombor Keselamatan Sosial (AS)

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

Mengesahkan: 123-45-6789

Amaran: Berhati-hati dalam pengumpulan SSN—implikasi keselamatan dan privasi.

Membina Corak Anda Sendiri

Proses Langkah demi Langkah

1. Tentukan keperluan: Format apa yang anda perlukan?
2. Pecahkan: Watak apa, berapa ramai, dalam susunan apa?
3. Corak binaan: Terjemahkan kepada regex
4. Uji dengan teliti: Input yang sah DAN tidak sah
5. Tulis mesej ralat: Bantu pengguna memahami format

Contoh: ID Pekerja

Keperluan: 2 huruf + 4 digit + 1 huruf (cth., AB1234C)

Rosak:

• 2 huruf besar: [A-Z]{2}
• 4 digit: \d{4}
• 1 huruf besar: [A-Z]
• Tiada apa-apa sebelum atau selepas: ^ and $

Corak akhir: ^[A-Z]{2}\d{4}[A-Z]$

Corak Pengujian

Sebelum digunakan dalam bentuk:

• Uji input yang sah (sepatutnya lulus)
• Uji input yang tidak sah (sepatutnya gagal)
• Kes pinggir ujian (sempadan, aksara khas)
• Gunakan penguji regex dalam talian untuk menyahpepijat

Mesej Ralat untuk Pengesahan

Mesej Lalai

• "Sila masukkan nilai yang sah"
• "Medan ini tidak sah"

Mesej Tersuai yang Lebih Baik

Beritahu pengguna format yang dijangkakan:

Menggunakan Placeholder dan Teks Bantuan

Cegah ralat dengan menunjukkan format terlebih dahulu:

• Pemegang tempat: "ABC-1234"
• Teks bantuan: “Masukkan kod produk anda (cth., ABC-1234)”

Amalan Terbaik

1. Mulakan Mudah

Gunakan corak terbina dalam apabila boleh. Regex tersuai menambah kerumitan.

2. Jangan Terlalu Mengesahkan

Corak yang terlalu ketat mengecewakan pengguna:

• Nama dengan tanda sempang (Mary-Jane)
• Nama-nama dengan apostrof (O'Brien)
• Watak-watak antarabangsa (José, Müller)

3. Tunjukkan Format yang Diharapkan

Sentiasa beritahu pengguna apa yang anda harapkan:

• Pemegang tempat dengan contoh
• Teks bantuan yang menerangkan format
• Kosongkan mesej ralat

4. Kes Tepi Ujian

• Input kosong
• Ruang pada mula/akhir
• Aksara khas
• Panjang maksima

5. Pertimbangkan Alternatif

Kadangkala pendekatan lain lebih baik:

• Tarikh → Gunakan medan Tarikh
• Nombor → Gunakan medan Nombor
• Telefon → Gunakan medan Telefon dengan format
• Pilihan yang telah diperbaiki → Gunakan Menu lungsur turun

Menggabungkan dengan Pengesahan Lain

Corak + Diperlukan

• Medan mesti diisi DAN sepadan dengan corak
• Gagal kosong "diperlukan"
• Format salah gagal corak

Corak + Panjang Min/Maks

• Corak mengesahkan format
• Panjang mengesahkan saiz
• Kedua-duanya mesti lulus

Corak Penyelesaian Masalah

Corak Tidak Berfungsi

Semak:

• Sintaks betul (tiada kesalahan taip)
• Watak khas terlepas dengan betul
• ^ dan $ sauh jika perlu

Input Sah Ditolak

Semak:

• Corak mungkin terlalu ketat
• Tiada aksara sah dalam corak
• Isu sensitiviti huruf besar/kecil

Input Tidak Sah Diterima

Semak:

• Corak mungkin terlalu longgar
• Sauh yang hilang (^ dan $)
• Uji dengan lebih banyak contoh

Soalan Lazim

Bolehkah saya menggabungkan pelbagai corak?

Satu medan menggunakan satu corak. Untuk pengesahan yang kompleks, gabungkan keperluan dalam satu regex menggunakan pengulangan (|) atau cipta corak untuk memadankan semua keperluan.

Adakah corak sensitif huruf besar/kecil?

Secara lalai, ya. Gunakan [A-Za-z] untuk memadankan kedua-dua huruf besar/kecil atau tambahkan bendera tidak sensitif huruf besar/kecil jika disokong.

Bagaimanakah saya membenarkan ruang?

Tambahkan \s pada kelas aksara anda: [A-Za-z\s] memadankan huruf dan ruang.

Bagaimana pula dengan watak-watak antarabangsa?

Standard [A-Za-z] tidak termasuk aksara beraksen. Untuk nama antarabangsa, pertimbangkan pengesahan yang lebih longgar atau gunakan \p{L} (jika disokong) untuk sebarang huruf.

Patutkah saya mengesahkan semasa blur atau menghantar?

Kedua-duanya berfungsi. Apabila kabur (hilang fokus) memberikan maklum balas yang lebih pantas. Apabila dihantar, ia menangkap segalanya. Banyak borang melakukan kedua-duanya.

Ringkasan

Menambah corak pengesahan tersuai:

1. Pilih jenis corak – Terbina dalam atau tersuai
2. Konfigurasikan corak – Pilih atau masukkan regex
3. Tambah ruang letak – Tunjukkan format yang dijangkakan
4. Tambah teks bantuan – Terangkan keperluan
5. Tetapkan mesej ralat – Pembetulan panduan
6. Uji dengan teliti – Input yang sah dan tidak sah

Kesimpulan

Corak pengesahan tersuai memastikan kualiti data dengan menguatkuasakan format tertentu. Sama ada anda memerlukan pengesahan URL, kod produk atau pengecam tersuai, corak mengesan ralat sebelum penyerahan dan membimbing pengguna untuk membetulkan input.

Pembina Borang Automatik merangkumi corak umum (E-mel, URL, Huruf, Nombor, Alfanumerik) dan menyokong regex tersuai untuk keperluan pengesahan khusus. Data bersih bermula dengan pengesahan yang betul.

Bersedia untuk mengesahkan input borang anda? Muat Turun Pembina Borang Automatik dan pastikan borang anda mengumpul data yang diformat dengan betul.