지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > JavaScript 양식 처리 구현 코드_기본 지식

JavaScript 양식 처리 구현 코드_기본 지식

WBOY
풀어 주다： 2016-05-16 16:04:26
원래의
1244명이 탐색했습니다.

원폼 소개

HTML에서 양식은

요소로 표현되는 반면, JavaScript에서는 양식이 HTMLFormElement 유형에 해당합니다.

//HTMLFormElement는 HTMLElement를 상속하므로 HTML 요소의 기본 속성과 자체 속성 및 메서드도 갖습니다.
HTMLFormElement 속성 및 메서드
속성 또는 메소드 설명
acceptCharset 서버가 처리할 수 있는 문자 집합입니다.
작업이 요청된 URL을 수락합니다.
요소 양식의 모든 컨트롤 모음입니다.
enctype이 요청한 인코딩 유형;
length 양식의 컨트롤 수
method 전송할 HTTP 요청 유형으로, 일반적으로 'get' 또는 'post'입니다.
name 양식 이름
요청을 보내고 응답을 받는 데 사용되는 대상 창 이름;
Reset()은 모든 양식을 재설정합니다.
submit() 양식을 제출합니다.

1. 양식 개체를 가져옵니다.
document.getElementById('myForm'); // ID를 사용하여 document.getElementsByTagName('form')[0]; // 양식 요소 컬렉션의 첫 번째 요소를 가져오는 데 사용합니다.
document.forms[0]; // 요소를 가져오려면 양식의 숫자 첨자를 사용하세요.
document.forms['myForm']; // 요소를 가져오려면 양식의 이름 첨자를 사용하세요.

2. 양식 제출

(1) 이벤트 개체를 통해 제출 이벤트의 기본 동작은 데이터가 있는 지정된 페이지로 이동하는 것입니다.

코드 복사 코드는 다음과 같습니다.
​ addEvent(fm,'submit',function(evt){
          preDef(evt);
});


(2) submit() 메소드를 사용하여 제출 이벤트의 트리거를 사용자 정의할 수 있습니다. 즉, 제출하기 위해 제출 버튼을 클릭할 필요가 없습니다.

코드 복사 코드는 다음과 같습니다. If(e.ctrlKey && e.keyCode ==13){
>                                                                    }
// 추신: 양식에 name="submit" 또는 id="submit"과 같은 이름을 사용하지 마십시오. 이렇게 하면 submit() 메서드와 충돌하여 제출이 실패하게 됩니다.



(3) 반복 제출
// 데이터가 서버에 제출되면 오랜 시간 동안 지연이 발생하고 반영되지 않아 사용자가 계속 제출을 클릭하게 됩니다.
// 결과적으로 동일한 요청이 반복적으로 제출되거나 오류가 발생하거나 동일한 정보가 여러 개 데이터베이스에 기록됩니다.




코드 복사

코드는 다음과 같습니다. AddEvent(fm,'submit',function(evt){ // 서버 지연 시뮬레이션;           preDef(evt);
Settimeout(함수() {//처리가 서버에 제출되기 3초 전;
                                fm.submit();
},3000);
});

// 중복 제출 계획 해결
// 첫 번째 유형: 제출 직후 클릭 버튼을 비활성화합니다.
Document.getElementById('sub').disabled = true; // 버튼을 비활성화합니다. // 두 번째 유형: 제출 후 후속 양식 제출 작업을 취소합니다.

var flag = false; var flag = false; //리스닝 변수 설정;
if(flag == true)return; // 존재하는 경우 종료 이벤트를 반환합니다.
flag = true; // 그렇지 않은 경우에는 처음으로 수신 변수의 값을 변경해야 합니다.




3. 양식 재설정

4.表单字段

// 表单处理中,建议使用HTMLDOM,它有自己的elements属性,该属性是表单中所有元素的集合;
    fm.elements[0];                                     // 获取第一个表单字段元素;
    fm.elements['user'];                                // 获取name值是user的表单字段元素;
    fm.elements.length;                                 // 获取所有表单字段的数量;

(1).共有的表单字段属性
// 除了

元素之外,所有表单字段都拥有相同的一组属性;
属性                     说明
disabled         布尔值,表示当前字段是否被禁用;
form             指向当前字段所属表单的指针,只读;
name             当前字段的名称;
readOnly         布尔值,表示当前字段是否只读;
tabIndex         表示当前字段的切换;
type             当前字段的类型;
value            当前字段的值;
    fm.elements[0].value;                               // 获取和设置value;
    fm.elements[0].disabled = true;                     // 禁用当前字段;

(2).共有的表单字段方法
方法                     说明
focus()          将焦点定位到表单字段里;
blur()           从元素中将焦点移走;

(3).共有的表单字段事件


事件名                     说明
blur             当字段失去焦点时触发;
change           对于和