communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Exemple détaillé de script de formulaire JavaScript

Exemple détaillé de script de formulaire JavaScript

黄舟
Libérer： 2017-10-18 10:27:39
original
1451 Les gens l'ont consulté

L'éditeur suivant vous apportera un script de formulaire basé sur JavaScript (explication détaillée). L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un coup d'oeil

Qu'est-ce qu'un formulaire ?

Un formulaire comporte trois composants de base : Balise de formulaire : elle contient l'URL du programme CGI utilisé pour traiter les données du formulaire et la méthode de soumission des données au serveur. Champs de formulaire : incluent les zones de texte, les zones de mot de passe, les champs masqués, les zones de texte multilignes, les cases à cocher, les zones de boutons radio, les zones de sélection déroulantes, les zones de téléchargement de fichiers, etc. Boutons de formulaire : incluent les boutons de soumission, les boutons de réinitialisation et les boutons généraux ; utilisés pour transférer des données vers des scripts CGI sur le serveur ou pour annuler la saisie, les boutons de formulaire peuvent également être utilisés pour contrôler d'autres tâches de traitement avec des scripts de traitement définis.

La relation entre JavaScript et les formulaires : L'application initiale de JS était de partager la responsabilité du serveur pour le traitement des formulaires et de rompre la dépendance vis-à-vis du serveur. Bien que le Web et JavaScript aient fait de grands progrès, les formulaires Web continuent. n'ont pas été utilisés pour De nombreux développeurs proposent des solutions prêtes à l'emploi pour de nombreuses tâches courantes, et de nombreux développeurs utilisent JavaScript non seulement lors de la validation des formulaires, mais également pour améliorer le comportement par défaut de certains contrôles de formulaire standard.

1. Connaissance de base des formulaires

En HTML, un formulaire est constitué de la balise form. En JavaScript, le formulaire correspond au HTMLFormElement. type, type HTMLFormElement Héritant du type HTMLElement, il a les mêmes attributs par défaut que les autres éléments Element, et il a également ses propres attributs et méthodes :

acceptCharset : le jeu de caractères que le serveur peut gérer équivalent à accepter ; -charset dans la caractéristique HTML.

action : accepte l'URL demandée équivalente à l'attribut action en HTML.

éléments : une collection de tous les contrôles du formulaire (HTMLCollection).

enctype : Le type d'encodage demandé ; équivalent à la fonctionnalité enctype en HTML.

longueur : Le nombre de contrôles dans le formulaire.

method : Le type de requête HTTP à envoyer, généralement "get" ou "post" équivalent à l'attribut méthode du HTML.

name : Le nom du formulaire ; équivalent à l'attribut name du HTML.

reset() : Réinitialise tous les champs du formulaire à leurs valeurs par défaut.

submit() : Soumettez le formulaire.

target : Le nom de la fenêtre utilisée pour envoyer des requêtes et recevoir des réponses équivalent à l'attribut target du HTML.

Les méthodes pour obtenir les éléments du formulaire sont : var form=document.getElementById('form1'); //Obtenir les éléments du formulaire par identifiant

var firstForm=document.forms[0] ; //Récupère tous les éléments de formulaire de la page via document.forms et récupère le premier élément de formulaire via la valeur d'index '0'

var form2=document.forms['form2'] //Passer le document; .forms pour obtenir tous les éléments de formulaire de la page, obtenez l'élément de formulaire spécifique via la valeur du nom

Soumettez le formulaire : 


　<!-- 通用提交按钮 -->
　<input type="submit" value="Submit Form">
　<!-- 自定义提交按钮 -->
　<button type="submit">Submit Form</button>
　<!-- 图像按钮 -->
　<input type="image" src="graphic.gif">
Copier après la connexion

Dans de cette façon Lors de la soumission d'un formulaire, le navigateur déclenche l'événement submit avant d'envoyer la demande au serveur. Cela nous donne la possibilité de valider les données du formulaire et de les utiliser pour décider d'autoriser ou non la soumission du formulaire. Bloquer le comportement par défaut de cet événement peut annuler la soumission du formulaire

En JS, nous pouvons également appeler par programme la méthode submit() pour soumettre le formulaire : 


var form = document.getElementById("myForm");
//提交表单
　form.submit();
Copier après la connexion

Bloquer la soumission du formulaire (événement par défaut de blocage) :


var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止默认事件
EventUtil.preventDefault(event);
});
Copier après la connexion

Cette technique peut être utilisée lorsque les données du formulaire sont invalides et ne peuvent pas être envoyées au serveur

Réinitialiser le formulaire : 


<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>
Copier après la connexion

Lors de la réinitialisation du formulaire, tous les champs du formulaire seront restaurés à leurs valeurs initiales lorsque la page venait d'être chargée

Utilisez la méthode JS pour réinitialiser le formulaire : 


var form = document.getElementById("myForm");
//重置表单
form.reset();
Copier après la connexion

Empêchez l'action par défaut de réinitialisation du formulaire : 


var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止表单重置
EventUtil.preventDefault(event);
});
Copier après la connexion

Champs du formulaire :

Chaque formulaire a une propriété Element, qui est une collection de tous les éléments de formulaire (champs) du formulaire. Cette collection est une liste ordonnée. L'ordre dans lequel chaque champ de formulaire apparaît dans la collection d'éléments est le même que l'ordre dans lequel il apparaît dans la balise. Ils sont accessibles par position et valeur de nom. Les champs de formulaire courants incluent la saisie, la sélection et le jeu de champs. Pour obtenir les champs de formulaire dans le formulaire : 


var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;
Copier après la connexion

Attributs courants des champs de formulaire :

désactivés. : Valeur booléenne indiquant si le champ courant est désactivé.

formulaire : Pointeur vers le formulaire auquel appartient le champ actuel ;

name : Le nom du champ actuel.

readOnly : valeur booléenne, indiquant si le champ actuel est en lecture seule.

tabIndex : Indique le numéro de séquence de commutation (tabulation) du champ actuel.

type : Le type du champ actuel, tel que "checkbox", "radio", etc.

value : La valeur du champ actuel qui sera soumis au serveur. Pour les champs de fichiers, cet attribut est en lecture seule et contient le chemin du fichier sur l'ordinateur

À l'exception de l'attribut form, tout autre attribut peut être modifié dynamiquement via JavaScript.

Être capable de modifier dynamiquement les attributs des champs du formulaire signifie que nous pouvons exploiter dynamiquement le formulaire à tout moment et de n'importe quelle manière.

用户可能会重复单击表单的提交按钮。在涉及信用卡消费时，这就是个问题：因为会导致费用翻番。

为此，最常见的解决方案，就是在第一次单击后就禁用提交按钮。只要侦听 submit 事件，并在该事件发生时禁用提交按钮即可 ：


//避免多次提交表单
　EventUtil.addHandler(form, "submit", function(event){
　event = EventUtil.getEvent(event);
　var target = EventUtil.getTarget(event);
//取得提交按钮
　var btn = target.elements["submit-btn"];
//禁用它
　btn.disabled = true;
　});
Copier après la connexion

除了

之外，所有表单字段都有 type 属性。对于元素，这个值等于 HTML 特性 type 的值。对于其他元素，这个 type 属性的值如下表所列。

共有的表单字段方法 ：

每个表单字段都有两个方法： focus()和 blur()。使用 focus()方法，可以将用户的注意力吸引到页面中的某个部位。例如，在页面加载完毕后，将焦点转移到表单中的第一个字段。


EventUtil.addHandler(window, "load", function(event){ /*给window绑定一个监听事件，放页面加载完成，光标自动对准在指定的表单字段*/
document.forms[0].elements[0].focus();
});
Copier après la connexion

HTML5 为表单字段新增了一个 autofocus 属性。在支持这个属性的浏览器中，只要设置这个属性，不用 JavaScript 就能自动把焦点移动到相应字段。

例如：

与 focus()方法相对的是 blur()方法，它的作用是从元素中移走焦点:

document.forms[0].elements[0].blur();

change事件：对于和