Introduction aux scripts de formulaire JavaScript-js tutoriel-php.cn

Lorsque les gens ont commencé à utiliser JavaScript, l'un des objectifs principaux était de vérifier le formulaire et de partager la responsabilité du serveur pour le traitement du formulaire. Bien que la plupart des méthodes de soumission populaires passent par ajax, comprendre le formulaire est également d'une grande aide pour la méthode ajax ! Par conséquent, ne sous-estimez pas la forme.

1. Connaissance de base des formulaires

En HTML, les formulaires sont représentés par des éléments, tandis qu'en JavaScript, les formulaires correspondent au type HTMLFormElement.
Propriétés et méthodes du tableau HTMLFormElement

属性或方法	作用说明
acceptCharset	服务器能够处理的字符集；等价于HTML中的accept-charset特性
action	接收请求的URL；等价于HTML中的action特性
elements	表单中所有控件的集合（HTMLCollection）
enctype	请求的编码类型；等价于HTML中的enctype特性
length	表单中控件的数量
method	要发送的HTTP请求类型；等价于HTML的method特性
name	表单的名称；等价于HTML的name特性
reset()	将所有表单域重置为默认值
submit()	提交表单
target	用于发送请求和接收响应的窗口名称；等价于HTML的target特性

1. Obtenez l'élément `<form>`

Méthode 1 : via getElementById (identifiant de l'élément)

var form = document.getElementById("form1");1

Copier après la connexion

Méthode 2 : obtenez tous les formulaires de la page via document.forms, et puis utilisez l'index numérique Obtenez le formulaire correspondant

var firstForm = document.forms[0];1

Copier après la connexion

Méthode 3 : Obtenez tous les formulaires de la page via document.forms, puis obtenez le formulaire correspondant par le nom du formulaire dans la page

var myForm = document.forms["form2"];1

Copier après la connexion

Méthode 4 : les premiers navigateurs. Chaque formulaire avec l'ensemble d'attributs de nom est enregistré dans l'objet document en tant qu'attribut [Il est recommandé de ne pas utiliser cette méthode]

var myFormf = document.form2;1

Copier après la connexion

2.

(1) Bouton Soumettre Soumettre
Méthode 1 : Bouton de soumission universel

<input type="submit" value="Submit Form" />1

Copier après la connexion

Méthode 2 : Bouton de soumission personnalisé

<button type="submit">Submit Form</button>1

Copier après la connexion

Méthode 3 : Bouton Image

<input type="image" value="submitBtn.gif" />1

Copier après la connexion

Tant que ce qui précède existe dans le formulaire, l'un des boutons répertoriés, puis lorsque le contrôle de formulaire correspondant a le focus, appuyez sur la touche Entrée pour soumettre le formulaire. (Sauf zone de texte, où un retour chariot provoquera un saut de ligne). Si le formulaire ne comporte pas de bouton de soumission, appuyer sur la touche Entrée ne soumettra pas le formulaire.
Notez qu'en soumettant le formulaire de la manière ci-dessus, le navigateur déclenchera l'événement de soumission avant d'envoyer la demande au serveur.
De cette façon, vous pouvez décider si le formulaire doit être validé. Le blocage du comportement par défaut de cet événement annulera la soumission du formulaire.

<form action="http://www.baidu.com">    <input id="name"/>    <button type="submit">Submit Form</button></form><script type="text/javascript">    var form = document.forms[0];
    form.addEventListener("submit", function(event) {        var name = document.getElementById("name");        if(name.value === "") {
            event.preventDefault();
        }
    });</script>12345678910111213

Copier après la connexion

Supplémentaire : Si vous souhaitez désactiver l'envoi du formulaire par retour chariot, veuillez vous référer à [HTML pour empêcher l'envoi du formulaire en saisissant le retour chariot]

(2 ) Soumettez en JavaScript

var form = document.forms[0];form.submit();12

Copier après la connexion

Notez que cette méthode ne déclenchera pas l'événement sumbit.

Le plus gros problème qui peut survenir lors de la soumission d'un formulaire est de soumettre le formulaire à plusieurs reprises.
Solution :
(1) Désactivez le bouton de soumission après avoir soumis le formulaire pour la première fois.
Pour être traité dans la fonction de gestionnaire d'événements "submit", il ne peut pas être traité dans la fonction de gestionnaire d'événements "click". Parce que certains navigateurs déclencheront l'événement submit avant que l'événement click ne soit déclenché !
(2) Utilisez le gestionnaire d'événements onsubmit pour annuler les méthodes de soumission de formulaire ultérieures.

Dans notre projet, les demandes sont soumises via ajax, et la méthode pour empêcher les soumissions répétées est à peu près similaire à celle ci-dessus (2). Interceptez ajax avant l'envoi, envoyez avec succès et terminez le processus d'envoi, et utilisez la machine d'état pour identifier l'état actuel (chargement, nouvelle soumission, succès, erreur). Lorsque l'utilisateur demande ajax, nous déterminons dans quel état se trouve actuellement :

Si l'état initial est nul, la requête est envoyée directement et l'état passe en chargement
S'il est en cours de chargement ou de nouvelle soumission, il affichera le message « La demande est en cours de traitement, ne répétez pas la demande » et changera le statut pour soumettre à nouveau
; S'il s'agit d'un succès ou d'une erreur, il affichera « Succès ou Échec », puis passera à l'état pour restaurer l'état initial.

3. Formulaire de réinitialisation

(1) Soumission du bouton de réinitialisation
Méthode 1 : Bouton de réinitialisation universel

<input type="reset" value="Reset Form" />1

Copier après la connexion

méthode 2 : Personnaliser le bouton de réinitialisation

<button type="reset">Reset Form</button>1

Copier après la connexion

Notez qu'en réinitialisant le formulaire de la manière ci-dessus, le navigateur déclenchera l'événement de réinitialisation. Le blocage du comportement par défaut de cet événement annulera la soumission de réinitialisation.

<form action="//m.sbmmt.com">    
<input id="name"/>    
<button type="submit">Submit Form</button>    
<button type="reset"> Reset Form</button>
</form>
<script type="text/javascript">   
 var form = document.forms[0];
    form.addEventListener("reset", function(event) {
        alert("我就不让你重置，咋地！");
        event.preventDefault();
    })</script>123456789101112

Copier après la connexion

(2) Réinitialiser en JavaScript

var form = document.forms[0];form.reset();12

Copier après la connexion

Notez que cette méthode ne déclenchera pas l'événement de réinitialisation.

4. Champs de formulaire

form.elements, obtient la collection de tous les contrôles du formulaire (HTMLCollection).
form.elements[n]; // Renvoie le n+1ème élément
form.elements["name"]; Renvoie NodeList

<form action=" 
<input id="name" name="name"/>
<input type="radio" name="color" value="red"/>Red
<input type="radio" name="color" value="green"/>Green
<input type="radio" name="color" value="blue"/>Blue
<button type="submit">Submit Form</button>
<button type="reset"> Reset Form</button>
</form>
<script type="text/javascript">var form = document.forms[0];
form.elements[1] === form.elements["color"][0];// value值为red的input标签</script>123456789101112

Copier après la connexion

avec la valeur de nom "name" (1) Attribut de champ de formulaire

属性	作用说明
disabled	布尔值，表示当前字段是否被禁用
form	指向当前字段所属表单的指针；只读
name	当前字段的名称
readOnly	布尔值，表示当前字段是否只读
tabIndex	表示当前字段的切换（tab）序号
type	当前字段的类型
value	当前字段被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机的路径

（2）表单字段方法

foucs()获取焦点，激活字段，使其可以响应键盘事件
blur()失去交单。

window.addEventListener("load", function() {
   document.forms[0].elements[0].focus();   // 让表单第一个元素获取焦点});123

Copier après la connexion

HTML5中表单字段新增了autofoucs属性。

<input type="text" autofoucs />1

Copier après la connexion

（3）表单字段事件

blur：当前字段失去焦点触发
change：对于和元素，在它们失去焦点且value值改变时触发；对于元素，在其选项改变时触发。
focus：当前字段获取焦点时触发

表单错误提示流程：利用focus事件修改文本框的背景颜色，以便清楚表明这个字段获取了焦点；利用blur事件恢复文本框的背景颜色；利用change事件在用户输入了非规定字符时提示错误。
在项目中的validate插件，只用到了blur和focus事件。因为某些浏览器中，blur事件会先于change事件；有些会恰好相反！

二、文本框脚本

HTML中，有两种方式表示文本框：单行文本框<input type="text">、多行文本框<textarea>。
（1）单行文本框
通过设置size特性，可以指定文本框中能够显示的字符数；通过设置value特性，可以指定文本框的初始值；通过设置maxlength特性，可以指定文本框可以接受的最大字符数。

<!-- 显示5个字符（input 元素的宽度），输入不能超过10个字符--><input type="text" value="初始值放到这里" size="5" maxlength="10"/>12

Copier après la connexion

（2）多行文本框
rows设置文本框行数，cols设置文本框列数。

<textarea cols="10" rows="5">初始值必须放在这里</textarea>1

Copier après la connexion

上述两种文本框，都会将用户输入的内容保存在value属性中！！！

1. 选择文本

（1）选择（select）事件
选择文本框中所有文本select()方法，对应的是一个select事件，同样存在触发时间的问题！

var input = document.getElementById("name");
input.addEventListener("focus", function(event) {    event.target.select();
});1234

Copier après la connexion

（2）取得选择的文本

var textarea = document.getElementById("content");textarea.addEventListener("select", function(event) {
if(typeof textarea.selectionStart === "number") {
console.log(textarea.value.substring(textarea.selectionStart, textarea.selectionEnd));}else if(document.selection){
// IE下
console.log(document.selection.createRange().text);}
});123456789

Copier après la connexion

（3）选择部分文本
setSelectionRange(要选择的第一个字符索引, 要选择的最后一个字符索引)
注意要看到被选择的文本，必须在调用setSelectionRange()之前或之后立即将焦点设置到文本框。

function selectText(textbox, startIndex, endIndex) {    if(textbox.setSelectionRange) {
        textbox.setSelectionRange(startIndex, endIndex);
    } else if(textbox.createTextRange) {        var range = textbox.createTextRange();        range.collapse(true);        range.moveStart("character", startIndex);        range.moveEnd("character", endIndex - startIndex);        range.select();
    }    // 将焦点设置到文本框上
    textbox.focus();
}12345678910111213

Copier après la connexion

部分选择文本的技术在实现高级文本输入框时很有用，例如提供自动完成建议的文本框就可以使用这种技术。

2. 过滤输入

（1）屏蔽字符
当需要用于输入的文本中不能包含某些字符时，例如手机号，只能输入字符！

var input = document.getElementById("name");
input.addEventListener("keypress", function(event) {    if(!/\d/.test(String.fromCharCode(event.charCode)) && event.charCode > 9 && !event.ctrlKey) {        // 只允许输入数字和退格特殊键以及Ctrl        event.preventDefault();
    }
});1234567

Copier après la connexion

更极端的方式，可以通过event.preventDefault();阻止其默认行为来禁止按键操作，即文本框只读！！
（2）操作剪贴板

var EventUtil = {
    getClipboardText: function(event){        var clipboardData =  (event.clipboardData || window.clipboardData); // 兼容IE        return clipboardData.getData("text");
    },
    setClipboardText: function(event, value){        if (event.clipboardData){            event.clipboardData.setData("text/plain", value);
        } else if (window.clipboardData){   // 兼容IE
            window.clipboardData.setData("text", value);
        }
    }
};var input = document.getElementById("name");
input.addEventListener("paste", function(event) {    var data = event.clipboardData.getData("text");
    console.log(data);    if(!/^\d*$/.test(data)) {        // 只允许粘贴数字        event.preventDefault();
    }
});1234567891011121314151617181920212223

Copier après la connexion

3. 自动切换焦点

用户填写完当前字段时，自动将焦点切换到下一个字段。

<p>Enter your telephone number:</p><input type="text" name="tel1" id="txtTel1" size="3" maxlength="3" ><span>-</span><input type="text" name="tel2" id="txtTel2" size="3" maxlength="3" ><span>-</span><input type="text" name="tel3" id="txtTel3" size="4" maxlength="4" >123456

Copier après la connexion

(function(){    
    function tabForward(event){            
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        if (target.value.length == target.maxLength){
            var form = target.form;        
            for (var i=0, len=form.elements.length; i < len; i++) {
                if (form.elements[i] == target) {
                    if (form.elements[i+1]){
                        form.elements[i+1].focus();
                    }
                    return;
                }
            }
        }
    }

    var textbox1 = document.getElementById("txtTel1"),
        textbox2 = document.getElementById("txtTel2"),
        textbox3 = document.getElementById("txtTel3");

    EventUtil.addHandler(textbox1, "keyup", tabForward);        
    EventUtil.addHandler(textbox2, "keyup", tabForward);        
    EventUtil.addHandler(textbox3, "keyup", tabForward);            })();12345678910111213141516171819202122232425

Copier après la connexion

4. HTML5约束验证API

（1）必填字段：<input type="text" required />
（2）特殊输入类型：<input type="email | url" />
（3）数值范围：<input type="number" min="0" max="10" />
（4）输入模式：<input type="text" pattern="\d+" />注意，模式的开头和末尾不用加^和$符合（默认已经有了）
（5）检测有效性：checkValidatity()
（6）禁用验证：

<!-- 整个表单不进行验证 --><form method="post" action="" novalidate ><!-- 某个按钮提交不必验证表单--><input type="submit" formnovalidate name="btnNoValidate" />1234

Copier après la connexion

三、选择框脚本

<select>和<option>元素创建
HTMLSelectElement的属性和方法：

属性和方法	作用说明
add(newOption, relOption)	向控件中插入新项，其位置在相关项relOption之前
multiple	是否支持多项选择
options	所有项集合
remove(index)	移除给定位置的选项
selectIndex	基于0的选中项的索引，如果没有选中项，则该值为-1；对于支持多选的控件，只保存选中项的第一项索引
size	选择框中可见的行数

HTMLOptionElement的属性和方法：

属性和方法	作用说明
index	当前选项在options集合中的索引
label	当前选项的标签
selected	当前选项是否被选中
text	选项的文本
value	选项的值

<form method="post" action="" id="myForm">
    <label for="selLocation">Where do you want to live?</label>
    <select name="location" id="selLocation">
        <option value="Sunnyvale, CA">Sunnyvale</option>
        <option value="Los Angeles, CA">Los Angeles</option>
        <option value="Mountain View, CA">Mountain View</option>
        <option value="">China</option>
        <option>Australia</option>
    </select>
</form>12345678910

Copier après la connexion

// 选择上述每个选项后，value值分别为：["Sunnyvale, CA", "Los Angeles, CA", "Mountain View, CA", "", "Australia"]
document.getElementById("selLocation").value; // 获得第一个选项的文本和值
document.forms[0].elements["location"].options[0].text;document.forms[0].elements["location"].options[0].value;12345

Copier après la connexion

（1）展示规则：有value属性且值不为空，则展示value属性的值；否则展示该项的文本值。
（2）value值规则：有value属性（不管是否为空），获得的都是对应value属性的值；否则为该项文本值。

1. 选择选项

function getSelectedOptions(selectbox){    var result = new Array();    var option = null;    for (var i=0, len=selectbox.options.length; i < len; i++){
        option = selectbox.options[i];        if (option.selected){
            result.push(option);
        }
    }    return result;            
}12345678910111213

Copier après la connexion

2. 添加选项

（1）DOM方式

var newOption = document.createElement("option");newOption.appendChild(document.createTextNode("Option text"));newOption.setAttribute("value", "Option value");selectbox.appendChild(newOption);1234

Copier après la connexion

（2）Option构造函数

var newOption = new Option("Option text", "Option value");
selectbox.appendChild(newOption);12

Copier après la connexion

（3）选择框的add方法（最佳方案）

var newOption = new Option("Option text", "Option value");
selectbox.add(newOption, undefined);    // 插入到最后12

Copier après la connexion

3. 移除选项

（1）DOM方

selectbox.removeChild(selectbox.options[0]);1

Copier après la connexion

（2）选择框的remov

selectbox.remove(0);1

Copier après la connexion

（3）将相应的选项设置为null（遗留机制）

selectbox.options[0] = null;1

Copier après la connexion

4. 移动和重排选项

DOM的appendChild方法（只能添加到最后），如果appendChild传入一个文档中已有的元素，那么就会先从该元素的父节点中移除它，再把它添加到指定的位置。

// 将第一个选择框中的第一个选项移动到第二个选择框中
var selectbox1 = document.getElementById("selLocations1"),
    selectbox2 = document.getElementById("selLocations2");selectbox2.appendChild(selectbox1.options[0]);  1234

Copier après la connexion

DOM的insertBefore方法

// 将选择框中的选项向后移动一个位置
var optionToMove = selectbox.options[selectbox.options.length - 1]; selectbox.insertBefore(optionToMove, selectbox.options[0]);123

Copier après la connexion