JavaScript 表单

Pengesahan form JavaScript

Pengesahan form HTML dapat dilakukan dengan JavaScript.

Jika bidang form (fname) kosong, fungsi ini akan menampilkan pesan dan kembali false untuk mencegah pengiriman form:

实例 JavaScript

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

Fungsi ini dapat dipanggil saat mengirim form:

Contoh form HTML

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

Coba sendiri

JavaScript dapat mengesahkan input angka

JavaScript biasanya digunakan untuk mengesahkan input angka:

Masukkan angka antara 1 hingga 10:

Coba sendiri

Pengesahan form HTML otomatis

Pengesahan form HTML dapat dijalankan otomatis oleh browser:

Jika bidang form (fname) kosong, maka required Atribut akan mencegah pengiriman form ini:

Contoh form HTML

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

Coba sendiri

Petunjuk:Pengesahan form HTML otomatis tidak berfungsi di Internet Explorer 9 atau versi yang lebih awal.

Pengesahan Data

Pengesahan data adalah proses untuk memastikan input pengguna bersih, benar, dan berguna.

Tugas pengesahan yang biasa adalah:

  • Apakah pengguna mengisi semua bidang wajib?
  • Apakah pengguna memasukkan tanggal yang sah?
  • Apakah pengguna memasukkan teks di bidang angka?

Dalam sebagian besar kasus, tujuannya adalah untuk memastikan input pengguna benar.

Pengesahan dapat ditentukan dengan berbagai metode dan dipasang dengan berbagai cara.

Pengesahan sisi server dijalankan oleh server Web setelah input dikirim ke server.

Sebelum mengirimkan input ke server Web, pengesahan klien dijalankan oleh browser Web.

Pengesahan Kewajiban HTML

HTML5 memperkenalkan konsep pengesahan HTML baru yang disebut pengesahan kewajiban.

验证 约束 HTML 基于：

  • 属性 验证 约束 HTML input
  • 伪选择器 CSS 验证 约束
  • 属性 和 方法 验证 约束 DOM

属性 验证 约束 HTML input

属性 描述
disabled 禁用 规定 应 禁用 input 元素。
max 最大值 规定 input 元素 的。
min 最小值 规定 input 元素 的。
pattern 模式 规定 input 元素 的 值。
required 必填 规定 input 字段。
type 类型 规定 input 元素。

如需 完整 列表，请 访问 属性 Input HTML。

伪选择器 CSS 验证 约束

选择器 描述
:disabled :disabled 选择 规定 了 "disabled" 属性 的 input 元素。
:invalid :invalid 选择 有无效值 的 input 元素。
:optional :optional 选择 未规定 "required" 属性 的 input 元素。
:required :required 选择 规定 了 "required" 属性 的 input 元素。
:valid 选择 具有有效 值 的 input 元素。

如需 完整 列表，请 访问 伪类 CSS。