[web] Javascript form valid check

 

required

<form action="/action_page.php" method="post">

<input type="text" name="fname" required>

<input type="submit" value="Submit">

</form>

 

브라우저에서 HTML 양식 유효성 검사를 자동으로 수행한다..

이 예제의 경우 fname라는 이름의 input이 비어 있으면 required속성이 form제출이 되지 않도록 한다.

 

checkValidity()

<input id="id1" type="number" min="100" max="300" required> // 최댓값 300 최솟값 100설정

<button onclick="myFunction()">OK</button>

<p id="demo"></p>



<script>

function myFunction() {

var inpObj = document.getElementById("id1"); // input의 값을 id를 통해 접근하여 값을 얻어냄.

if (!inpObj.checkValidity()) {// 그 값이 설정해놓은 max min범위에 해당하는 지 채크

document.getElementById("demo").innerHTML = inpObj.validationMessage; // 여부에 따라 메세지 출력

} else {

document.getElementById("demo").innerHTML = "Input OK";

}

}

</script>

이렇게 input에 최대값과 최솟값을 설정하게 되면 inpObj.checkValidity()를 사용할 수 있다. 설정해둔 max min값을 통해 작용된다.

 

inpObj.validationMessage;가 메세지 자동으로 출력한다.

max min값을 정하면 inpObj.checkValidity()사용가능하다.

 

rangeOverflow와 rangeUnderflow

이와 비슷한 맥락으로 rangeOverflow와 rangeUnderflow가 있다.

문자 그대로 각각 max값보다 높은 값이 들어왔는지, min값보다 낮은 값이 들어왔는지를 판단해주는 함수 이다.

예)

document.getElementById("id1").validity.rangeOverflow

document.getElementById("id1").validity.rangeUnderflow

꼭 input속성에max값 or min값을 설정해 주어야 한다는 것을 잊지말자.

 

document.getElementById의 확장

innerHTML을 통해 HTML내용을 변경할 수 있다.

또한 document.getElementById("demo").src로 이미지 소스에 접근하여 이미지를 바꾸는 등 다양하게 활용될수 있다는 점을 기억하자

 

this의 활용

this는 말그대로 해당 오브젝트나 element그 자체를 가리킨다.

예를들어

<img src = "/img1.png" onmouseover="chang(this)"> 

이런식으로

마우스 오버 이벤트 시에 함수를 콜할때, this를 전달함으로서 해당 element인 이미지 자체를 함수의 파라메터로 보낼수 있다.

물론

<img name ="sample_image" src = "/img1.png" onmouseover="chang(sample_image)">

이렇게 name을 통해 전달하는 방법도 있다.

 

 

image접근 시 유의사항

<img src = "/img1.png" onmouseover="chang(this)">

function change(obj){

obj.style.opacity="0.5";

}

이런식으로 이미지를 파라메터로 넘겨주었을때 이미지의 속성(여기서는 불투명도 opacity)에 접근하기 위해서.style을 사용해야 한다.

만약 obj.opacity="0.5"; 라고 접근하게 되면 적용되지 않는다.

 

 

form onsubmit

submit타입의 버튼을 눌렀을때 onsubmit의 값에 따라서 form이 제출되거나 되지 않거나 여러 옵션들을 걸수 있다.

속성의 위치는 form태그 안에 들어간다.

<form name="myform" action="form_ok.php" onsubmit="return check()" method="POST">

</fom>

 

onsubmit의 값이 turn라면 폼을 제출하고 false라면 제출이 불가능하다.

onsubmit의 값을 return function의 형식으로 한다면 function을 통해 여러가지 조건 검사를 할 수 있다.

 

function예시)

<script>

function check(){

var x = document.forms["myform"]["company"].value;

if(x.length < 5){

alert("회사명 5글자 이상 입력"); //회사명 5글자 이상체크

return false;

}



var x = document.forms["myform"]["email"].value;

var reg_email = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;

if(!reg_email.test(x)) {

alert("이메일 형식이 일치하지 않습니다"); // 이메일 형식 체크

return false;

}

return true;

}

</script>

 

pattern

form형식을 검사하는 방법 중 하나로 pattern속성을 통해 정규식을 넣어 형식이 일치하는지 여부를 판단하는 방법도 있다.

pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"