WEB/2020_webCamp

LAB5_JS Form + JS Dorm

HBean_ 2020. 7. 30. 04:34

<JS Form>

html form validation을 javascript로 확인할 수 있다.

 

 

  • document.forms["form_name"]["element_name"].value : 해당 element가 받은 값을 retun
  • form 속성에 onSubmit="return 함수명()"을 추가하면 submit 할때마다 해당 함수에 따라 검사를 한다.
    • //또는 버튼에 onclick="함수명"
    • 호출한 함수에서 입력값의 유효성이 어긋난 것을 알게 될 경우 alert("message");로 경고창을 띄우고 return false
  • form이 아닐경우 -> document.getElementById("id값").value 
  • required: 입력값의 유무만을 판별, element (input,select) 속성에 추가
    • 예시 : <input type="text" name="name" required/>
  • 변수.checkValidity() : 해당 element의 속성(min, max ...)에 적합한 value를 가지고 있는 지 확인!
  • document.getElementById("id값").validity/rangeOverflow : 해당 id를 가진 element가 자신의 max 속성값 보다 큰 value를 가지면 false return
  • document.getElementById("id값").validity/rangeUnderflow : 해당 id를 가진 element가 자신의 min 속성값 보다 작은 value를 가지면 false return

 

https://www.w3schools.com/js/js_validation.asp

 

JavaScript Form Validation

JavaScript Forms JavaScript Form Validation HTML form validation can be done by JavaScript. If a form field (fname) is empty, this function alerts a message, and returns false, to prevent the form from being submitted: JavaScript Example function validateF

www.w3schools.com

 

<JS DOM>

DOM = Document Object Model

: a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

 

 

 

https://www.w3schools.com/js/js_htmldom.asp

 

JavaScript HTML DOM

JavaScript HTML DOM With the HTML DOM, JavaScript can access and change all the elements of an HTML document. The HTML DOM (Document Object Model) When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM model is con

www.w3schools.com