1. 유효성 검사
Frontend(UI, View)단에서 서로 다른 문법간의 데이터를 교류하기 위해서 JavaScript와 jQuery를 활용한다.
그리고 이 두 가지를 활용해 데이터의 유효성을 검증하기도 한다.
이번에는 데이터가 유효한지, 회원가입 툴을 만들어보며 데이터의 유효성 검사를 배워보려한다.
2-1. 데이터 접근하기 : ID중복확인
1) 아이디 작성 공간과 버튼 만들기
우선 회원가입을 위한 양식을 만들어보자!
아이디를 입력할 공간과 중복확인 버튼, 그리고 적용 버튼을 만들어보려 한다.
그리고 데이터에 접근하기 위해 상단에서 볼 수 있다시피 각 버튼마다 함수를 만들어보려한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>01_회원가입.html</title>
<style>
.line{width: 150px; height: 20px; border: 1px solid orange;}
</style>
<script src="myscript2.js"></script>
</head>
<body>
<h3>회원가입</h3>
<form name="memfrm" id="memfrm">
아이디 :
<input type="text" name="uid" id="uid" class="line">
<input type="button" value="ID중복확인" onclick="getID()">
<input type="button" value="ID적용" onclick="setID()">
</form>
<script>
</script>
</body>
</html>
2) getID ()
입력된 아이디를 확인하기 위해서 우선 사용하기 위해 입력한 id 데이터에 접근해야한다.
이 때 컨트롤 요소의 name단을 사용하는 것과 id를 사용하는 것, 그리고 name 태그를 활용해 접근하는 방식이 있다.
① name단 접근
name단은 현재 사용하는 버전에서는 더이상 구동되지 않기도 하고 이전 방식이므로 비추한다.
다만 형식은 아래에 코드로 달아두려한다.
document.memfrm.uid.value;
② id단으로 접근
id단으로 접근하는 방식은 가장 일반적이기도 하고 추천하는 방식이다.
id단으로 접근할 때는 아래와 같은 방식으로 코드를 작성한다.
document.getElementById("uid").value
③ tag name으로 접근
name이 같아도 상관은 없다.
프로그램에서는 같은 이름이더라도 배열로 구분하기 때문이다.
아래의 코드를 확인해보자.
document.getElementsByTagName("input")[0].value
상단에 적힌 텍스트상자와 버튼들의 코드는 모두 input 형태로 들어가있다.
이 때 input 이라는 tag name을 활용하여 몇 번째 input의 값에 접근할 것인지 결정할 수 있는 것이다.
위의 코드는 input 중 0번째의 값(value)을 출력하게 한다.
↑ test!
데이터 접근까지 적용하였다.
아이디를 무언가 적어보고 중복확인을 눌러보자.
2-2. 데이터 접근하기 : ID적용
1) 아이디 작성 공간에 작성된 데이터 적용 시키기
위와 같은 방법으로 이번엔 데이터에 접근시켜보았다.
function setID() {
// <input type="text" name="uid" id="uid" class="line">에 값 대입하기
let str="맨땅에코딩";
/ id접근(추천)
document.getElementById("uid").value=str;여기서 str 값을 따로 지정해주었기 때문에 아이디 적용을 누르면 무조건 저 글자가 출력이 된다.
'⁂ Java Script > : 기본 익히기' 카테고리의 다른 글
| [JS] #10 자바 스크립트에서 스타일(.CSS) 접근하기 (0) | 2022.08.17 |
|---|---|
| [JS] #9-2 유효성 검사 - 회원가입틀 만들기 2 (0) | 2022.08.16 |
| [JS] #8 String 함수 (0) | 2022.08.12 |
| [JS] #7-1 이벤트(Event) (0) | 2022.08.12 |
| [JS] #6-4 함수(Function) : .js파일 만들기 (0) | 2022.08.12 |