[jquery] 브라우저 수준에서 유효성 검사하기

오늘은

회원가입을 위한 폼을 만들어보았움

요러케 만들엇다!!!!!

유효성 오랜만이야 하이!

저 메세지 저거 오른쪽정렬 할껄 그랬나..?

부트스트랩 쓰고 엄청 이뻐졌어요... 만세!

소스는 아래처럼 작성해보았다

인풋에서 포커스 아웃되었을때 검사하도록 했는데..

조잡시러운것 같기도 하고

나중에 좋은방법 있으면 그걸로 또 해야지!

우선 html은 간단하게!

<input type="text" class="form-control" id="inputId" placeholder="아이디를 입력하세요.">

<div id="msgId" class="error"></div>

<input type="password" class="form-control" id="inputPw" placeholder="비밀번호를 입력하세요.">

<div id="msgPw" class="error"></div>

<input type="password" class="form-control" id="inputPwr" placeholder="비밀번호를 다시 입력하세요.">

<div id="msgPwr" class="error"></div>

<input type="text" class="form-control" id="inputName" placeholder="별명을 입력하세요.">

<div id="msgName" class="error"></div>

<input type="text" class="form-control" id="inputEmail" placeholder="메일을 입력하세요.">

<span class="input-group-addon">@</span>

<select class="form-control" id="selectEmail">

<option value="">선택하세요</option>

<option value="gmail.com">gmail.com</option>

<option value="nate.com">nate.com</option>

<option value="naver.com">naver.com</option>

<option value="hanmail.com">hanmail.com</option>

<option value="etc">직접입력</option>

</select>

<div id="msgEmail" class="error"></div>

사실 이메일 직접입력은 아직 안했움..

몰라! 유효성 바로 할거야!

//아이디

$("#inputId").focusout(function(){

var val = $(this).val(),

regex = /^[A-Za-z0-9+]{4,16}$/;

if(val=="" | val==null)

//필수 입력

else if(!regex.test(val))

//4자리 이상 16자리 이하, 영문과 숫자만 가능

else

//확인

});

//비밀번호

$("#inputPw").focusout(function(){

var val = $(this).val(),

regex = /^(?=.*[a-zA-Z])((?=.*\d)|(?=.*\W)).{4,16}$/;

if(val=="" | val==null)

//필수 입력

else if(!regex.test(val))

//4자리 이상 16자리 이하, 숫자 혹은 특수 문자를 반드시 포함

else

//확인

});

//비밀번호 확인

$("#inputPwr").focusout(function(){

var orgin = $("#inputPw").val()

val = $(this).val();

if(val=="" | val==null)

//필수 입력

else if(val!=orgin)

//비밀번호 불일치

else

//확인

});

//별명

$("#inputName").focusout(function(){

var val = $(this).val(),

regex = /^[0-9a-zA-Z가-힣]{1,12}$/;

if(val=="" | val==null)

//필수 입력

else if(!regex.test(val))

//최대 12자

else

//확인

});

//이메일 @ 앞

$("#inputEmail").focusout(function(){

var val = $(this).val(),

regex = /^([\w-]+(?:\.[\w-]+)*)$/;

if(val=="" | val==null)

//필수 입력

else if(!regex.test(val))

//형식에 안맞음

else

//확인

});

//이메일 @ 뒤

$("#selectEmail").focusout(function(){

var val = $(this).val(),

regex = /^((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/;

if(val=="" | val==null)

//필수 입력

else if(!regex.test(val))

//형식에 안맞음

else

//확인

});

이메일 합칠걸 그랬나싶다

이쁘게 한다고 쪼개놨는데 귀찮은거 같기도 하고.. 

그래! 이쁘면 됐어!

오늘은 여기까지!