함수를 만들어 dom요소에 이벤트를 인라인 방식으로 연결
각 하수에서는 이름, 연락처, 메일을 확인하고 정규표현식에 테그트하여 결과값을 보=여준다.
function submitCheck(mform){
let reg1 = /^[가-힣]{2,5}$/;
let reg2 = /^(010|070|02|031|011)\d{3,4}\d{4}$/;
let reg3 = /^\w{5,12}@[a-z]{2,10}[\.][a-z]{2,3}[\.]?[a-z]{0,2}$/;
let name = mform.name;
let tel = mform.tel;
let mail = mform.mail;
if(!(reg1.test(name.value))){
alert('이름을 확인하세요');
name.value = '';
name.focus();
return false;
}else if(!(reg2.test(tel.value))){
alert('연락처를 확인하세요');
tel.value = '';
tel.focus();
return false;
}else if(!(reg3.test(mail.value))){
alert('메일을 확인하세요');
mail.value = '';
mail.focus();
return false;
}else{
alert('성공~!');
}
}
function resetCheck(mform){
let result = confirm('회원가입을 취소하시겠습니까?');
if(result){
return false;
}
}
form 요소에 onsubmit, onreset이벤트를 함수에 연결시킨다.
<body onload="document.f1.name.focus();">
<form action="https://www.naver.com" method="post"
name ="f1" onsubmit="return submitCheck(this);" onreset="return resetCheck(this)">
<fieldset>
<legend>회원가입</legend>
<p>
<label for="name">이 름 : </label>
<input type="text" name="name" id="name">
</p>
<p>
<label for="tel">연락처 : </label>
<input type="text" name="tel" id="tel">
</p>
<p>
<label for="mail">이메일 : </label>
<input type="text" name="mail" id="mail">
</p>
<input type="submit" value="회원가입">
<input type="reset" value="취소">
</fieldset>
</form>
</body>
'COA Lab's JS' 카테고리의 다른 글
| 자바스크립트 22 - for 정리 (0) | 2021.03.05 |
|---|---|
| 자바스크립트 21 - class 관련 정리 (0) | 2021.03.05 |
| 자바스크립트 19 - 데이터유효성검사 2 (0) | 2021.03.03 |
| 자바스크립트 18 - 데이터유효성검사 1 (0) | 2021.03.03 |
| 자바스크립트 17 - 객체 추가 (0) | 2021.03.03 |
