이번에는 이메일을 체크하기 위한 부분입니다.
이메일,URL등이 문자열의 형식이 정확한지 여부를 확인하기 위해서 정규표현식을 사용합니다.
정규표현식에 대한 자세한 설명은 나중에 다루도록 하겠습니다.
이번에는 활용방법만 소개해 드립니다.
This part is for checking email.
Regular expressions are used to check whether the format of email, URL, etc. strings is correct.
A detailed explanation of regular expressions will be covered later.
This time, we will only introduce how to use it.
하늘색으로 강조된 부분은 새롭게 추가된 코드 입니다.
보라색으로 강조된 부분은 부트스트랩 부분입니다.
부트스트랩은 디자인에 해당하는 부분으로 삭제나 오류가 발생해도 php파일 작동에 영향을 미치지 않습니다.
이전에 설명했던 부분에 대한 설명은 생략합니다.
The part highlighted in light blue is the newly added code.
The part highlighted in purple is the bootstrap part.
Bootstrap is a design part and does not affect the operation of the PHP file even if it is deleted or an error occurs.
Descriptions of previously explained parts will be omitted.
1.Email 값 가져 오기(Get email values)
– HTML폼에서 이메일 값 가져와서 자바스크립트 변수에 저장합니다.
Get the email value from the HTML form and store it in a JavaScript variable.
HTML
<input type="text" class="form-control" id="email" placeholder="ID@exmale.com" name="email" required>JAVASCRIPT
const frmEmail = document.getElementById("email").value;2.정규표현식 사용하기(Using regular expressions)
– 이메일 형식을 체크하기 위한 정규표현식을 변수에 저장합니다.
– HTML에서 가져온 이메일 값을 test함수를 이용해서 정규표현식과 일치하는 확인 합니다.
– Save the regular expression to check the email format in a variable.
– Check whether the email value retrieved from HTML matches the regular expression using the JavaScript test function.
const regex = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,3}$/;
const emailCheck = regex.test(frmEmail);
...
}else if(frmEmail == ""){
errorEmail.innerHTML ="<p>Email을 입력하세요(Please Enter Your Email)</p>";
return;
}else if(emailCheck == false){
errorEmail.innerHTML ="<p>정확한 Email을 입력하세요(Please enter the correct Email)</p>";
return;
...3.전체코드(full code)
-아래의 링크를 통해서 테스트 할 수 있습니다
You can test it through the link below.
test : https://www.freelifemakers.org/lec/form4.php
form4.php
<?php
/*
폼체크 innerHTML사용
form action name 지정하기
$_SERVER['PHP_SELF'] :
파일의 전체 위치 경로 가져오기Get the full location path of a file
basename($_SERVER['PHP_SELF']); :
파일이름만 가져오기Get only file name
*/
//파일이 존재하지 않을 경우 폼네임은 form.php
//form.action.php파일이 존재하면 form_action.php 변수에 셋팅
$fileName = "./form_action4.php";
if(!is_file($fileName)){
$form_action_name = basename($_SERVER['PHP_SELF']);
}else{
$form_action_name = "./form_action4.php";
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 webform</title>
<!--이 부분은 html코멘트 영역 This part is the html comment area,마임타입설정 Mime type settings//-->
<meta charset="utf-8">
<!-- 모바일폰 스크린 옵션 Mobile phone screen options//-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--부트스트랩5 CDN방식 링크 Bootstrap 5 CDN method link//-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- 폼체크 innerHTML경고 메시지 출력 -->
<!-- Form check innerHTML warning message output //-->
<script>
function frmSubmit(){
//name input box에서 값을 가져오기
//Get value from name input box
const frmName = document.getElementById("name").value;
const frmEmail = document.getElementById("email").value;
const frmPwd = document.getElementById("pwd").value;
//이메일 및 웹사이트 유효성검사
//Regular expression for email validation
const regex = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,3}$/;
//정규표현식과 비교하여 이메일테스트
//Test the email against the regular expression
const emailCheck = regex.test(frmEmail);
//에러메세지 초기화
//Reset error message
errorName.innerHTML = "";
errorEmail.innerHTML = "";
errorPwd.innerHTML = "";
//값의 존재 여부체크 ,공백이면 경고창 띄우기
//Check whether value exists, if blank, display warning window
if(frmName == ""){
errorName.innerHTML ="<p>이름을 입력하세요(Please Enter Your Name)</p>";
return;
}else if(frmEmail == ""){
errorEmail.innerHTML ="<p>Email을 입력하세요(Please Enter Your Email)</p>";
return;
}else if(emailCheck == false){
errorEmail.innerHTML ="<p>정확한 Email을 입력하세요(Please enter the correct Email)</p>";
return;
}else if(frmPwd == ""){
errorPwd.innerHTML ="<p>패스워드를 입력하세요(Please Enter Your Password)</p>";
return;
}else{
frm.submit();
}
}
</script>
</head>
<body>
<div class="container-sm">
<!--HTML폼시작 Start HTML form //-->
<!--폼이름 출력 Print form name //-->
<form id="frm" action="<?php echo $form_action_name; ?>" method="post">
<div class="mb-3">
<label for="name" class="form-label">이름:</label>
<input type="text" class="form-control" id="name" placeholder="Enter Your Name" name="name" required>
<div id="errorName"></div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email:</label>
<input type="text" class="form-control" id="email" placeholder="ID@exmale.com" name="email" required>
<div id="errorEmail"></div>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter your password" name="pswd" required>
<div id="errorPwd"></div>
</div>
<div class="mb-3">
<div class="form-check mb-3">
<label class="form-check-label">Remember me</label>
<input class="form-check-input" type="checkbox" name="remember">
</div>
</div>
<button type="button" class="btn btn-primary" onClick="frmSubmit();">Submit</button>
</form>
<!--HTML폼 끝 End of HTML form//-->
</div>
</body>
</html>
form_action4.php
<?php
if($_SERVER['REQUEST_METHOD'] == "POST"){
$f_name = $_POST['name'];
$f_email = $_POST['email'];
$f_pwd = $_POST['pswd'];
}
echo "REQUEST_METHOD:".$_SERVER['REQUEST_METHOD']."<br>";
echo "이름(NAME):".$f_name."<br>";
echo "이메일(EMAIL):".$f_email."<br>";
echo "패스워드(PASSWORD):".$f_pwd;
?>