input을 나누어 받아 전화번호 유효성검사를 처리
//실제 코드는 아래와 같진않다. 간단하게 이해를 돕기위해 타이핑한것.
//오타가 있을수있으니 복붙한 후 확인하고 처리해야함.
//concat()함수는 문자를 연결해준다.
<script>
$(function(){
//전송버튼클릭이벤트
$(".submit").on("click", function(){
let phone = $("input[name='tel1']").val().concat('-', $("input[name='tel2']").val()).concat('-', $("input[name='tel3']").val());
let email = $("input[name='tel1']").val();
if(checkEmail(email)==false){
alert("이메일을 다시 입력해주세요.")
return false;
}else{
$.ajax({
url : "/controllermappingurl",
type: "post",
data: {phone:phone, email:email}
success: function(data){
alert("성공");
}, error: function(){
alert("실패");
}
});
}
});
});
//입력받은 value를 0 ~ 9 값이 아니면 return false;
//연락처유효성검사
//input태그에 keydown이벤트가 발생하면 실행되는 function이다. key코드를 이용하여 처리했다.
//keycode : 키보드에 키를 개별로 코드를 준것. js내에 약속된 코드이다.
//input에 아래 지정된 키보드 키를 제외하고 입력하면 alert창을 띄우고 value를 없애주었다.
//공통 js파일 안에 function을 넣어 필요한 페이지마다 호출하는게 코드재사용성에좋을듯.
function checkNumber(event) {
if(event.key >= 0 && event.key <= 9
|| event.keyCode == 8 //backspace
|| event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 39//방향키 →, ←
|| event.keyCode == 46 //delete키
|| event.keyCode == 16 || event.keyCode == 17 || event.keyCode == 9) {
return true;
}else {
alert("숫자만 입력하세요");
$(this).value = "";
return false;
}
}
function checkEmail(email){
let exptext = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
if(exptext.test(email)==true){
return true;
}else{
//이메일 형식이 알파벳+숫자@알파벳+숫자.알파벳+숫자 형식이 아닐경우
alert("이메일형식이 올바르지 않습니다.");
$(this).value = "";
return false;
}
}
</script>
<body>
<form >
<table>
<tr>
<td>
//checkNumber(event) 함수에서 유효성 검사를 진행한다.
<input type="text" classname="t_inp" name="tel1" onkeydown="return checkNumber(event);">
<input type="text" classname="t_inp" name="tel2" onkeydown="return checkNumber(event);">
<input type="text" classname="t_inp" name="tel3" onkeydown="return checkNumber(event);">
</td>
<td>
<input type="text" classname="t_inp" name="email">
</td>
<td>
<input type="text" classname="t_inp" class="submit" value="전송">
</td>
</tr>
</table>
</form>
</body>'JavaScript' 카테고리의 다른 글
| name의 여러개의 Value를 수정 (0) | 2022.07.12 |
|---|---|
| seleced 유지, 삼항연산자사용, thymeleaf js 데이터사용 (0) | 2022.07.12 |
| row값 계산 (0) | 2022.07.12 |
| selectBox 값 제어하기 (0) | 2022.07.12 |
| list에서 동적으로 파일추가 (0) | 2022.07.12 |