Validity
로그인 정보의 유효성 검증을 해보기 위하여 아래 3가지 방법을 수행하여 본다.
1. form 테그를 이용하여 로그인화면 구현
2. form 테그를 이용하면서 SPA와 같이 서버로 전송이 일어나지 않게 로그인화면 구현
3. form 테그를 쓰지 않고 SPA와 같이 서버로 전송이 일어나지 않게 로그인 화면 구현
form 테그를 이용하여 로그인화면 구현
화면 전환이 일어나기에 요즘 개발추세에는 맞지 않는 방법입니다.
required 속성을 통하여 유효성 검증
<body>
<form action="">
<div>
<label for="email">이메일</label>
<input type="email" name="" id="email" required />
</div>
<div>
<label for="pw">비밀번호</label>
<input type="password" name="" id="pw" required />
</div>
<button type="submit">로그인</button>
</form>
</body>
<input> 태그의 required 속성
폼 데이터(form data)가 서버로 제출되기 전 반드시 채워져 있어야 하는 입력 필드를 명시합니다. required 속성이 제대로 동작하는 <input> 요소의 type 속성값은 다음과 같습니다.- checkbox, date, email, file, number, password, pickers, radio, search, tel, text, urlrequired 속성은 불리언(boolean) 속성입니다.불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다.
form 테그를 이용하면서 서버로 전송이 일어나지 않게 로그인화면 구현
<form> 테그의 onsubmit속성 : 서버로 데이터를 보내기 직전에 실행된다.
<input> 태그의 pattern 속성 : 정규식의 패턴에 맞는 입력값을 받고 싶은경우
<body>
<!-- onsubmit : 서버로 데이터를 보내기 직전에 실행된다. -->
<form action="" onsubmit="login();">
<div>
<label for="email">이메일</label>
<input type="email" name="" id="email2" required />
</div>
<div>
<label for="pw2">비밀번호</label>
<input type="password" name="" id="pw2" required />
</div>
<div>
<label for="pw">전화번호</label>
<!-- pattern : 정규식의 패턴에 맞는 입력값을 받고 싶은경우 -->
<input type="tel" id="tel" pattern="^010-\d{4}-\d{4}$" required />
</div>
<button type="submit">로그인</button>
</form>
<script>
// 별도의 자바스크립 구현 없이 사용자가 입력한 값이 올바른지 체크하는 방법
function login() {
event.preventDefault(); // 이벤트의 기본 기능 중지 즉, 서버로 전송중지
const email = document.querySelector("#email2").value;
const pw = document.querySelector("#pw2").value;
// 비동기 방식으로 서버로 로그인 정보를 전송해서 로그인 처리
// fetch()를 사용 + 결과 처리 코드 구현
}
</script>
</body>
form 테그를 쓰지 않고 서버로 전송이 일어나지 않게 로그인 화면 구현
위의 로그인 화면과 차이점은 alert를 통해서 메시지를 보여준다.
GlobalEventHandlers.oninvalid : <input> 에 required가 되어있는 경우 말풍선의 내용을 바꿀 수 있다. 참고
HTMLObjectElement.setCustomValidity() : required에 출력되는 기본 메시지를 변경 할 수 있다. 참고
HTMLSelectElement.checkValidity() : required 조건에따라 입력된경우 true 반대는 false로 반환한다. 참고
HTMLObjectElement.validationMessage : 읽기 전용 속성이고 HTMLObjectElement컨트롤이 충족하지 않는 경우 설명하는 지역화된 메시지를 나타내는 문자열을 반환합니다. 참고
<body>
<div>
<div>
<label for="email">이메일</label>
<!-- form테그가 없기때문에 required가 아무것도 체크를 못해준다. -->
<input type="email" name="" id="email3" required />
</div>
<div>
<label for="pw3">비밀번호</label>
<!-- oninvalid 속성 : -->
<!-- setCustomValidity() : 기본 메시지를 변경 -->
<input
type="password"
name=""
id="pw3"
oninvalid="this.setCustomValidity('비밀번호를 입력하세요.')"
required
/>
</div>
<!-- submit이 아니다! -->
<button onclick="login2();">로그인</button>
</div>
<script>
function login2() {
// DOM요소만을 가져온다.
const email = document.querySelector("#email3");
const pw = document.querySelector("#pw3");
console.log(email.checkValidity());
// checkValidity() : required 조건에따라 true, false를 반환한다.
if (!email.checkValidity()) {
return alert(email.validationMessage); // validationMessage : 브라우저의 기본 메세지
}
if (!pw.checkValidity()) {
return alert(pw.validationMessage);
}
}
</script>
</body>
참고자료
'WEB > JavsScript' 카테고리의 다른 글
| [JavaScript] DOM 요소를 변경하는 방법 (0) | 2022.06.05 |
|---|---|
| [JavaScript] DOM 이벤트 다루기 (0) | 2022.06.04 |
| [JavaScript] DOM 이벤트 버블링 (0) | 2022.06.04 |
| [JavaScript] DOM (0) | 2022.06.02 |
| [JavaScript] 정규 표현식(Regular Expression) (0) | 2022.06.01 |
댓글