[자바스크립트] Form 유효성검사 원칙

웹개발을 하다보면 form을 정말로 많이 사용하게 됩니다.

폼을 사용하면서 잘못된 습관이 있습니다.

바로 유효성 검사를 할때 a 태그로 유효성 검사로 폼을 넘기는 부분이죠.

폼의 유효성 검사는 여러가지가 있지만....

저같은 경우엔 엔터키로 값이 넘어가는걸 우선시 하게 됩니다.

이때 a 태그로 유효성 검사를 하게 된다면 엔터키가 먹지를 않아요.

그래서 저는 주로 사용하는 방법이 바로 form 에 있는 onsubmit 을 사용하는부분입니다.

아래 예제를 한번 살펴보세요~~

HTML부분

JavaScript 부분

function loginSuccess(){
	var loginSuccess = $(".loginMessage");
	if (!document.login.id.value){ loginSuccess.text(""); loginSuccess.text("please Input your ID"); document.login.id.focus(); return; }
	if (!document.login.pass.value){ loginSuccess.text(""); loginSuccess.text("please Input your Password"); document.login.pass.focus(); return; }
	document.login.submit();
}

이렇게 사용하면 엔터키도 먹고 유효성 검사도 할수 있고 좋습니다.

위에 코드는 입력을 하지 않았을때 

alert로 나타나는것이 아이디와 비밀번호를 입력하는 화면상에 

오류라고 알려주는 코드로 약간 변형을 했습니다.

물론 더 좋은 방법이 많이 있겠지만... 저같은경우엔 이런식으로 많이 활용합니다.