기록
JSP 유효성검사 (validation) 3 영문소문자, 숫자 유효성검사 본문
자바스크립트를 이용한 영문소문자, 숫자 유효성검사
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<script></script>
<title>Validation03</title>
<script type="text/javascript">
function checkLogin(){
let form = document.loginForm;
console.log(form);
let id = form.id.value;
let idLen = id.length;
let passwd = form.passwd.value;
let passwdLen = passwd.length;
if(id==""){ //아이디 값이 없으면
alert("아이디를 입력해주세요")
form.id.focus();
return false; //함수를 종료
}else if(passwd==""){ //비밀번호 값이 없으면
alert("비밀번호를 입력해주세요");
form.passwd.focus();
return false;
}
console.log("id : "+id +", idLen : "+idLen);
console.log("passwd : "+passwd +", passwdLen : "+passwdLen);
//아이디는 영문 소문자만 입력가능하다.
for(i=0; i<idLen; i++){ //하나씩 id를 끄집어내서 소문자가 맞는지 체크한다
// java -> 한 글자씩 끄집어 내보자
let ch = id.charAt(i);
//소문자인지 따져보자
if( (ch<'a' || ch>'z') && (ch>'A' || ch<'Z') && (ch>'0' || ch<'9')){
alert("아이디는 영문 소문자만 입력가능합니다.");
//name="id" 인 요소에 focus를 줌 (클릭한 효과)
form.id.select();
return; //함수종료
}
}
//비밀번호는 숫자만 입력 가능합니다.
//숫자가 아니니 ? 응-> 숫자아님
//숫자가 아니니? 아니 -> 숫자
if(isNaN(passwd)){ //응(true) 숫자아님
alert("비밀번호는 숫자만 입력 가능합니다.")
form.passwd.focus();
return;
}
//다 통과됐다 submit보내자
form.submit();
}
</script>
</head>
<body>
<!-- 기본 유효성 검사 >>> 숫자여부 확인
숫자여부는 isNan() 함수 이용
It is Not a Number? 그거 숫자 아니니?
응 숫자가 아니야 => true
아닌데? 숫잔데 => false
;
-->
<form name="loginForm" action="validation04_process.jsp"
method="post" id="loginForm">
<p>아이디 : <input type="text" name="id"/></p>
<p>비밀번호 : <input type="text" name="passwd" class="cls passwd" /></p>
<!-- checkForm() : 핸들러 함수 -->
<p><input type="button" value="전송(핸들러)" onclick="checkLogin()"/></p>
</form>
</body>
</html>제이쿼리를 이용한 영문소문자, 숫자 유효성검사
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/jquery-3.6.3.min.js"></script>
<title>Validation03</title>
<script type="text/javascript">
$(function(){
$('#checkLogin').on('click',function(){
let loginForm = $('#loginForm');
let id = $('#id').val();
// let id = $('input[name='id']').val();
let passwd = $('#passwd').val();
// let passwd = $('.passwd').val();
let idLen = id.length;
let passLne = passwd.length;
if(id==""){
alert("아이디를 입력해주세요");
$('#id').focus();
return;
}
if(passwd==""){
alert("비밀번호를 입력해주세요");
$('#passwd').focus();
return;
}
//아이디는 영문 소문자만 입력가능하다.
for(i=0; i<idLen; i++){ //하나씩 id를 끄집어내서 소문자가 맞는지 체크한다
// java -> 한 글자씩 끄집어 내보자
let ch = id.charAt(i);
//소문자인지 따져보자
if( (ch<'a' || ch>'z') && (ch>'A' || ch<'Z') && (ch>'0' || ch<'9')){
alert("아이디는 영문 소문자만 입력가능합니다.");
//name="id" 인 요소에 focus를 줌 (클릭한 효과)
$('#id').focus();
return; //함수종료
}
}
//비밀번호는 숫자만 입력 가능합니다.
//숫자가 아니니 ? 응-> 숫자아님
//숫자가 아니니? 아니 -> 숫자
if(isNaN(passwd)){ //응(true) 숫자아님
alert("비밀번호는 숫자만 입력 가능합니다.");
$('#passwd').focus();
return;
}
//다 통과됐다 submit보내자
loginForm.submit();
});
});
</script>
</head>
<body>
<!-- 기본 유효성 검사 >>> 숫자여부 확인
숫자여부는 isNan() 함수 이용
It is Not a Number? 그거 숫자 아니니?
응 숫자가 아니야 => true
아닌데? 숫잔데 => false
;
-->
<form name="loginForm" action="validation04_process.jsp"
method="post" id="loginForm">
<p>아이디 : <input type="text" name="id" id="id" /></p>
<p>비밀번호 : <input type="text" name="passwd" id="passwd" class="cls passwd" /></p>
<!-- checkForm() : 핸들러 함수 -->
<p><input type="button" value="전송(핸들러)" id="checkLogin"/></p>
</form>
</body>
</html>페이지처리
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<h3>입력에 성공했습니다.</h3>
<% //스크립틀릿
request.setCharacterEncoding("utf-8");
String id = request.getParameter("id");
String passwd = request.getParameter("passwd");
%>
<p>아이디 : <%= id%></p>
<p>비밀번호 : <%= passwd%></p>
</body>
</html>
유효성검사에 통과못할시
유효성검사 통과 시
'JSP' 카테고리의 다른 글
| JSP 상품등록 페이지 (유효성검사,상품코드 +1 메서드) 추가 (0) | 2023.01.10 |
|---|---|
| JSP 유효성검사 4 정규표현식 (0) | 2023.01.09 |
| JSP 유효성검사 (validation) 2 글자수 유효성 검사 (0) | 2023.01.06 |
| JSP 유효성검사 (validation) 1 (0) | 2023.01.05 |
| JSP 상품등록 + 파일업로드 추가5 (0) | 2023.01.05 |
'JSP' Related Articles
more
Comments