<5. form 데이터 유효성 검증하기>
참고: [boostcourse full-stack] http://www.edwith.org/boostcourse-web
* form 태그를 사용한 html
- email 정보가 올바른지 유효성 검증하기
<form action="/join" method="post">
<div class="inputWrap">
<div class="email">
<span> Email </span> <input type="text" name="email"><br/>
</div>
<div class="password">
<span> Password </span> <input type="password" name="password"><br/>
</div>
</div>
<input class="sendbtn" type="submit">
</form>이 부분처리를 서버에서 한다면 서버에 갈 때까지 email 정보가 틀렸는지 알 수가 없다.
때문에 좀 더 좋은 UX를 제공하기 위해서는 에러 메시지를 더 빨리 사용자에게 노출해주는 것이 좋다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Join !</title>
<link rel="stylesheet" href="/css/ui.css">
</head>
<body>
<h1>Join my website!</h1>
<div class="formWrap">
<form action="/join" method="post" id="myform">
<div class="inputWrap">
<div class="email">
<span> Email </span> <input type="text" name="email"><br/>
</div>
<div class="password">
<span> Password </span> <input type="password" name="password"><br/>
</div>
</div>
<input class="sendbtn" type="submit">
</form>
</div>
<section class="result"></section>
<script>
var btn = document.querySelector(".sendbtn");
var result = document.querySelector(".result");
btn.addEventListener("click", function(evt) {
evt.preventDefault();
var emailValue = document.querySelector("[name='email']").value;
var bValid = (/^[\w+_]\w+@\w+\.\w+$/).test(emailValue);
if(!bValid) {
result.innerHTML = "올바르지 않은 이메일입니다";
} else {
result.innerHTML = "이메일정보가 좋아요~";
document.querySelector("#myform").submit();
}
});
</script>
</body>
</html>preventDefault+) preventDefault를 사용해서 바로 서버로 넘어가는 것을 막을 수 있다. (default 행동을 막아주는 것)
'BoostCource > Front-end' 카테고리의 다른 글
| #05. FE - form 데이터 보내기 (0) | 2018.11.16 |
|---|---|
| [FE] 05. JavaScript Regular expression(정규표현식) (0) | 2018.11.16 |
| [FE] 05. 생성자패턴으로 TabUI 만들기 (0) | 2018.10.01 |
| [FE] 05. 생성자 패턴 (0) | 2018.10.01 |
| [FE] 04. 클린코드 (0) | 2018.09.27 |