Artikel ini berbagi metode umum JavaScript untuk memproses acara formulir untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
1. Metode umum untuk mengakses objek formulir:
①: Menurut atribut ID dari elemen <sorm>;
var myForm = document.getElementById ("myFormId"); // myFormId adalah id elemen <sorm>;
②: Menurut atribut nama dari elemen <sorm>;
var myForm = document.forms ["myFormName"]; // myFormName adalah nama elemen <sorm>;
③: Gunakan nama formulir secara langsung untuk mengakses formulir:
var myForm = document.myformname; // myFormName adalah nama elemen <sorm>;
2. Acara umum untuk formulir:
① Acara OnSubmit: Acara ini akan dipicu saat mengklik tombol "Kirim" dan dapat mencegah pengiriman formulir. Contoh: Verifikasi formulir;
②Pengchange Event: Acara ini dipicu ketika pengguna mengubah konten dan kotak teks kehilangan fokus;
Contoh: Pengajuan formulir
Antarmuka meja depan:
Kode Antarmuka Foreground:
<Form name = "myForm" Action = "JavaScript: Alert ('Terdaftar dengan sukses!');" Method = "POST" ONSUBMIT = "return yanzheng ();"> <ablbody> <tr> <td> nama pengguna: </td> <td> <input name = "nama pengguna" id = "nama pengguna" adalah 6-Panjang "/Teks"/> </td> <td Align = "kiri"> <-style = "p fty": p ft00> </td> <td align = "left"> <-style = "p foel": p ft00 " #*foure #*foure #* #* #" #"p lanjang" </td> </tr> <tr> <td> Kata sandi: </td> <td> <input id = "password" onchange = "passwordleave ()" type = "password"/> </td> <td align = "LIFT"> <P style = "color: #ff0000"> <input id = "ffon00" LABER "" LEBIH "" LEBIH "" LEBIH BUTLEOR = "FF0000" <input id = "button2" type = "button" value = "medium" style = "latar belakang-warna: #ff0000"/> <input id = "button3" type = "Button" value = "kuat" style = "latar belakang: #ff0000"/<label id = "lavel"> </label> </p> </td> </tr> tR> </td> </label> </p> </td> </ttr> tR> </TD> </label> </p> </td> </tr> tR> TR> </TD> </TLEM id = "usia" type = "text"/> </td> <td> <input id = "usia" type = "text"/> </td> <td> <p style = "color: #ff0000">*</p> </td> </tr> <tr> <td> Jenis kelamin: </t td> </td = "jenis kelamin =" jenis kelamin = </td> </td = "jenis kelamin =" LAGE = "LAGE =" LAGE = "LAGI" LAGI = "LAGE" LAGI = " /> Jantan <input name = "sex" type = "Radio" value = "betina"/> wanita </td> <td> align = "left"> <p style = "color: #ff0000">*</p> </td> </tr> <tr> <td> "news" news = "news =" news = "news =" newbox = "news" news = "news =" newbox = "newbox =" newbox = "news =" name="content" value="Entertainment" />Entertainment<input type="checkbox" name="content" value="Education" />Entertainment</td> <td align="left"> <p style="color: #FF0000">*</p> </td> </tr> <tr> <td> Education: </td> <td> <select name="edu_level"> <option value="1">Elementary School</option> <option value="2">Senior School</option> <option value="3">University</option> <option value="4">University</option> </select> </td> <td align="left"> <p style="color: #FF0000">*</p> </td> </tr> <tr> <td> Hobbies: </td> <td> <select name="like" size="6" multiple="multiple" > <option value="1">Basketball</option> <option value="2">Football</option> <option value="3">Volleyball</option> <option value="4">Running</option> <option value="5">Hilling</option> <option value="6">Fitness</option> </select> </td> <td Align = "Left"> <p style = "color: #ff0000">*</p> </td> </tr> <tr> <td> <input id = "button4" type = "tombol" ontClick = "checkInfo ()" value = "view"/> </td> <td> <input type = "value =" value " <td> <input type = "kirim" name = "tijiao" value = "register"/> </td> <td> <input type = "reset" name = "reset" value = "reset"/> </td> </tr> </tbody> </able> </formrom>JS Script:
<script type = "text/javascript"> function yanzheng () {var b; var a = document.getElementById ("nama pengguna"); // Dapatkan nilai nama pengguna var p = document.geteLementById ("kata sandi"); // Dapatkan nilai kata sandi var usia = myForm.age.value; // Dapatkan nilai usia jika (a.value.length <5 || a.value.length> 10) {alert ("Nama pengguna yang Anda masukkan adalah format yang salah!"); mengembalikan false; } lain if (p.value.length <5) {alert ("Panjang kata sandi kurang dari 5!"); mengembalikan false; } lain if (! checkage (usia)) {return false; } else {return true; }} pemeriksaan fungsi (a) {// periksa usia var ch, usia; untuk (var i = 0; i <a.length; i ++) {ch = a.charat (i); if (ch <"0" || ch> "9") {alert ("Harap masukkan nomor dalam opsi usia!"); mengembalikan false; }} usia = parseInt (a); if (usia <10 || usia> 100) {alert ("Usia tidak benar!"); mengembalikan false; } return true; } function checkInfo () {// tunjukkan semua informasi var username = myForm.username.value; // Dapatkan nama pengguna var kata sandi = myForm.password.value; // Dapatkan kata sandi var usia = myForm.age.value; // Dapatkan usia var sex = myform.sex; // Dapatkan jenis kelamin var osex = ""; // atur opsi untuk mendapatkan gender var content = myForm.content; // Dapatkan konten var ocontent = ""; // atur opsi untuk mendapatkan konten var eduleave = myForm.edu_level; // Dapatkan pendidikan var oedu = ""; // Tetapkan opsi untuk mendapatkan pendidikan var intersent = myForm., seperti; // Dapatkan bentuk hobi var like = ""; // Tetapkan variabel untuk mendapatkan opsi hobi untuk (var i = 0; i <sex.length; i ++) {// gender if (sex [i] .Checked) {osex = sex [i] .value; }} untuk (var i = 0; i <content.length; i ++) {// content if (content [i] .checked) {ocontent += content [i] .value +""; }} untuk (var i = 0; i <eduleave.length; i ++) {// educational if (eduleave.selectedIndex> = 0) {oedu = eduleave.options [eduleave.selectedIndex] .text; }} untuk (var i = 0; i <intersent.length; i ++) {// hobi if (intersent.options [i] .poelected) {oloike += intersent.options [i] .text +""; }} peringatan ("Nama pengguna Anda adalah:" + nama pengguna + "/n Kata sandi adalah:" + kata sandi + "/n usia adalah:" + usia + "/n jenis kelamin adalah:" + ocontent + "/n pendidikan adalah:" + oedu + "/n hobi adalah:" + ojo); } function passwordleave () {var passwordleavel = myForm.password.value; if (passwordleavel.length == "") {document.geteLementById ("button1"). style.display = "none"; document.getElementById ("button2"). style.display = "none"; document.geteLementById ("button3"). style.display = "none"; } else {if (passwordleavel.length <= "5") {document.geteLementById ("button1"). style.display = ""; document.geteLementById ("button2"). style.display = "none"; document.geteLementById ("button3"). style.display = "none"; } else if (passwordleavel.length <= "10") {document.geteLementById ("button1"). style.display = ""; document.geteLementById ("button2"). style.display = ""; document.geteLementById ("button3"). style.display = "none"; } else {document.geteLementById ("button1"). style.display = ""; document.geteLementById ("button2"). style.display = ""; document.geteLementById ("tombol3"). style.display = ""; }}} fungsi startbody () {document.geteLementById ("button1"). style.display = "none"; document.geteLementById ("button2"). style.display = "none"; document.geteLementById ("button3"). style.display = "none"; } </script>Kasus ini hanya beberapa praktik umum dan tidak melibatkan teknologi apa pun, tetapi hanya untuk kenyamanan menggunakan waktu berikutnya.
Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.