Light Purple Pointer

 

 

도서 등록 시 유효성 검사 

폼 입력시 입력값이 올바른지 판단해서 잘못된 경우 알려주는 프로그램 작성

 

 

 

validation.js

/**
 * 폼 입력시 입력값이 올바른지 판단하여 잘못된 경우 알려준다.
 *
 * 폼태그의 이름 입력창의 이름 , 그 값
 */
function CheckAddBook() {
  const bookId = document.newBook.bookId; // 도서 아이디 입력창
  const name = document.newBook.name.value; // 도서명
  const unitPrice = document.newBook.unitPrice.value; // 가격
  const author = document.newBook.author.value; // 저자
  const publisher = document.newBook.publisher.value; // 출판사
  const unitsInStock = document.newBook.unitsInStock.value; // 재고 수

  function check(regExp, e, msg) {
    if (regExp.test(e.value)) {
      // 정규 표현식 검사
      return true;
    }

    // 오류 시
    alert(msg); // 에러 메시지 msg 출력
    e.select(); // 입력 항목 선택
    e.focus(); // 입력 항목 커서 맞춤
    return false;
  }
  if (
    !check(
      /^ISBN[0-9]{1,8}$/,
      bookId,
      "[도서코드]\nISBN과 숫자를 조합하여 5~12자까지 입력하세요.\n첫글자는 반드시 ISBN으로 시작하세요."
    )
  ){return false;}
    

  if (name.length < 4 || name.length > 20) { // 도서명의 문자 길이가 4~20자인지 유효성 검사
    alert("도서명은 4~20자까지 입력 가능합니다.");

    document.newBook.name.select();
    document.newBook.name.focus();
    return false;// 전송되지않음
  }

  if (unitPrice.length == 0 || isNaN(unitPrice)) { // 가격의 문자 길이가 0인지 숫자인지 유효성 검사
    alert("가격은 숫자를 입력해야 합니다.");

    document.newBook.unitPrice.select();
    document.newBook.unitPrice.focus();
    return false;// 전송되지않음
  }

  if (author.length < 2 || author.length > 12) {
    alert("저자는 2~12자까지 입력 가능합니다.");

    document.newBook.author.select();
    document.newBook.author.focus();
    return false;// 전송되지않음
  }

  if (publisher.length < 2 || publisher.length > 12) {
    alert("출판사는 2~12자까지 입력 가능합니다.");

    document.newBook.publisher.select();
    document.newBook.publisher.focus();
    return false;// 전송되지않음
  }


  if (unitsInStock.length == 0 || isNaN(unitsInStock)) { // 재고 수가 숫자인지 유효성 검사
    alert("재고 수에 숫자만 입력 가능합니다.");

    document.newBook.unitsInStock.select();
    document.newBook.unitsInStock.focus();
    return false;// 전송되지않음
  }

  function check(regExp, e, msg) {
    if (regExp.test(e.value)) { // 정규 표현식 검사
      return true;// 전송되지않음
    }

    // 오류 시
    alert(msg); // 에러 메시지 msg 출력
    e.select(); // 입력 항목 선택
    e.focus(); // 입력 항목 커서 맞춤
    return false;// 전송되지않음
  }

  //form의 전송기능을 사용
  document.newBook.submit(); 
}

 

 

JS를  addbook에 적용

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./resources/css/bootstrap.min.css" />
<script src="./resources/js/validation.js"></script>
</head>

 

submit  수정

			<div class="form-group row">
				<div class="col-sm-offset-2 col-sm-10 ">
					<input type="button" onclick="CheckAddBook()" class="btn btn-primary" value="등록">
				</div>
			</div>

 

test

 

 

 

 

 

 

 

 

이메일 정규표현식 참고 

https://sisiblog.tistory.com/244

 

[javascript] 자바스크립트 이메일 검증 방법 (verify email with regexp)

참고: https://stackabuse.com/validate-email-addresses-with-regular-expressions-in-javascript/ 소개 웹 개발자에게 다양한 유형의 사용자 입력을 검증하는 것은 매우 중요합니다. 이는 클라이언트와 서버 사이에 전송

sisiblog.tistory.com

 

'BACKEND > Jsp' 카테고리의 다른 글

북마켓 프로젝트 7  (0) 2023.09.25
북마켓 프로젝트 6  (0) 2023.09.25
북마켓 프로젝트 4  (0) 2023.09.22
북마켓 프로젝트 3  (0) 2023.09.22
북마켓 프로젝트2  (0) 2023.09.22
ㄴ

티스토리툴바