JavaScript
JavaScript forms
carrot62
2020. 7. 28. 11:47
HTML Form에서 중요한 속성
- action: 사용자가 입력한 데이터를 받아와서 처리할 페이지를 꼭 명시해줘야 한다
- method: GET/POST
- submit
JavaScript를 이용해서 Form의 유효성을 검사하는 방법
HTML input 속성 중에 required을 사용해도 되기는 하지만, submit button을 눌렀을 때만 작동하기 때문에 submit 버튼을 사용하지 않을 때는 javascript를 이용해서 함수로 검사하게 해야한다.
onsubmit 이라는 event를 사용해서 유효성 검사 함수를 호출한다. 함수의 리턴값이 false이면 form의 데이터가 제출되지 않고, true일 경우에는 사용자 입력한 값이 제출된다.
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value; //document.myForm.fname.value과도 동일하다
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"method="post">
<!--onsubmit="return true" : 제출된다
onsubmit="return false" : 제출되지 않는다-->
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
단, onsubmit 은 <input type="submit" />에서만 작동하기 때문에 다른 방법을 이용해서 form을 제출하고 싶을 때는 submit() 함수를 호출해야 한다.
Submit 하는 방법 2가지:
- input type="submit"
- submit()
Submit 함수를 이용하는 방법
<!DOCTYPE html>
<html>
<head>
<script>
function checkform(){
var form= document.form1; //object으로 변수를 선언
if(form.userId.value== ""){
alert('아이디를 입력하세요');
form.userId.focus(); //사용자 편리를 위해 입력해야 하는 창에 커서를 두도록 설정하는 것
return false;
}
if(form.userPw.value==""){
alert('비밀번호를 입력하세요');
form.userPw.focus();
return false;
}
form.submit(); // submit() 함수를 이용해서 form 제출
}
</script>
</head>
<form name="form1" id='form1' method="post" action="login_ok.php">
<div class="form">
<table class="ftb">
<tr>
<td>아이디</td>
<td><input type="text" name="userId" id="userId"/></td>
</tr>
<tr>
<td>암호</td>
<td><input type="password" name="userPw" id="userPw"/></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="로그인" onclick='checkform()' />
<!--input type="submit" 대신에 버튼을 사용해서 제출하는 방법-->
<!--버튼을 사용하기 때문에 onclick event를 사용한다-->
<input type="button" value="취소" onclick='resetform()'>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
button을 이용해서 제출하고 싶을 때 onclick 이벤트를 걸고 유효검사 함수 마지막 부분에 submit() 을 넣어주면 된다.
유효성 검사를 할때 통과하지 못한 항목에 focus() 함수를 넣어주면 커서가 자동으로 사용자가 입력해야하는 칸에 focus 된다.
JavaScript Form에소 제공하는 함수 2가지
- submit()
- reset()
Number validation
- isNaN()
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Can Validate Input</h2>
<p>Please input a number between 1 and 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) { // 숫자의 여부를 검사할 때 isNaN() 함수를 사용한다
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Data validation
- Server side validation
- Client side validation
HTML Constraint validation
HTML5에서 새로 나온 HTML 유효성 검사 방법이다
1. HTML Input Attributes
- disabled, max, min, pattern, required 등...
- 더 저세히 보고 싶다면 다음 링크에서 input attributes에서 확인하도록 하자: https://carrot62.tistory.com/7
HTML Forms
HTML Forms 중요한 개념이니 잘 알아두도록 하자! HTML Forms는 클라이언트가 서버에게 데이터를 보낼 때 사용된다. 사용자의 입력을 받아온 뒤 서버에서 본격적으로 back-end 작업을 하게 된다. : 사용��
carrot62.tistory.com
2. CSS Pseudo Selectors
3. DOM properties and methods
- checkValidity(): input attributes 와 함께 쓰인다
- 속성:
- validationMessage: 검사 결과가 false이라면 출력되는 에러 출력 메시지
- validity: 검사 결과에 대한 boolean 값을 가진다
속성: patternMismatch, rangeOverflow, rangeUnderflow, tooLong, valueMissing 등... - willValidate: 검사에 대한 통과 여부를 알려준다
- 속성:
<input id="id1" type="number" max="100"> <!--입력 값의 최댓값을 100으로 설정 -->
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeOverflow) { //max=100인 범위를 넘어설 경우
txt = "Value too large";
}
document.getElementById("demo").innerHTML = txt;
}
</script>- setCustomValidity()
연습하기
다음과 같은 form에서 5가지 검사 항목을 javascript를 이용해서 만들어보자:
1. 빨간색 표시 필수 입력 - 빈칸 허용하지 않기
function checkform(){
var x1= document.forms.myform;
if( x1.company.value==""){
alert("Company를 적으세요");
x1.company.focus(); //입력해야 하는 칸에 자동으로 커서가 focus 되도록 설정
return false; //return 값이 false이기 때문에 form이 제출되지 않는다
}
}2. 회사명 5글자 이상 - 최소 글자수 검사
length 함수를 이용해서 입력 값의 길이를 구한다.
function checkform(){
var x1= document.forms.myform;
if( x1.company.value==""){
alert("Company를 적으세요");
x1.company.focus();
return false;
}
else if( x1.company.value.length < 5){
alert("Company의 이름을 최소 5글자 이상 적으세요");
x1.company.focus();
return false;
}
}3. 이메일 유효성 검사
email 형식 확인을 위한 함수를 하나 새로 호출하고, 함수 형식 검사를 위해서는 test 함수를 사용한다. test를 이용해서 형식을 지정할 때는 형식 비교를 위해 사용할 변수를 하나 선언하고 (예: email_format), 형식은 /^ $/ 안에 지정한다.
if( x1.emailaddress.value==""){
alert("Email 주소를 적으세요");
x1.emailaddress.focus();
return false;
}
else{
var email= document.forms.myform.emailaddress.value
if(!checkemail(email)){
alert("Email이 올바르지 않습니다. 형식에 맞게 적으세요");
x1.emailaddress.focus();
return false;
}
}이메일 형식을 확인하는 함수:
function checkemail(email){
var email_format= /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;
if( !email_format.test(email))
return false;
else
return true; //else의 경우도 꼭 정의해줘야 한다
}4. 핸드폰번호 검사
input type attribute만을 이용해 검사하고 싶다면:
pattern을 이용해서 핸드폰 번호 형식을 지정할 수 있다.
<input type="tel" name="phone" placeholder="010-0000-0000" pattern="010-[0-9]{4}-[0-9]{4}">자바스크립트를 사용해서 검사 함수를 호출하면:
if( x1.phone.value==""){
alert("전화번호를 적으세요");
x1.phone.focus();
return false;
}
else{
var phonenum= document.forms.myform.phone.value
if(!checktel(phonenum)){
alert("전화번호가 올바르지 않습니다. 형식에 맞게 적으세요");
x1.phone.focus();
return false;
}
}전화번호 형식을 검사하는 함수:
function checktel(phonenum){
var phonenum_format= /^010-[0-9]{4}-[0-9]{4}$/; //010-0000-0000 으로 지정한 형식
/*
^(01[016789]{1}|02|0[3-9]{1}[0-9]{1})-?[0-9]{3,4}-?[0-9]{4}$/
01로 시작하는 핸드폰 및 지역번호와 050, 070 검증한다
위의 pattern에서 -(하이픈) 다음에 물음표를 넣게 되면 "-"은 넣어도 되고
생략해도 된다. 그러나 넣을 때에는 정확한 위치에 넣어야 한다.*/
if( !phonenum_format.test(phonenum))
return false;
else
return true;
}