JavaScript 양식 스크립트 소개-JS 튜토리얼-php.cn

사람들이 처음 JavaScript를 사용하기 시작했을 때 주요 목적 중 하나는 양식 유효성 검사와 양식 처리에 대한 서버의 책임을 공유하는 것이었습니다. 많이 사용되는 제출 방법은 대부분 ajax를 통해 이루어지지만, 양식을 이해하는 것도 ajax 방법에 큰 도움이 됩니다! 그러므로 형태를 과소평가하지 마십시오.

1. 양식에 대한 기본 지식

HTML에서는 양식이 요소로 표현되지만 JavaScript에서는 양식이 HTMLFormElement 유형에 해당합니다.
테이블 HTMLFormElement 속성 및 메서드

속성 또는 메서드	함수 설명
acceptCharset	서버가 처리할 수 있는 문자 집합. HTML의 accept-charset 기능과 동일
action	요청된 URL을 수신합니다. HTML의 작업 속성과 동일합니다.
elements	양식의 모든 컨트롤 모음(HTMLCollection)
enctype	요청의 인코딩 유형입니다. HTML enctype 속성
length	양식의 컨트롤 수
method	전송할 HTTP 요청 유형. HTML 메서드 속성
name	이름 양식; HTML의 이름 속성과 동일
reset()	모든 양식 필드를 기본값으로 재설정
submit()	양식 제출
target	에 사용된 창의 이름 요청을 보내고 응답을 받습니다. HTML의 대상 기능과 동일합니다

1. `<form>` 요소를 가져옵니다

방법 1: GetElementById(요소 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 속성을 사용하여 각 양식을 문서의 속성으로 저장합니다. object [이 방법은 사용하지 않는 것이 좋습니다]

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 키를 눌러도 양식이 제출되지 않습니다.
Note 위의 방법으로 양식을 제출하면 브라우저는 서버에 요청을 보내기 전에 submit 이벤트를 트리거합니다.
이렇게 하면 양식의 유효성을 검사해야 하는지 결정할 수 있습니다. 이 이벤트의 기본 동작을 차단하면 양식 제출이 취소됩니다.

<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

로그인 후 복사

Additional: 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.elements["name"] //이름 값이 "name"인 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

로그인 후 복사

( 1 ) 양식 필드 속성

Attribute	함수 설명
disabled	현재 필드가 비활성화되었는지 여부를 나타내는 부울 값
form	현재 필드가 포함된 양식에 대한 포인터 읽기 전용
name	현재 필드의 이름
readOnly	현재 필드가 읽기 전용인지 여부를 나타내는 부울 값
tabIndex	전환(탭)을 나타냅니다. 현재 필드의 시퀀스 번호
type	현재 필드의 유형
value	서버에 제출되는 현재 필드의 값입니다. 파일 필드의 경우 이 속성은 읽기 전용이며 컴퓨터

에 있는 파일 경로를 포함합니다.

（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

로그인 후 복사