简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

JavaScript 양식 스크립트의 자세한 예

黄舟
풀어 주다： 2017-10-18 10:27:39
원래의
1426명이 탐색했습니다.

아래 편집기는 JavaScript 기반 양식 스크립트를 제공합니다(자세한 설명). 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 에디터를 따라가며 함께 살펴볼까요

양식이란 무엇인가요?

양식에는 세 가지 기본 구성 요소가 있습니다. 양식 태그: 여기에는 양식 데이터를 처리하는 데 사용되는 CGI 프로그램의 URL과 데이터를 서버에 제출하는 방법이 포함됩니다. 양식 필드: 텍스트 상자, 비밀번호 상자, 숨겨진 필드, 여러 줄 텍스트 상자, 확인란, 라디오 버튼 상자, 드롭다운 선택 상자, 파일 업로드 상자 등이 포함됩니다. 양식 버튼: 서버의 CGI 스크립트로 데이터를 전송하거나 입력을 취소하는 데 사용되는 제출 버튼, 재설정 버튼 및 일반 버튼이 포함됩니다. 양식 버튼은 정의된 처리 스크립트를 사용하여 다른 처리 작업을 제어하는 ​​데에도 사용할 수 있습니다.

JavaScript와 양식의 관계: JS의 초기 적용은 양식 처리에 대한 서버의 책임을 공유하고 서버에 대한 의존성을 깨는 것이었습니다. 웹과 JavaScript가 큰 발전을 이루었지만 웹 양식은 여전히 ​​​​사용되지 않습니다. 많은 공통 작업 기성 솔루션을 제공함으로써 많은 개발자는 양식을 검증할 때 JavaScript를 사용할 뿐만 아니라 일부 표준 양식 컨트롤의 기본 동작을 향상시킵니다.

1. 양식에 대한 기본 지식

HTML에서 양식은 HTMLFormElement 유형에 해당하므로 기본값이 동일합니다.

acceptCharset: 서버가 처리할 수 있는 문자 집합입니다. HTML의 accept-charset 기능과 동일합니다.

action: HTML의 action 속성에 해당하는 요청된 URL을 허용합니다.

elements: 양식(HTMLCollection)에 있는 모든 컨트롤의 컬렉션입니다.

enctype: 요청된 인코딩 유형입니다. HTML의 enctype 기능과 동일합니다.

length: 양식의 컨트롤 수입니다.

method: 전송할 HTTP 요청 유형으로, 일반적으로 HTML의 method 속성과 동일합니다.

name: 양식의 이름으로 HTML의 name 속성과 동일합니다.

reset(): 모든 양식 필드를 기본값으로 재설정합니다.

submit(): 양식을 제출합니다.

target: 요청을 보내고 응답을 받는 데 사용되는 창의 이름입니다. HTML의 target 속성에 해당합니다.

양식 양식 요소를 얻는 방법은 다음과 같습니다. var form=document.getElementById('form1'); //id로 양식 요소 가져오기

var firstForm=document.forms[0] //document.forms를 모두 가져오기 페이지의 양식 요소는 인덱스 값 '0'을 통해 첫 번째 양식 요소를 가져옵니다.

var form2=document.forms['form2']; //document.forms를 통해 페이지의 모든 양식 요소를 가져옵니다. 이름 값으로 양식 요소

양식 제출: 


　<!-- 通用提交按钮 -->
　<input type="submit" value="Submit Form">
　<!-- 自定义提交按钮 -->
　<button type="submit">Submit Form</button>
　<!-- 图像按钮 -->
　<input type="image" src="graphic.gif">
로그인 후 복사

이런 방식으로 양식을 제출하면 브라우저는 서버에 요청을 보내기 전에 제출 이벤트를 트리거합니다. 이를 통해 양식 데이터의 유효성을 검사하고 이를 사용하여 양식 제출을 허용할지 여부를 결정할 수 있습니다. 이 이벤트의 기본 동작을 차단하면 양식 제출이 취소될 수 있습니다.

JS에서는 프로그래밍 방식으로 submit() 메서드를 호출하여 양식을 제출할 수도 있습니다.


var form = document.getElementById("myForm");
//提交表单
　form.submit();
로그인 후 복사

양식 제출 차단(기본 이벤트 차단):


var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止默认事件
EventUtil.preventDefault(event);
});
로그인 후 복사

양식 데이터가 유효하지 않고 서버로 보낼 수 없는 경우 이 기술을 사용할 수 있습니다.

양식 재설정: 


<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>
로그인 후 복사

양식을 재설정하면 모든 양식 필드가 원래 값으로 복원됩니다. 값

JS 메서드를 사용하여 양식 재설정: 


var form = document.getElementById("myForm");
//重置表单
form.reset();
로그인 후 복사

양식 재설정을 방지하는 기본 작업: 


var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止表单重置
EventUtil.preventDefault(event);
});
로그인 후 복사

양식 필드:

각 양식에는 Element 속성이 있습니다. 이는 양식의 모든 속성입니다. 양식 요소(필드)의 컬렉션입니다. 이 컬렉션은 순서가 지정된 목록입니다. 각 양식 필드가 요소 컬렉션에 나타나는 순서는 태그에 나타나는 순서와 동일하며 위치 및 이름 값으로 액세스할 수 있습니다. 일반 양식 필드에는 입력, 선택 및 필드 세트가 포함됩니다. 양식에서 양식 필드를 얻으려면: 


var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;
로그인 후 복사

일반 양식 필드 속성:

disabled: 현재 필드가 비활성화되었는지 여부를 나타내는 부울 값입니다.

form: 현재 필드가 속한 양식에 대한 포인터입니다.

name: 현재 필드의 이름입니다.

readOnly: 현재 필드가 읽기 전용인지 여부를 나타내는 부울 값입니다.

tabIndex: 현재 필드의 전환(탭) 번호를 나타냅니다.

type: "checkbox", "radio" 등과 같은 현재 필드의 유형입니다.

value: 서버에 제출될 현재 필드의 값입니다. 파일 필드의 경우 이 속성은 읽기 전용이며 컴퓨터에 있는 파일의 경로를 포함합니다. 양식 속성을 제외한 다른 모든 속성은 JavaScript를 통해 동적으로 수정될 수 있습니다.

양식 필드 속성을 동적으로 수정할 수 있다는 것은 언제든지 어떤 방식으로든 양식을 동적으로 조작할 수 있다는 의미입니다.

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

为此，最常见的解决方案，就是在第一次单击后就禁用提交按钮。只要侦听 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;
　});
로그인 후 복사

除了

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

共有的表单字段方法 ：

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


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

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

例如：

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

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

change事件：对于和