jquery validation 라이브러리를 사용하여 form에 입력하는 값에 대한 유효성을 검사할 수 있습니다. 사용방법도 매우 간단하여 rules과
messages만 설정해 주면 쉽게 적용이 가능 합니다
maven을 이용하지 않거나 추가적인 정보는 제작 사이트에 방문해서
자료를 찾을 수 있습니다.
https://jqueryvalidation.org/
pom.xml에 다음을 추가 합니다.
|
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery-validation</artifactId>
<version>1.19.0</version>
</dependency>
|
추가한 라이브러리는 Maven > Update Project를
해서 반영해 줍니다.
jQuery Validation의 구조는 매우 간단 합니다.
|
$("form selector").validate({
rules : {
... },
messages
: { ... }
});
|
이렇게 rules, messages로 구성이 되어 있습니다.
rules를 이용하는 방법은 input
항목의 name 속성 값을 이용하여 설정을 진행하며
|
- 설정하려는 값이 하나이면
name속성 값 :
"required"
- 설정하려는 값이 두개 이상 이면
name속성
값 : {
required : true,
digits : true
}
이렇게 {}로
묶어서 설정 합니다.
|
messages를 이용하는 방법도 input
항목의 name 속성 값을 이용하여 설정을 진행하며
|
- 설정하려는 값이 하나이면
name속성 값 : :
"필수 입력 항목 입니다."
- 설정하려는 값이 두개 이상 이면
name속성
값 : {
required
: "필수 입력 항목 입니다.",
digits
: "숫자만 입력하세요."
}
이렇게 {}로
묶어서 설정 합니다.
|
이렇게 rules, messages가 쌍으로 구성되어 있습니다. 물론 messages를
작성하지 않아도 되는데 단점은 유효성 검사 결과를 영문으로 보여주기 때문에 영문으로 하지 않으려면 한글로 messages를
입력 해줘야 합니다.
적용 예)
|
$("form selector").validate({
rules : {
name속성
값 : "required",
name속성
값 : {
required : true,
digits : true
}
},
messages :
{
name속성
값 : "필수 입력 항목 입니다.",
name속성
값 : {
required : "필수 입력 항목 입니다.",
digits : "숫자만 입력하세요."
}
}
});
|
이제 실제 적용을 하려는 화면 쪽 설정을 알아 봅니다.
먼저 maven에 추가한 라이브러리를 추가해 주고
|
<script src="/webjars/jquery/3.4.1/jquery.min.js"></script>
<script src="/webjars/jquery-validation/1.19.0/jquery.validate.min.js"></script>
|
form에 대한 유효성 설정을 진행 합니다.
|
<script type="text/javascript">
//<![CDATA[
$(function() {
$("#memberadd").validate({
rules
: {
username
: "required",
name
: "required",
password
: "required",
repassword
: "required",
mobile1
: {required : true, digits:true},
mobile2
: {required : true, digits:true},
mobile3
: {required : true, digits:true},
tel1
: {digits:true},
tel2
: {digits:true},
tel3
: {digits:true},
email
: {email:true}
},
messages
: {
username
: "아이디는 필수 입력항목 입니다.",
name
: "이름은 필수 입력항목 입니다.",
password
: "비밀번호는 필수 입력항목 입니다.",
repassword
: "비밀번호 확인은 필수 입력항목 입니다.",
mobile1
: "핸드폰은 필수 입력항목 입니다.",
mobile2
: "핸드폰은 필수 입력항목 입니다.",
mobile3
: "핸드폰은 필수 입력항목 입니다.",
email
: "email 형식이 부정확 합니다."
}
});
});
//]]>
</script>
|
|
<body>
<form action="/user/membercreate"
id="memberadd" method="POST">
<table border="0">
<tr>
<td width="150" align="right">아이디 </td>
<td><input type="text" id="username"
name="username" ></td>
</tr>
<tr>
<td align="right">이름 </td>
<td><input type="text" id="name"
name="name" ></td>
</tr>
<tr>
<td align="right">비밀번호 </td>
<td><input type="password" id="password" name="password" ></td>
</tr>
<tr>
<td align="right">비밀번호 확인 </td>
<td><input type="password" id="repassword" name="repassword" ></td>
</tr>
<tr>
<td align="right">소속회사 </td>
<td><input type="text" class="form-control
col-md-6" id="company"
name="company" maxlength="30"></td>
</tr>
<tr>
<td align="right">핸드폰 </td>
<td>
<input type="text" class="form-control
col-md-2" id="mobile1"
name="mobile1" size="3">-
<input type="text" class="form-control
col-md-2" id="mobile2"
name="mobile2" size="4">-
<input type="text" class="form-control
col-md-2" id="mobile3"
name="mobile3" size="4">
</td>
</tr>
<tr>
<td align="right">email </td>
<td><input type="text" id="email"
name="email"></td>
</tr>
<tr>
<td></td>
<td align="right"><input type="submit"
id="submit" value="등록"></td>
</tr>
</table>
</form>
</body>
|
Controller는 화면을 불러오도록 메소드를 하나 만들어 주고
|
@RequestMapping("/membercreate")
public String
getMember( Model model){
return "/user/MemberCreate";
}
|
프로젝트를 실행을 해서 페이지를 불러옵니다.
이제 등록 버튼을 클릭해서 무슨 일이 벌어지는지 확인해 봅니다.
이렇게 입력 항목에 대한 검사를 해줍니다.
개인적인 생각은 그냥 사용 하기에는 쓸만 하겠지만 요청사항이 까다로운 사이트에서는 사용이 힘들지 않을까 생각
됩니다.
- copy coding -
