Bagaimana untuk menggunakan JavaScript untuk melaksanakan pengesahan borang web?

Bagaimana untuk menggunakan JavaScript untuk melaksanakan pengesahan borang web?

Sebagai salah satu elemen asas pembangunan web, borang memainkan peranan penting dalam halaman web. Apabila pengguna berinteraksi dengan halaman web, melalui borang, pengguna boleh memasukkan, menyerahkan dan mengubah suai data. Walau bagaimanapun, data yang dimasukkan oleh pengguna tidak selalu tepat, jadi ia perlu menambah fungsi pengesahan borang pada halaman web. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan pengesahan borang web dan memberikan contoh kod khusus.

1. Dapatkan elemen borang
   Sebelum memulakan pengesahan borang, kita perlu mendapatkan rujukan kepada elemen borang terlebih dahulu. Melalui kaedah document.querySelector() atau document.getElementById(), kita boleh mendapatkan elemen borang yang sepadan dengan mudah.

const form = document.querySelector('#myForm');

2. Mendengar acara penyerahan borang
   Dalam borang, kami selalunya perlu mengesahkan apabila pengguna mengklik butang hantar dan menghalang kelakuan penyerahan lalai borang. Untuk melaksanakan fungsi ini, kita perlu mendengar acara penyerahan borang dan melaksanakan operasi pengesahan borang dalam fungsi pengendali acara.

form.addEventListener('submit', function(event) {
  event.preventDefault();
  // 在这里进行表单验证
});

3. Logik pengesahan borang
   Logik pengesahan borang boleh direka bentuk mengikut keperluan khusus termasuk medan yang diperlukan, sekatan panjang, padanan format, dsb. Kami boleh melaksanakan pengesahan ini menggunakan sifat bentuk dan kaedah yang disediakan oleh JavaScript.

• Pengesahan medan yang diperlukan
  Untuk memastikan input pengguna tidak kosong, kami boleh menggunakan atribut nilai untuk pengesahan. Dengan menentukan sama ada nilai kotak input ialah rentetan kosong, anda boleh menentukan sama ada pengguna telah memasukkan kandungan.

const input = document.querySelector('#username');
if (input.value === '') {
  // 输入为空
}

• Pengesahan had panjang
  Untuk kotak teks yang perlu mengehadkan panjang input, kami boleh menggunakan atribut panjang untuk mengesahkan sama ada kandungan input memenuhi keperluan .

const input = document.querySelector('#password');
if (input.value.length < 6) {
  // 输入长度不足
}

• Format Pengesahan Padanan
  Kadangkala, kami perlu memastikan kandungan yang dimasukkan oleh pengguna mematuhi format tertentu. Ungkapan biasa boleh digunakan untuk pengesahan pemadanan format.

const input = document.querySelector('#email');
const emailPattern = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;
if (!emailPattern.test(input.value)) {
  // 格式不匹配
}

4. Error prompt
   Apabila terdapat ralat dalam input pengguna, kami perlu memaparkan mesej ralat kepada pengguna. Kita boleh melakukan ini dengan memasukkan maklumat ralat ke dalam DOM.

const errorDiv = document.createElement('div');
errorDiv.textContent = '输入错误';
form.insertBefore(errorDiv, form.firstElementChild);

Kod sampel lengkap adalah seperti berikut:

const form = document.querySelector('#myForm');
const input = document.querySelector('#username');
const emailPattern = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;

form.addEventListener('submit', function(event) {
  event.preventDefault();

  //必填字段验证
  if (input.value === '') {
    showError('用户名不能为空');
    return;
  }

  //格式匹配验证
  if (!emailPattern.test(input.value)) {
    showError('请输入有效的电子邮件地址');
    return;
  }

  //表单验证通过，提交表单
  form.submit();
});

function showError(message) {
  const errorDiv = document.createElement('div');
  errorDiv.textContent = message;
  form.insertBefore(errorDiv, form.firstElementChild);
}

Di atas adalah contoh mudah menggunakan JavaScript untuk melaksanakan fungsi pengesahan borang web. Melalui langkah di atas, kami boleh menambah fungsi pengesahan pada borang web dengan mudah dan memberikan pengguna mesej ralat yang sepadan untuk meningkatkan pengalaman pengguna dan ketepatan data.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk melaksanakan pengesahan borang web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!