Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 22 additions & 12 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,16 +1,26 @@
<!-- 항상 docktype, head, body 다 적어주면서 하는 연습하면 좋을 것 같애. 그게 standard이니깐-->
<!DOCTYPE html>
<html>
<section>
Name<input id='name' type='text'>
<p>ONLY characters available</p>
Email<input id='email' type='text'>
<p>Not valid email address</p>
Number<input id='number' type='text'>
<p></p>
Message<textarea></ textarea>
<button id='submit' type='submit'>Submit</button>
</section>

<link rel="stylesheet" type="text/css" href=style.css>
<script src='main.js' async></script>
<head>
<link rel="stylesheet" type="text/css" href=style.css>
<script src='main.js' async></script>
</head>

<body>
<!-- 보통 validation은 form이랑 같이 작성해. form이 client에 입력받은 데이타들을 서버에 전해주는 역할을 하니깐
그래서 서버에 전해주기 전에 client 쪽에서 input들을 validate하는 거지-->
<form action="" method="POST">
<!-- input 앞에 텍스트를 넣고 싶을때는 보통 label tag를 사용해. -->
<label>Name</label><input id='name' type='text'>
<p>ONLY characters available</p>
<label>Email</label><input id='email' type='text'>
<p>Not valid email address</p>
<label>Number</label><input id='number' type='text'>
<p></p>
<label>Message</label><textarea></ textarea>
<button id='submit' type='submit'>Submit</button>
</form>
</body>

</html>
5 changes: 5 additions & 0 deletions main.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@ var p = document.getElementsByTagName("p");
// var paragraphCreate = document.createElement("p");
// var appendParagraph = name.appendChild(paragraphCreate);

// validate할때 regular expression 많이 사용하는데 지현이처럼 javascript 안에서 하는 것도 괜찮고
// html input tag 안에 pattern이라는 attribute가 있어 거기에 regular expression 넣어서 사용해도 돼.
// 전반적으로 코드를 잘 적었는데 코드 스타일이 아직 미흡한 것 같애.
// 예를 들면 var p = document.getElementsByTagName("p"); 에서 error message를 얻는 것 같은데
// p[0], p[1] 이런식으로 안 하고 각각의 에러 메시지에 class나 id를 넣어줘서 따로따로 받는게 좋아
var check = function() {
var nameValue = nameRegex.test(name.value);
console.log(nameValue);
Expand Down