HTML Academy · Pelajaran

Asas API Pengesahan Kekangan

Baca keadaan kesahan dan mesej tersuai dengan API Pengesahan Kekangan

Pelajaran 3 daripada 413 langkah

Asas API Pengesahan Kekangan ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Apakah itu API Pengesahan Kekangan?

API Pengesahan Kekangan ialah antara muka JavaScript untuk membaca dan menetapkan keadaan pengesahan form:

Periksa sama ada medan itu sah
Baca kekangan khusus yang gagal
Tetapkan mesej ralat tersuai
Cetuskan antara muka pengesahan pelayar secara program

Sifat validity

Setiap kawalan form mempunyai objek validity dengan penanda benar/palsu yang khusus:

const input = document.getElementById('email');
const v = input.validity;

console.log(v.valid);         // true if all constraints pass
console.log(v.valueMissing);  // true if required but empty
console.log(v.typeMismatch);  // true if type doesn't match (e.g. bad email)
console.log(v.patternMismatch); // true if pattern fails
console.log(v.tooShort);      // true if shorter than minlength
console.log(v.tooLong);       // true if longer than maxlength
console.log(v.rangeUnderflow); // true if less than min
console.log(v.rangeOverflow);  // true if more than max

Kaedah checkValidity

checkValidity() mengembalikan true/false dan mencetuskan peristiwa invalid:

const form = document.getElementById('my-form');

// Check entire form:
if (!form.checkValidity()) {
  console.log('Form has errors');
}

// Check individual field:
const email = document.getElementById('email');
if (!email.checkValidity()) {
  console.log('Email is invalid');
}
// The 'invalid' event fires on invalid fields

Kaedah reportValidity

reportValidity() memaparkan antara muka pengesahan asli pelayar:

const input = document.getElementById('username');

// Shows native browser error tooltip if invalid:
const valid = input.reportValidity();
console.log(valid);  // true or false

// On a form: validates all fields and shows first error:
document.getElementById('form').reportValidity();

Sifat validationMessage

validationMessage mengembalikan rentetan mesej ralat pelayar:

const email = document.querySelector('input[type=email]');
email.value = 'not-an-email';

console.log(email.validationMessage);
// e.g. "Please include an '@' in the email address..."

console.log(email.validity.typeMismatch); // true

setCustomValidity

setCustomValidity(message) menetapkan ralat pengesahan tersuai:

const username = document.getElementById('username');

// Check availability on blur:
username.addEventListener('blur', async () => {
  const res = await fetch(`/check-username?name=${username.value}`);
  const { taken } = await res.json();

  if (taken) {
    username.setCustomValidity('This username is already taken.');
  } else {
    username.setCustomValidity('');  // empty string = clear the error
  }
});

Mengosongkan Kesahan Tersuai

Anda mesti mengosongkan kesahan tersuai apabila pengguna membetulkan isu tersebut:

const input = document.getElementById('username');

input.addEventListener('input', () => {
  // Clear custom error when user starts typing again:
  input.setCustomValidity('');
});

input.addEventListener('blur', async () => {
  // Re-validate on blur:
  const taken = await checkUsername(input.value);
  input.setCustomValidity(taken ? 'Username taken' : '');
});

Peristiwa invalid

Peristiwa invalid dicetuskan pada kawalan form yang gagal dalam pengesahan:

document.querySelectorAll('input').forEach(input => {
  input.addEventListener('invalid', (e) => {
    e.preventDefault();  // prevent default browser tooltip
    // Show your custom error UI instead:
    showError(input, input.validationMessage);
  });
});

Sifat willValidate

willValidate bernilai true jika elemen itu mengambil bahagian dalam pengesahan kekangan:

document.querySelectorAll(':input').forEach(el => {
  if (el.willValidate) {
    console.log(el.name, 'will be validated');
  }
});
// Disabled, hidden, or output elements return willValidate = false

Menggunakan validity dalam Pengesahan Tersuai

Contoh pengesahan tersuai yang lengkap:

<form id="signup" novalidate>
  <input type="email" id="email" name="email" required>
  <span id="email-err" role="alert"></span>
  <button type="submit">Sign Up</button>
</form>

<script>
const form = document.getElementById('signup');
const email = document.getElementById('email');
const err = document.getElementById('email-err');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  err.textContent = '';

  if (email.validity.valueMissing) {
    err.textContent = 'Email is required.';
    email.focus();
    return;
  }
  if (email.validity.typeMismatch) {
    err.textContent = 'Enter a valid email address.';
    email.focus();
    return;
  }
  // Submit...
});
</script>

Ringkasan Penanda ValidityState

Semua penanda ValidityState:

valueMissing — diperlukan tetapi kosong
typeMismatch — format jenis yang salah
patternMismatch — ungkapan nalar corak gagal
tooShort / tooLong — minlength/maxlength
rangeUnderflow / rangeOverflow — min/max
stepMismatch — bukan nilai langkah yang sah
customError — mesej setCustomValidity ditetapkan
badInput — pelayar tidak dapat menghuraikan nilai tersebut

Semakan Ringkas

Bagaimanakah anda memaparkan tetingkap timbul ralat pengesahan asli pelayar secara program?

Jawab dalam pelajaran interaktif

Ringkasan: API Pengesahan Kekangan

Perkara penting tentang API Pengesahan Kekangan:

input.validity — objek ValidityState dengan penanda khusus
checkValidity() — mengembalikan true/false, mencetuskan peristiwa invalid
reportValidity() — memeriksa + memaparkan antara muka ralat asli
validationMessage — rentetan ralat pelayar
setCustomValidity(msg) — menetapkan ralat tersuai; rentetan kosong untuk mengosongkannya

Percuma untuk bermula

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: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Asas API Pengesahan Kekangan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “Asas API Pengesahan Kekangan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Asas API Pengesahan Kekangan”?

Baca keadaan kesahan dan mesej tersuai dengan API Pengesahan Kekangan Anda berlatih HTML 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 HTML Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML 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 3 daripada 4.

Berapa lamakah pelajaran “Asas API Pengesahan Kekangan” 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 HTML Academy ini?

Ya. Setiap pelajaran HTML 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

required pattern min max dan maxlength
Atribut novalidate
Asas API Pengesahan Kekangan
Pertukaran Pengesahan HTML5 dengan JavaScript

← Kembali ke HTML Academy