Bagaimana untuk menyediakan borang dalam javascript-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menyediakan borang dalam javascript

PHPz

Lepaskan： 2023-04-21 09:18:31

asal

750 orang telah melayarinya

Dengan perkembangan teknologi Web dan aplikasinya dalam lebih banyak senario, borang telah menjadi salah satu elemen yang sangat diperlukan dalam pembangunan Web. Borang boleh digunakan untuk mengumpul data yang dimasukkan pengguna, yang sangat penting untuk banyak aplikasi web. Apabila pengguna mengisi borang dan menyerahkannya, kami perlu memproses data ini. Dalam kes ini, JavaScript memainkan peranan penting.

Artikel ini akan membincangkan cara menyediakan borang menggunakan JavaScript dan meneroka beberapa petua dan teknik biasa.

Borang Asas

Mula-mula, mari kita lihat borang HTML asas. Berikut ialah kod HTML bagi borang ringkas:

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required><br><br>

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required><br><br>

  <label for="age">年龄：</label>
  <input type="number" id="age" name="age" required><br><br>

  <input type="submit" value="提交">
</form>

Salin selepas log masuk

Borang di atas mengandungi tiga medan yang diperlukan: nama, alamat e-mel dan umur, serta butang hantar. Jika salah satu item tidak diisi, kotak gesaan akan muncul untuk menggesa pengguna mengisi item tersebut.

Menetapkan nilai borang

Menetapkan nilai borang menggunakan JavaScript boleh dilakukan dengan cara berikut:

document.getElementById("name").value = "John";

Salin selepas log masuk

Kod di atas menetapkan "John" sebagai nilai lalai untuk nama tersebut. Kita juga boleh menetapkan nilai dalam bentuk secara dinamik dengan cara ini:

document.getElementById("name").value = userName;

Salin selepas log masuk

Dalam kes ini "Nama pengguna" ialah pembolehubah yang nilainya boleh diperolehi dengan cara lain, seperti daripada pangkalan data atau pemerolehan perkhidmatan Web lain .

Dapatkan nilai borang

Anda boleh mendapatkan nilai borang melalui kod berikut:

let nameValue = document.getElementById("name").value;
let emailValue = document.getElementById("email").value;
let ageValue = document.getElementById("age").value;

Salin selepas log masuk

Di sini nilai dalam borang disimpan dalam tiga pembolehubah. Ini boleh digunakan dengan mudah semasa memproses data borang.

Pengesahan Borang

Pengesahan borang ialah bahagian penting yang membantu melindungi tapak web daripada serangan daripada pengguna berniat jahat dan memastikan kesahihan dan ketepatan data borang.

Berikut ialah beberapa teknik pengesahan borang biasa:

Pengesahan medan yang diperlukan: Dalam borang, medan yang diperlukan selalunya memerlukan pengesahan mandatori. Contohnya, dalam contoh di atas, nama, e-mel dan umur semua diperlukan. Untuk memastikan bahawa pengguna telah mengisi medan yang diperlukan, kami menggunakan atribut "diperlukan". Jika pengguna menyerahkan borang tanpa melengkapkan medan yang diperlukan, penyemak imbas akan memberi amaran kepada pengguna sebelum penyerahan gagal.
Pengesahan E-mel: Dalam banyak aplikasi web, kami perlu memastikan bahawa alamat e-mel yang dimasukkan oleh pengguna adalah sah. Untuk mengesahkan alamat e-mel kami menggunakan ungkapan biasa.

Berikut ialah contoh JavaScript yang mengesahkan alamat e-mel:

function validateEmail(email) {
  var re = /\S+@\S+\.\S+/;
  return re.test(email);
}

Salin selepas log masuk

Dalam kod di atas, kami telah menggunakan ungkapan biasa mudah yang mengesahkan alamat e-mel Format alamat e-mel.

Penyerahan borang: Apabila borang menerima permintaan penyerahan, kami perlu mengesahkan data borang. Ini boleh dicapai dengan menetapkan acara "serahkan" pada butang hantar.

Berikut ialah kod JavaScript yang mengaitkan fungsi pengesahan dengan acara penyerahan borang:

document.getElementById("myForm").onsubmit = function() {
  if (!validateForm()) {
    return false;
  }
};

Salin selepas log masuk

Kod di atas akan mengesahkan borang sebelum ia diserahkan. Jika pengesahan gagal, borang tidak akan diserahkan.

Mesej gesaan: Apabila data dalam borang tidak sah, biasanya kami perlu memaparkan mesej gesaan kepada pengguna tentang masalah tersebut. Ini boleh dicapai dengan menambahkan elemen pada borang, contohnya dengan menambahkan elemen

Berikut ialah kod JavaScript yang akan memaparkan mesej ralat kepada pengguna apabila pengesahan borang gagal:

function showErrorMessage(field, message) {
  var errorText = document.createElement("div");
  errorText.className = "error";
  errorText.innerHTML = message;
  field.parentNode.insertBefore(errorText, field.nextSibling);
}

Salin selepas log masuk

Dalam kod di atas, kami telah menggunakan JavaScript untuk mencipta A

elemen bernama "errorText" dan masukkannya sebelum elemen adik-beradik seterusnya medan borang yang gagal.

Ringkasan

Dalam artikel ini, kami memperkenalkan secara ringkas fungsi JavaScript dalam menyediakan borang, mencadangkan beberapa teknik pengesahan borang biasa dan cara untuk mengesahkan dan menerbitkan gesaan sebelum maklumat penyerahan borang. Dengan menggunakan teknologi ini, kami boleh melaksanakan interaksi dan pemprosesan data yang lebih maju dalam aplikasi borang kami, memastikan keselamatan dan kesahihan data input pengguna.

Atas ialah kandungan terperinci Bagaimana untuk menyediakan borang dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!