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>
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";
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;
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;
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:
Berikut ialah contoh JavaScript yang mengesahkan alamat e-mel:
function validateEmail(email) { var re = /\S+@\S+\.\S+/; return re.test(email); }
Dalam kod di atas, kami telah menggunakan ungkapan biasa mudah yang mengesahkan alamat e-mel Format alamat e-mel.
Berikut ialah kod JavaScript yang mengaitkan fungsi pengesahan dengan acara penyerahan borang:
document.getElementById("myForm").onsubmit = function() { if (!validateForm()) { return false; } };
Kod di atas akan mengesahkan borang sebelum ia diserahkan. Jika pengesahan gagal, borang tidak akan diserahkan.
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); }
Dalam kod di atas, kami telah menggunakan JavaScript untuk mencipta A
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!