> 웹 프론트엔드 > JS 튜토리얼 > Javascript 양식 및 Null이 아닌 유효성 검사_javascript 기술

Javascript 양식 및 Null이 아닌 유효성 검사_javascript 기술

WBOY
풀어 주다: 2016-05-16 15:10:15
원래의
1401명이 탐색했습니다.

추천 도서: Javascript 양식 유효성 검사 길이

Javascript 양식 확인-제출 양식

Javascript 양식 유효성 검사 - 정규식 첫 소개

Javascript 양식 유효성 검사 - 정규식 공개

JavaScript를 사용하면 데이터가 서버로 전송되기 전에 HTML 양식의 입력 데이터를 확인할 수 있습니다.

양식을 제출하기 전에 데이터의 합법성을 확인하세요

양식의 데이터를 확인하려면 getElementById()를 사용하여 웹페이지의 모든 요소에 액세스할 수 있습니다

각 양식 필드에는 양식 데이터를 확인하는 모든 함수에 전달할 수 있는 양식 개체가 있습니다

<input id="zipcode" name="zipcode" type="text" size="5" onclick="showIt(this.form)"/>
function showIt(thisForm)
{
alert(thisForm["zipcode"].value);
//通过form对象的name属性,取得元素的值
}
로그인 후 복사

name 속성이나 getElementById() 메소드를 사용하여 요소를 얻을 수 있습니다

양식 데이터를 확인하는 시점은 처리할 올바른 사용자 입력 이벤트를 선택하는 것에 따라 달라집니다.

즉, 사용자가 데이터를 입력하는 즉시 데이터가 검증됩니다.

사용자가 데이터를 입력하는 순서는 다음과 같습니다.

입력 필드 선택

필드에 데이터를 입력하세요

이 지역을 떠나 다음 목표로 이동

다음 대상 도메인 선택

필드에 데이터를 입력하세요

이 과정에서 일련의 이벤트가 발생하며, 이러한 이벤트를 통해 데이터를 확인할 수 있는 기회를 찾을 수 있습니다

1) 입력 필드를 선택하면 onfocus 이벤트(focus)가 발생합니다

2) 입력 필드를 벗어날 때 – onblur 이벤트 발생(포커스 이탈)

3) 도메인을 떠나 입력 내용이 변경되면 onchange 이벤트가 발생합니다

onblur 이벤트가 실행될 때 데이터를 확인하는 것이 가장 올바른 선택입니다

확인의 첫 번째 단계: 도메인이 비어 있지 않은지 확인

<input id="phone" name="phone" type="text" size="12" onblur="validateNonEmpty(this)"/>
로그인 후 복사

onblur 이벤트에 응답하려면 verifyNonEmpty를 호출하세요

양식 개체는 this 키워드를 사용하여 함수에 전달됩니다

다음은 인증 기능입니다

function validateNonEmpty(inputField)
{
if(inputField.value.length==0)
{
alert("Please enter a value.");
return false;
} 
return true;
}
로그인 후 복사

웹 양식을 제출할 때 사용자가 입력한 데이터를 확인해야 합니다.

양식의 데이터를 확인하려면 getElementById()를 사용하여 웹페이지의 모든 요소에 액세스할 수 있습니다

위 내용은 Javascript 형식과 검증-비어있지 않은 검증에 대한 완전한 설명입니다. 모든 분들께 도움이 되길 바랍니다!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿