Atribut Pengesahan Borang
Gunakan atribut required, minlength, maxlength, pattern, min, max dan step serta gayakan keadaan pengesahan dengan pseudo-kelas :valid dan :invalid.
Atribut Pengesahan Borang ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Pengesahan Asli Pelayar
HTML5 menyediakan pengesahan borang terbina dalam melalui atribut. Apabila borang dihantar, pelayar mengesahkan setiap medan. Jika pengesahan gagal, pelayar memaparkan petua ralat asli dan menghalang penghantaran — tiada JavaScript diperlukan untuk kes asas.
required
Menambahkan required pada medan masukan, select atau textarea menjadikannya wajib. Pelayar memaparkan ralat jika medan tersebut kosong apabila borang dihantar.
<input type="text" name="name" required>
<select name="plan" required>
<option value="">Choose plan...</option>
<option value="free">Free</option>
</select>minlength dan maxlength
minlength menetapkan bilangan aksara minimum. maxlength menghalang masukan melebihi had maksimum. Gabungkan kedua-duanya untuk menguatkuasakan kerumitan kata laluan atau mengehadkan panjang komen.
<input type="password" name="pass" minlength="12" maxlength="128">
<textarea name="bio" maxlength="500"></textarea>min, max dan step untuk Medan Masukan Berangka
min dan max menetapkan julat yang sah untuk medan masukan nombor dan tarikh. step menetapkan kenaikan — berguna untuk julat (5%), ketepatan perpuluhan dan tarikh sahaja.
<input type="number" min="1" max="10" step="1">
<input type="range" min="0" max="100" step="5">
<input type="date" min="2025-01-01" max="2025-12-31">pattern — Pengesahan Ungkapan Nalar
pattern menerima ungkapan nalar JavaScript. Medan masukan mesti sepadan dengan corak tersebut supaya borang boleh dihantar. Sertakan title untuk menerangkan format yang dijangka dalam petua ralat pelayar.
<!-- UK postcode: -->
<input type="text" pattern="[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}"
title="Enter a valid UK postcode (e.g. SW1A 1AA)">
<!-- Username: letters, digits, underscore, 3-16 chars -->
<input type="text" pattern="[a-zA-Z0-9_]{3,16}" title="3-16 alphanumeric characters">novalidate — Melumpuhkan Pengesahan Asli
Tambahkan novalidate pada elemen <form> untuk melumpuhkan semua pengesahan asli pelayar. Lakukan ini apabila anda melaksanakan pengesahan JavaScript tersuai supaya pengguna mendapat pengalaman yang konsisten.
<form novalidate id="signup">
<!-- custom validation in JS -->
</form>Menyemak Kesahan dalam JavaScript
API Pengesahan Kekangan membolehkan anda menyemak kesahan secara programatik: input.validity (objek ValidityState), input.checkValidity() (mengembalikan nilai boolean), input.setCustomValidity(message) (menetapkan ralat tersuai).
const email = document.querySelector('#email');
if (!email.checkValidity()) {
console.log(email.validationMessage); // browser's error text
console.log(email.validity.valueMissing); // true if empty
console.log(email.validity.typeMismatch); // true if not email format
}setCustomValidity
Panggil setCustomValidity(message) dengan rentetan yang tidak kosong untuk menandakan medan input sebagai tidak sah dengan mesej tersuai. Panggil dengan rentetan kosong untuk mengosongkan ralat. Ini berguna untuk medan yang disahkan oleh pelayan, seperti keunikan nama pengguna.
const username = document.querySelector('#username');
// After async uniqueness check:
if (taken) {
username.setCustomValidity('This username is already taken.');
} else {
username.setCustomValidity(''); // valid
}:valid dan :invalid — Kelas Pseudo
Gayakan medan input yang sah dan tidak sah dengan kelas pseudo CSS. Berhati-hati: medan input berada dalam keadaan :invalid sebelum pengguna berinteraksi dengannya. Gunakan :user-invalid (pelayar moden) atau JavaScript untuk menambah kelas 'disentuh' terlebih dahulu.
/* Modern approach */
input:user-invalid {
border-color: #e53e3e;
}
input:user-valid {
border-color: #38a169;
}
/* Fallback: add .touched class on blur */
.touched:invalid { border-color: #e53e3e; }Mesej Ralat Tersuai dengan reportValidity
form.reportValidity() mencetuskan antara muka pengesahan terbina dalam pelayar pada semua medan. Gunakannya selepas menetapkan mesej kesahan tersuai untuk memaparkannya kepada pengguna tanpa menunggu peristiwa penghantaran.
Corak Paparan Ralat yang Boleh Diakses
Paparkan ralat sebaris menggunakan: 1) aria-invalid="true" pada medan input, 2) perenggan ralat yang kelihatan dan dipautkan dengan aria-describedby, 3) alihkan fokus ke medan pertama yang tidak sah. Ini membantu semua pengguna, termasuk pengguna pembaca skrin.
Semakan Pantas
Atribut manakah yang mengehadkan medan input teks kepada maksimum 280 aksara?
Imbas Kembali: Atribut Pengesahan Borang
required, minlength/maxlength, min/max/step, pattern — semuanya menyediakan pengesahan terbina dalam pelayar secara percuma. Gunakan novalidate apabila melaksanakan pengesahan tersuai dengan JS. API Pengesahan Kekangan memberikan JavaScript akses kepada keadaan kesahan. Gayakan ralat dengan :user-invalid selepas pengguna berinteraksi dengan medan tersebut.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Soalan Lazim
Adakah pelajaran “Atribut Pengesahan Borang” percuma?
Ya — teks penuh “Atribut Pengesahan Borang” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Atribut Pengesahan Borang”?
Gunakan atribut required, minlength, maxlength, pattern, min, max dan step serta gayakan keadaan pengesahan dengan pseudo-kelas :valid dan :invalid. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Atribut Pengesahan Borang” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Kawalan Borang: jenis input, select dan textarea
- ARIA dan Kebolehcapaian: label role aria-*
- HTML5 Semantik: semantik berbanding sup div
- Atribut Pengesahan Borang