communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Code de mise en œuvre du traitement des formulaires JavaScript_connaissances de base

Code de mise en œuvre du traitement des formulaires JavaScript_connaissances de base

WBOY
Libérer： 2016-05-16 16:04:26
original
1244 Les gens l'ont consulté

Introduction à un seul formulaire

En HTML, le formulaire est représenté par l'élément

, tandis qu'en JavaScript, le formulaire correspond au type HTMLFormElement ;

//HTMLFormElement hérite de HTMLElement ; il possède donc les attributs par défaut des éléments HTML, et possède également ses propres attributs et méthodes ;
Propriétés et méthodes HTMLFormElement
Description de l'attribut ou de la méthode
acceptCharset Le jeu de caractères que le serveur peut gérer ;
l'action accepte l'URL demandée ;
elements Une collection de tous les contrôles du formulaire ;
enctype type d'encodage demandé ;
length Le nombre de contrôles dans le formulaire ;
méthode Le type de requête HTTP à envoyer, généralement « get » ou « post » ;
name Le nom du formulaire ;
nom de la fenêtre cible utilisé pour envoyer des requêtes et recevoir des réponses ;
reset() réinitialise tous les formulaires ;
submit() soumettre le formulaire ;

1. Obtenez l'objet form
document.getElementById('myForm'); // Utiliser l'ID pour obtenir l'élément document.getElementsByTagName('form')[0]; // Utilisé pour obtenir le premier élément de la collection d'éléments de formulaire ;
document.forms[0]; // Utiliser l'indice numérique des formulaires pour obtenir l'élément ;
document.forms['myForm']; // Utiliser l'indice du nom du formulaire pour obtenir l'élément ;

2. Soumettez le formulaire

(1). Grâce à l'objet événement, vous pouvez empêcher le comportement par défaut de la soumission. Le comportement par défaut de l'événement de soumission est de passer à la page spécifiée avec les données ;

Copier le code Le code est le suivant :
​ addEvent(fm,'submit',function(evt){
          preDef(evt);
});


(2). Nous pouvons utiliser la méthode submit() pour personnaliser le déclenchement de l'événement de soumission ; c'est-à-dire qu'il n'est pas nécessaire de cliquer sur le bouton de soumission pour soumettre ;

Copier le code Le code est le suivant :
Si(e.ctrlKey && e.keyCode ==13){
                                                                                                                                                                          >
// PS : essayez d'éviter d'utiliser des noms tels que name="submit" ou id="submit" dans le formulaire. Cela entrerait en conflit avec la méthode submit() et entraînerait l'échec de la soumission
.


(3). Répéter la soumission
// Lorsqu'une donnée est soumise au serveur, il y aura un retard et aucune réflexion pendant une longue période, obligeant l'utilisateur à continuer de cliquer sur Soumettre, // En conséquence, de nombreuses demandes identiques sont soumises à plusieurs reprises, ou des erreurs sont provoquées ou plusieurs éléments des mêmes informations sont écrits dans la base de données

 ;


Copier le code Le code est le suivant : AddEvent(fm,'submit',function(evt){ // Simuler le délai du serveur ;
          preDef(evt);
Settimeout (fonction () {// 3 secondes avant le traitement soumis au serveur ;
                                 fm.submit();
},3000);
});

// Résoudre le plan de soumission en double
// Le premier type : désactiver le bouton de clic immédiatement après la soumission Document.getElementById('sub').disabled = true; // Désactive le bouton ;

// Deuxième type : Après la soumission, annulez les opérations de soumission de formulaire ultérieures
var flag = false; var flag = false; //Définir une variable d'écoute ;
if(flag == true)return; // S'il existe, renvoie l'événement de sortie ;
flag = true; // Sinon, ce doit être la première fois, changez la valeur de la variable d'écoute



3. Réinitialiser le formulaire

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           对于和