Rumah > hujung hadapan web > tutorial js > Kod pelaksanaan pemprosesan borang JavaScript_pengetahuan asas

Kod pelaksanaan pemprosesan borang JavaScript_pengetahuan asas

WBOY
Lepaskan: 2016-05-16 16:04:26
asal
1250 orang telah melayarinya

Pengenalan satu bentuk

Dalam HTML, borang diwakili oleh elemen

manakala dalam JavaScript, borang sepadan dengan jenis HTMLFormElement;

//HTMLFormElement mewarisi HTMLElement; oleh itu ia mempunyai atribut lalai elemen HTML, dan juga mempunyai atribut dan kaedahnya sendiri;
Sifat dan kaedah HTMLFormElement
Perihalan atribut atau kaedah
acceptCharset Set aksara yang boleh dikendalikan oleh pelayan;
tindakan menerima URL yang diminta;
elemen Himpunan semua kawalan dalam bentuk;
enctype meminta jenis pengekodan;
panjang Bilangan kawalan dalam bentuk;
kaedah Jenis permintaan HTTP untuk dihantar, biasanya 'dapat' atau 'siarkan';
nama Nama borang;
nama tetingkap sasaran yang digunakan untuk menghantar permintaan dan menerima respons;
reset() menetapkan semula semua borang;
submit() hantar borang;

1 Dapatkan borang
document.getElementById('myForm'); // Gunakan ID untuk mendapatkan elemen document.getElementsByTagName('form')[0]; // Gunakan untuk mendapatkan elemen pertama dalam koleksi elemen borang;
document.forms[0]; // Gunakan subskrip berangka borang untuk mendapatkan elemen;
document.forms['myForm']; // Gunakan subskrip nama borang untuk mendapatkan elemen;

2. Hantar borang

(1). Melalui objek acara, anda boleh menghalang gelagat lalai penyerahan

Salin kod Kod adalah seperti berikut: addEvent(fm,'submit',function(evt){
          preDef(evt);
});



(2). Kami boleh menggunakan kaedah hantar() untuk menyesuaikan pencetus acara hantar;

Salin kod

Kod adalah seperti berikut: Jika(e.ctrlKey && e.keyCode ==13){                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           }
// PS: Cuba elakkan menggunakan nama seperti name="submit" atau id="submit" dalam borang Ini akan bercanggah dengan kaedah submit() dan mengakibatkan kegagalan untuk menyerahkan



(3). Ulang penyerahan
// Apabila sekeping data diserahkan kepada pelayan, akan berlaku kelewatan dan tiada refleksi untuk masa yang lama, menyebabkan pengguna terus mengklik hantar,
// Akibatnya, banyak permintaan yang sama dihantar berulang kali, atau ralat disebabkan atau beberapa bahagian maklumat yang sama ditulis ke pangkalan data



Salin kod

Kod adalah seperti berikut: AddEvent(fm,'submit',function(evt){ // Simulasi kelewatan pelayan;           preDef(evt); Masa tamat (fungsi () {// 3 saat sebelum pemprosesan diserahkan kepada pelayan;
                                 fm.submit();
},3000);
});

// Selesaikan rancangan penyerahan pendua
// Jenis pertama: lumpuhkan butang klik sejurus selepas penyerahan; Document.getElementById('sub').disabled = true; // Lumpuhkan butang;
// Jenis kedua: Selepas penyerahan, batalkan operasi penyerahan borang berikutnya; var flag = false; var flag = false; //Tetapkan pembolehubah mendengar;
if(flag == true)return; // Jika wujud, kembalikan acara keluar; flag = true; // Jika tidak, ia mestilah kali pertama, tukar nilai pembolehubah mendengar;




3. Tetapkan semula borang



4.表单字段

// 表单处理中,建议使用HTMLDOM,它有自己的elements属性,该属性是表单中所有元素的集合;
    fm.elements[0];                                     // 获取第一个表单字段元素;
    fm.elements['user'];                                // 获取name值是user的表单字段元素;
    fm.elements.length;                                 // 获取所有表单字段的数量;

(1).共有的表单字段属性
// 除了

元素之外,所有表单字段都拥有相同的一组属性;
属性                     说明
disabled         布尔值,表示当前字段是否被禁用;
form             指向当前字段所属表单的指针,只读;
name             当前字段的名称;
readOnly         布尔值,表示当前字段是否只读;
tabIndex         表示当前字段的切换;
type             当前字段的类型;
value            当前字段的值;
    fm.elements[0].value;                               // 获取和设置value;
    fm.elements[0].disabled = true;                     // 禁用当前字段;

(2).共有的表单字段方法
方法                     说明
focus()          将焦点定位到表单字段里;
blur()           从元素中将焦点移走;

(3).共有的表单字段事件


事件名                     说明
blur             当字段失去焦点时触发;
change           对于