회원가입과 수정할 때 형식을 맞춰줘야하니까 유효성검사를 자바스크립트로 추가했다.
빈칸인 값은 .length==0으로 하지않고 input태그에 required값을 입력해 필수 입력항목으로 만들어줬다.
유효성 검사는 정규식 표현으로 진행했다.
<script>
function checkForm(){
//validation 체크
var regExpId = /^[a-z|A-z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
var regExpPassword = /^[0-9]+$/;
var regExpName = /^[가-힣]+$/;
var regExpEmail = /^[a-zA-Z0-9]([-_\.]?[0-9a-zA-Z])*@[a-zA-Z0-9]([-_\.]?[a-zA-Z0-9])*\.[a-zA-Z]{2,3}$/i;
var regExpPhone = /^\d{3}-\d{3,4}-\d{4}$/;
var id = document.newMember.id.value;
var password = document.newMember.password.value;
var name = document.newMember.name.value;
var email = document.newMember.mail1.value+"@"+document.newMember.mail2.value;
var phone = document.newMember.phone1.value+document.newMember.phone2.value
+document.newMember.phone3.value;
if(!regExpId.test(id)){
alert("아이디는 문자로 시작해주세요.");
document.newMember.id.focus();
id="";
return false;
}
if(!regExpPassword.test(password)){
alert("비밀번호는 숫자만 입력해주세요.");
document.newMember.password.focus();
password="";
return false;
}
if(!regExpName.test(name)){
alert("이름은 한글만 입력해주세요.");
document.newMember.name.focus();
name="";
return false;
}
if(!regExpEmail.test(email)){
alert("이메일 입력을 확인해주세요.");
document.newMember.email1.focus();
document.newMember.email1.value="";
document.newMember.email2.value="";
return false;
}
if(!regExpPhone.test(phone)){
alert("연락처 입력을 확인해주세요.");
document.newMember.phone2.focus();
document.newMember.phone2.value="";
document.newMember.phone3.value="";
return false;
}
return true;
}
</script>
처음에 js 페이지를 따로 만들어주고 script type="text/javascript" src="./resources/js/validation.js" 태그를 입력했는데
검사를 하지않고 다음페이지로 넘어가서 안되는 이유를 찾지못하고 일단 jsp페이지에 직접 값을 넣어줬다.
결과는 👍🏻