JavaScript フォームスクリプトの概要-jsチュートリアル-php.cn

人々が最初に JavaScript を使い始めたとき、主な目的の 1 つはフォームの検証と、フォームの処理に対するサーバーの責任を共有することでした。一般的な送信方法のほとんどは ajax を使用しますが、フォームを理解することは ajax 方法にも非常に役立ちます。したがって、フォームを過小評価しないでください。

1. フォームの基礎知識

HTMLではフォームは要素で表現されますが、JavaScriptではフォームはHTMLFormElement型に相当します。
表 HTMLFormElement の属性とメソッド

action リクエストされた URL を受け取ります。HTML の action 属性に相当します。 elements フォーム内のすべてのコントロールのコレクション (HTMLCollection) enctype リクエストのエンコードタイプ。 HTML enctype 属性lengthフォーム内のコントロールの数method HTML メソッド属性に相当する HTTP リクエストのタイプnameの名前フォーム; HTML の name 属性に相当しますreset()すべてのフォームフィールドをデフォルト値にリセットしますsubmit()フォームを送信しますターゲットリクエストの送信とレスポンスの受信 HTML のターゲット機能と同等

1. `<form>` 要素を取得します

方法 1: GetElementById(element id)

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

ログイン後にコピー

方法 2: document.forms を通じてページ上のすべてのフォームを取得し、数値インデックスを通じて対応するフォームを取得します

var firstForm = document.forms[0];1

ログイン後にコピー

方法 3 : document.forms を通じて取得します。ページ上のすべてのフォームを取得し、ページ内のフォームの名前によって対応するフォームを取得します

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

ログイン後にコピー

方法 4: 初期のブラウザーは、ドキュメント内の属性として name 属性を使用して各フォームを保存します。オブジェクト [このメソッドは使用しないことをお勧めします]

var myFormf = document.form2;1

ログイン後にコピー

2 . 送信フォーム

(1) 送信ボタン送信
方法 1: ユニバーサル送信ボタン

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

ログイン後にコピー

方法 2: カスタム送信ボタン

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

ログイン後にコピー

方法 3: 画像ボタン

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

ログイン後にコピー

上記のいずれかがフォームボタンに存在する限り、対応するフォームコントロールにフォーカスがあるときに Enter キーを押してフォームを送信できます。 (テキストエリアを除く。テキストエリアにキャリッジリターンを入力すると改行されます)。フォームに送信ボタンがない場合、Enter キーを押してもフォームは送信されません。
注、上記の方法でフォームを送信すると、ブラウザーはリクエストをサーバーに送信する前に送信イベントをトリガーします。
このようにして、フォームを検証する必要があるかどうかを決定できます。このイベントのデフォルトの動作をブロックすると、フォームの送信がキャンセルされます。

<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

ログイン後にコピー

追加: Enterによるフォーム送信を無効にしたい場合は、[Enterによるフォーム送信を防ぐHTML]を参照してください

(2) JavaScriptで送信

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

ログイン後にコピー

注意、このメソッドはトリガーされませんサミットイベント。

フォームの送信中に発生する可能性のある最大の問題は、フォームを繰り返し送信することです。
解決策:
(1) フォームを初めて送信した後、送信ボタンを無効にします。
「クリック」イベントハンドラー関数ではなく、「送信」イベントハンドラー関数で処理する必要があります。ブラウザによっては、クリックイベントがトリガーされる前に送信イベントがトリガーされるためです。
(2) onsubmit イベントハンドラーを使用して、後続のフォーム送信メソッドをキャンセルします。

今回のプロジェクトではajax経由でリクエストを送信していますが、重複送信を防ぐ方法は上記(2)とほぼ同様です。送信、送信成功、送信プロセスの完了前に ajax をインターセプトし、ステートマシンを使用して現在の状態 (読み込み、再送信、成功、エラー) を識別します。ユーザーが ajax をリクエストすると、現在どの状態にあるかを判断します。

初期状態が null の場合、リクエストは直接送信され、状態はロード中に切り替わります。
ロード中または再送信中の場合、「リクエストは処理中です」というプロンプトが表示され、リクエストを繰り返さないでください。ステータスを再送信に切り替えます。
成功またはエラーの場合は、「成功または失敗」というプロンプトが表示され、ステータスが復元に変更されます。初期状態。

3. フォームをリセット

(1) リセットボタン送信
方法 1: ユニバーサルリセットボタン

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

ログイン後にコピー

方法 2: カスタムリセットボタン

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

ログイン後にコピー

注、上記の方法でフォームをリセットすると、ブラウザがリセットイベントをトリガーします。このイベントのデフォルトの動作をブロックすると、リセットの送信がキャンセルされます。

<form action="http://www.php.cn">    
<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

ログイン後にコピー

(2) JavaScript でのリセット

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

ログイン後にコピー

注、このメソッドはリセットイベントをトリガーしません。

4. フォームフィールド

form.elements、フォーム内のすべてのコントロールのコレクション (HTMLCollection) を取得します。
form.elements[n]; // n+1 番目の要素を返す

<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

ログイン後にコピー

属性またはメソッド	関数の説明
acceptCharset	サーバーが処理できる文字セット。HTML の accept-charset 機能に相当します。

属性disabledformnamereadOnlytabIndex typevalue

（2）表单字段方法

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

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

ログイン後にコピー

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

<input type="text" autofoucs />1

ログイン後にコピー

（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

ログイン後にコピー

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

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

ログイン後にコピー

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

1. 选择文本

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

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

ログイン後にコピー

（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

ログイン後にコピー

（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

ログイン後にコピー

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

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

ログイン後にコピー

更极端的方式，可以通过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

ログイン後にコピー

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

ログイン後にコピー

(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

ログイン後にコピー

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

ログイン後にコピー

三、选择框脚本

<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

ログイン後にコピー

// 选择上述每个选项后，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

ログイン後にコピー

（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

ログイン後にコピー

2. 添加选项

（1）DOM方式

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

ログイン後にコピー

（2）Option构造函数

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

ログイン後にコピー

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

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

ログイン後にコピー

3. 移除选项

（1）DOM方

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

ログイン後にコピー

（2）选择框的remov

selectbox.remove(0);1

ログイン後にコピー

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

selectbox.options[0] = null;1

ログイン後にコピー

4. 移动和重排选项

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

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

ログイン後にコピー

DOM的insertBefore方法

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

ログイン後にコピー