Notice
Recent Posts
Recent Comments
Link
Coding Note
[JS] 이메일 유효성 검사하기 본문
JavaScript를 사용해서 이메일 유효성 검사하기!
+ Servlet 사용하여 입력값 받기!
구현
코드
1. HTML/CSS/JS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이메일 입력값 체크</title>
<style type="text/css">
form {
padding: 22px;
}
.formWrap {
width:440px;
height: 87px;
border: 5px solid #CEE3F6;
}
.jBtn {
border: 2px solid #CEE3F6;
background-color: #CEE3F6;
border-radius: 5px;
margin: 10px 0 10px 0;
width: 65px;
}
.id {
margin: 15px;
}
.btn {
float: right;
}
</style>
<script type="text/javascript">
function joinBtn() {
var fmjoin = document.fmjoin;
var emailInsert = fmjoin.emailInsert.value;
var emailInsert2 = fmjoin.emailInsert2.value;
if((emailInsert.length==0 || emailInsert=="")) {
alert("입력은 필수입니다.");
}
else if((emailInsert2.length==0 || emailInsert2=="")) {
alert("입력은 필수입니다.");
}
else {
fmjoin.method = "post";
fmjoin.action = "email";
fmjoin.submit();
}
}
//이메일
function emailJoin() {
if(document.fmjoin.emails.options[document.fmjoin.emails.selectedIndex].value == '0'){
document.fmjoin.emailInsert2.disabled = true;
document.fmjoin.emailInsert2.value = "";
}
if(document.fmjoin.emails.options[document.fmjoin.emails.selectedIndex].value == '6'){
document.fmjoin.emailInsert2.disabled = false;
document.fmjoin.emailInsert2.value = "";
document.fmjoin.emailInsert2.focus();
}
else{
document.fmjoin.emailInsert2.disabled = true;
document.fmjoin.emailInsert2.value = document.fmjoin.emails.options[document.fmjoin.emails.selectedIndex].value;
}
}
</script>
</head>
<body>
<div class="formWrap">
<form name ="fmjoin" method="post" action="email" enctype="utf-8">
이메일
<input type="text" name="emailInsert" style="width: 100px; height: 10px;" onfocus="this.value'';" > @
<input type="text" name="emailInsert2" style="width: 100px; height: 10px;" value="" disabled>
<select name="emails" onchange="emailJoin()">
<option value="0" >선택하세요</option>
<option value="6">직접입력</option>
<option value="naver.com">naver.com</option>
<option value="daum.net">daum.net</option>
<option value="nate.com">nate.com</option>
<option value="google.com">google.com</option>
<option value="korea.com">korea.com</option>
</select>
<div class="btn">
<input type="button" value="등록" class="jBtn" onclick="joinBtn()">
<input type="reset" value="재입력" class="jBtn">
</div>
</form>
</div>
<!-- formWrap -->
</body>
</html>
+ 이메일 Select 부분
2. Servlet
package kr.co.ezenac.login;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/email")
public class emailServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void init(ServletConfig config) throws ServletException {
System.out.println("init메서드 호출");
}
public void destroy() {
System.out.println("destroy메서드 호출");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String emailInert =request.getParameter("emailInsert");
String emails =request.getParameter("emails");
System.out.println("이메일: "+emailInert+"@"+emails);
String data= "<html>";
data += "<body>";
data += "이메일 : " +emailInert+ "@" + emails;
data += "</body>";
data +="</html>";
out.print(data);
}
}
+ Console 출력
결과
'Web > JavaScript' 카테고리의 다른 글
| [JS]JavaScript 정리_1 (0) | 2022.05.04 |
|---|---|
| REST 개념 정리 (0) | 2022.03.13 |
| [JS] 아이디, 비밀번호 유효성 검사 (0) | 2022.01.29 |
| [JS] radio 속성을 이용해 사이트 이동하기 (0) | 2022.01.28 |
| [JS] 버튼 클릭 시 <div> 텍스트 생성, 삭제, 숨김 (0) | 2022.01.28 |
'Web/JavaScript' Related Articles
more
Comments