코딩/HTML

[HTML] 자바 스크립트 응용 (Form 태그,

peter_00 2024. 4. 22. 21:33
반응형

Form validation (Form 인증)

 

<form action="myService" method="get"
	onSubmit="return validateForm()">
	... form 작성 ...
</form>

<script>
function validateForm() {
	if (... 데이터에 문제가 있다면 ...) {
	return false;
	}
	return true;
}
</script>

form 속성 중 하나인 onSubmit 을 이용해서 데이터 input을 서버에 보내기 전 확인

<script> 를 이용해서 자바 스크립트를 작성, if 문을 활용해서 데이터가 거짓이라면 false 즉 서버에 전송하지 않음

 

예시 1 ) 이메일을 작성하는 칸을 만들고 유저가 이메일을 작성하지 않았다면 경고 메세지를 생성

<form action="myService" method="get" onSubmit="return validateForm()">
    Email: <input id="email" type="text" name="email">
    <span id="emailError"></span>
    <br /><br />
    <input type="submit" value="Submit">
</form>

<span> 은 에러 메세지가 뜰 자리를 상징

 

1. 팝업 에러 메세지 생성하는 자바 스크립트

 function validateForm() {
        var email = document.getElementById("email").value;
        if (email == null || email == "") {
            alert("Email must be filled out");
            return false;
        }
        return true;
    }

ID = email 을 집중해서 코드 생성

 

2. 팝업을 사용하지 않고 에러 메세지를 생성

email.trim 은 스페이스바 입력 방지

function validateForm() {
        var email = document.getElementById("email").value;
        if (email == null || email.trim() == "") {
            document.getElementById("emailError").innerHTML =
            "Email must be filled out";
            return false;
        }
    return true;
}

3. <head>와<title> 아래에 <script>가 시작하기 전CSS를 활용하여 에러메세지가 빨강색으로 뜨게 설정

<style>
#emailError{
color: red;
}
</style>

 

예시 2 )

유저의 이메일 그리고 확인을 위해 이메일 재입력 칸을 생성

<form action="myService" method="get" onSubmit="return
validateForm()">
	Email: <input id="email" type="text" name="email">
	<span id="emailError"></span>
<br />

	Email again: <input id="email2" type="text" name="email2">
	<span id="emailError2"></span>
<br /> <br />

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

 

 

1. 이메일 입력과 확인용 이메일 재입력 칸 

function validateForm() {
    var email = document.getElementById("email").value;
    if (email == null || email.trim() == ""){
        document.getElementById("emailError").innerHTML
        = "Email must be filled out";
        return false;
}

	var email2 = document.getElementById("email2").value;
	if (email2 == null || email2.trim() == ""){
        document.getElementById("emailError2").innerHTML =
        "Email must be filled out";
        return false;
}
	if(email.trim() != email2.trim()){
        document.getElementById("emailError2").innerHTML =
        "Email does not matched";
        return false;
}
	return true;
}

If 문을 사용해서 email.trim() 이 email2.trim()과 매치되지 않을 경우 에러 메세지를 생성

2. 이메일1 칸에 이메일이 작성되어 있지만 계속해서 에러가 뜰 경우

이메일1의 값을 에러로 인식하는 모습

]else{
	document.getElementById("emailError").innerHTML = "";
}

}else{
	document.getElementById("emailError2").innerHTML = "";
}

각 코드에 else문을 추가 해주면된다

 

3. 이메일 데이터에 또 다른 조건을 생성할때 (스페이스 방지)

if (email == null || email.trim() == ""){
    document.getElementById("emailError").innerHTML =
    	"Email must be filled out";
    return false;
}else{
    document.getElementById("emailError").innerHTML = "";
    document.getElementById("email").value = email.trim();
}

₩데이터가 textbox 이기 때문에 .innerHTML이 아니라 .value를 사용해야함

 

정규 표현식(Regular Expression)이란 

특정한 규칙을 가진 문자열의 집합을 다루는 데 사용하는 형식 언어입니다.

 

시작과 끝은 항상 ^...$

[abc] = abc 만 입력 가능

[^abc] = abc 만 입력 불가능

 

예시 1)

<form action="myService" method="get">
Enter some text with pattern
<input type="text" name="t1"
	pattern="^[A-Z][a-z], [A-Z][a-z]$" required>
<br /> <br />
<input type="submit" value="Submit">
</form>

대문자 A-Z 와 소문자 a-z 그리고 쉼표(,) 표시 다시 대문자 A-Z 소문자 a-z  

예시 2) 정보 입력칸 바로 옆에 에러 메세지 생성

	<script>
    function validateForm(){
        var input = document.getElementById("email").value;
        if(/^[A-Z][a-z], [A-Z][a-z]$/.test(input) == false){
            document.getElementById("err").innerHTML =
                "input does not match the pattern";
            return false;
        }
        return true;
    }
	</script>

    <body>
        <form action="myService" method="get"
            onSubmit="return validateForm()">
            Email:
            <input id="t1" type="text" name="email">
            <span id="err"></span>
            <br /><br />
            <input type="submit" value"Submit">
            </form>
    </body>
</html>

결과

예시 3) 0부터 9까지의 수로 다섯자리 만들기

<form action="myService" method="get">

Enter some text with pattern
<input id="t1" type="text" name="t1" pattern="^[0-9]{5}$"
required>

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

</form>

1~3 자릿수, 마침표가 있어야하고 다시 1~3자릿수가 필요한 조건

한자릿수보다 크거나 같은 자릿수 (*$), 그리고 소문자가 필요한 조건

NSW 혹은 ACT 등 그리고 띄어쓰기 후 4자릿 수 0-9가 필요한 조건

0(1-9) 혹은 1(0-2) - 20 그리고 1(0-9) 혹은 2(0-5)

결과 예시

랜덤값구하기 

var x = Math.floor(Math.random() * 6) + 1; //1,2,3,4,5,6 

1은 최소값 그리고 6이 최대값

 

Event

예시 1) 유저가 클릭을하면 다른 사진을 불러오는 이벤트 생성 

<img id="cicle" src="images/circle1.png" onClick="changeCircleImage()" />
<script>
function changeCircleImage() {
    var image = document.getElementById("circle");
    if (image.src.includes("circle1")) {
    image.src = "images/circle2.png";
    } else {
    image.src = "images/circle1.png";
    }
}
</script>

다른 방법

<script>
	var imageNumber = 1;
    
function changeCircleImage() {
    var image = document.getElementById("circle");
    
    if(imageNumber == 1){ imageNumber = 2;}
    else{ imageNumber = 1; }

	if (imageNumber == 1) 
    {image.src = "images/circle1.png"; } 
    else { image.src = "images/circle2.png"; }
}
</script>

 

예시 2) 입력되는 모든 값을 대문자로 바꾸는 기능

Enter discount code:
<input type="text" id="discountCode" onChange="uppercase()">

function uppercase(){
    var e = document.getElementById("discountCode");
    e.value = e.value.toUpperCase();
}

 

예시 3) 마우스로 클릭하면 글씨가 바뀌는 기능

<span id="demo" onMouseDown="mouseDown()" onMouseUp="mouseUp()">
Click Me
</span>
function mouseDown() {
	document.getElementById("demo").innerHTML = "Release Me";
}
function mouseUp() {
	document.getElementById("demo").innerHTML = "Thank You";
}

 

예시 4) 마우스 커서를 입력칸에 위치하면 바뀌는 기능

<span id="demo" onMouseOver="mouseOver()" onMouseOut="mouseOut()

Mouse Over Me

</span>

function mouseOver() {
    document.getElementById("demo").innerHTML = "Thank You"
}

function mouseOut() {
    document.getElementById("demo").innerHTML = "Mouse Over Me"
}

 

예시 5) 페이지를 불러올때 기본값으로 켜지는 기능 설정

function loaddate(){
	d = new Date();
    document.getElementById("test").value = d;
    }
반응형

'코딩 > HTML' 카테고리의 다른 글

[HTML] Event  (0) 2024.05.10
[HTML] 리뷰  (0) 2024.05.10
[HTML] Java Script 를 배워보자  (0) 2024.04.11
[HTML] 입문 ( li태그, ul태그, ol태그, dl태그, table태그 )  (0) 2024.04.10
[HTML] CSS 입문  (0) 2024.04.09

'코딩/HTML'의 다른글

  • 현재글[HTML] 자바 스크립트 응용 (Form 태그,

관련글

티스토리툴바