신청폼에서 이메일을 입력받을때 인풋박스로 입력을 받고 있습니다.
<input type="text" name="wr_4" value="<?php echo $write['wr_4'] ?>" id="wr_4" required class="frm_input full_input">
문제는 그냥 허위로 작성하는 사례가 많아서요.
정확한 이메일을 입력받기 위해서 위의 코드에 아래 조건을 추가해서 입력받을 수 있도록 코드를 추가로 적용하고 싶습니다.
1. 입력시 "@"를 반드시 포함하도록
2. 입력할때 특수문자중에서는 "@"와"-"와"_" 만 입력가능하고, 그외에는 영문,숫자만 입력가능 하도록
이 조건을 이메일을 입력하는 부분에 적용하려면 어떻게 하면 될까요?
답변 6개 / 댓글 2개
input 폼 class에 email만 추가하면 submit 하기전에 검사하도록 되어있습니다
<input type="text" name="wr_4" value="<?php echo $write['wr_4'] ?>" id="wr_4" required class="frm_input full_input email">
아래 코드는 이메일 유효성을 검증 하는 부분입니다.
해당 코드를 활용하여 이메일 유혀성을 검증하시면되구요...실제 메일인지를 확인하기 위해서 이메일로 유효코드를 발신후에 유효코드와 일지 여부를 확인하시면 될꺼 같습니다.
<script>
function emailCheck(email_address){
email_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
if(!email_regex.test(email_address)){
return false;
}else{
return true;
}
}
function validateEmail() {
var emailInput = document.getElementById('email');
var resultDiv = document.getElementById('result');
var email = emailInput.value;
if (emailCheck(email)) {
resultDiv.innerHTML = '유효한 이메일 주소입니다.';
} else {
resultDiv.innerHTML = '유효하지 않은 이메일 주소입니다.';
}
}
</script>
<input type="text" id="email" maxlength="50" placeholder="[email protected]" >
<button onclick="validateEmail()">확인</button>
<div id="result"></div>
등록시 체크하는 부분이 있는데요
write_update.php부분에 get_email_address 함수 체크하는 부분을 참고하셔서 적용하셔도 됩니다.
아래의 코드를 한번 참고를 해보세요.
<input type="email" name="wr_4" value="<?php echo $write['wr_4'] ?>" id="wr_4" required class="frm_input full_input" pattern="[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$">
<script>
document.getElementById('wr_4').addEventListener('input', function(e) {
var email = e.target.value;
var regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (!regex.test(email)) {
e.target.setCustomValidity('올바른 이메일 형식이 아닙니다. "@"를 포함하고, 특수문자는 "@", "-", "_"만 사용 가능합니다.');
} else {
e.target.setCustomValidity('');
}
});
</script>
답변을 작성하려면 로그인이 필요합니다.