検証[JSP]
40080 ワード
検証ボックス
フォーム・ページに入力したデータ値が、サーバに送信される前に特定のルールに合致しているかどうかを確認します.
例えば、年齢入力時にデジタル署名を行い、会員登録時に重複認証を行い、登録認証時に身分やパスワード署名などを行う.
Handler関数とは
フォームページでは、Javascript/jqueryを使用してコードのセットを検証し、イベント発生時に検証するようにマッピングします.
サーバにオーバーロードしない.
認証タイプ
デフォルトの検証:値が存在するかどうか
≪データ型の検証|Validate Data Type|ldap≫:アレイに適しているかどうか(正規表現を使用)
isNaN()
is Not a Number=>数字false、数字ではなくtrue
正規表現
特定のルールを持つ文字列の集合を表すフォーマット言語.
パターン表示で文字列を検索する特定の形式
Var変数名=/正規表現/[Flag]
var変数名=new RegExp(「正規表現」,「Flag」)
Flagとは?
Flagは省略できます.省略した場合、一度だけ検出します
正規表現の方法
正規表現で使用されるシンボル(メタ文字):特定の意味を持つ文字
- 숫자만 : ^[0-9]*$
- 영문자만 : ^[a-zA-Z]*$
- 한글만 : ^[가-힣]*$
- 이메일 : /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i
=> i: 대소문자 가리지 않겠다.
=> -_\. : - , _ , .이 들어갈 수 있다.
- 휴대전화 : ^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$
- 전화번호: ^\d{2,3}-\d{3,4}-\d{4}$
- 주민번호 : \d{6}\-[1-4]\d{6}
- IP주소 : ([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3})
- URL : ^(file|gopher|news|nntp|telnet|https?|ftps?|sftp):\/\/([a-z0-9-]+\.)+[a-z0-9]{2,4}.*$
- 날짜 : ^\d{2,4}\/\d{1,2}\/\d{1,2}$
<%@ 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>
<script type="text/javascript">
function checkMember(){
// 아이디: 영문 대소문자, 한글의 자음과 모음 검사
var regExpid= /^[0-9a-z]+$/;
// 비밀번호 : 숫자, 특무 각 1회이상, 영문은 2개 이상 사용하여 8자리 입력 가능
var regExppasswd= /(?=.*\d{1,50})(?=.*[~`!@#$%\^&*()-+=]{1,50})(?=.*[a-zA-Z]{2,50}).{8,50}$/;
// 이름 : 한글 검사
var regExpname = /^[가-힣]+$/;
// 전화번호 형식인지 검사
var regExpphone = /^\d{2,3}-\d{3,4}-\d{4}$/;
// 이메일 형식인지 검사
var regExpemail= /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i
var form = document.Member;
var id = form.id.value;
var passwd = form.passwd.value;
var name = form.name.value;
var phone = form.phone1.value + "-" + form.phone2.value + "-" + form.phone3.value;
var email = form.email.value;
// 정규표현식.test(변수)
if(!regExpid.test(id)){
alert("아이디는 숫자, 영문만 입력가능")
form.id.select();
return;
}
if(!regExppasswd.test(passwd)){
alert("비밀번호는 숫자, 특무 각 1회이상, 영문은 2개 이상 사용하여 8자리 입력 가능합니다.")
form.passwd.select();
return;
}
if(!regExpname.test(name)){
alert("이름은 한글만 입력해주세요")
form.name.select();
return;
}
if(!regExpphone.test(phone)){
alert("전화번호 형식이 맞지 않습니다.")
form.phone2.select();
return;
}
if(!regExpemail.test(email)){
alert("이메일 형식이 맞지 않습니다.");
form.email.select();
return;
}
//모두 통과시
form.submit();
}
</script>
</head>
<body>
<h3>회원 가입</h3>
<form name= "Member" method="post" action="validation05_process.jsp">
<p>아이디: <input type="text" name ="id" /> </p>
<p>비밀번호: <input type="text" name ="passwd" /></p>
<p>이름: <input type="text" name ="name" /></p>
<p>연락처: <select name="phone1">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="019">019</option>
</select> -
<input type="text" maxlength ="4" size ="4" name="phone2" /> -
<input type="text" maxlength ="4" size ="4" name="phone3" /> -
</p>
<p>이메일: <input type="text" name ="email" /></p>
<p><input type="button" value="가입하기" onclick="checkMember()" / ></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>
<script type="text/javascript">
function CheckLogin(){
var form = document.loginForm;
if(form.id.value.length<4 || form.id.value.length>12){
alert("아이디는 4~12자 이내로 입력가능")
form.id.select();
return;
}
if(form.passwd.value.length<4){
alert("비밀번호는 4자이상으로 입력해야 한다.");
form.passwd.select();
return;
}
// 1234abc => 1
if(!isNaN(form.name.value.substr(0,1))){
alert("이름은 숫자로 시작불가");
form.name.select();
}
// 아이디 영문소문자 체킹 form.id.value : tesTer
// t[0]e[1]s[2]T[3]e[4]r[5]
for(i=0; i<form.id.value.length; i++){
var ch = form.id.value.charAt(i);
if((ch<'a'|| ch>'z')&&(ch>'A'||ch<'Z')&&(ch>'0'||ch<'9')){
alert("아이디는 영문 소문자만 입력가능");
form.id.select();
return;
}
}
// 나이에 문자가 들어가면 안됨
if(isNaN(form.age.value)){
alert("나이는 숫자만 입력가능하다.")
form.age.focus(); // = select
return false; // = return
}
form.submit();
}
</script>
</head>
<body>
<form name="loginForm" action="validation02_process.jsp">
<p>아이디: <input type="text" name ="id" /></p>
<p>비밀번호: <input type="password" name ="passwd" /></p>
<p>이름: <input type="text" name ="name" /></p>
<p>나이: <input type="text" name ="age" /></p>
<p><input type="button" onclick="CheckLogin()" value="전송"/>
</form>
</body>
</html>
正規表現を使用して、
[ジョブ]
以下の条件に従って仕事をしましょう.
ユーザWebContent/js/フォルダのvalidationBook.jsファイルの作成
1065;生成validationBook.jsファイルに検証用のHandler関数を作成する
図書IDがISBNで始まるかどうかを確認します.文字の長さ(数字を含む)は5~12文字です.
図書名を確認する文字の長さは4~12です.
文字の長さが0か数値かを確認します(長さは0にできません)
価格がマイナスであるかどうかを確認します(マイナスではありません)
在庫数量が数値であるかどうかを確認する
ユーザWebContent/ch 08/フォルダのaddBook.jspファイルの作成
validationBookには、フォームページに入力した図書ID、図書名、価格、在庫数を検証するためのHandler関数が保存されています.リンクjsファイルの作成
「登録」ボタンをクリックしてonclickプロパティを作成し、Handler関数を実行します.
⦁ Src.dtoパッケージで表示します.Javaの作成
1065;上図に入力した要素を含むjava空クラスの作成
メンバー変数の作成、getter/setterメソッド、toStringメソッド
⦁ src.ch08.com.daoパッケージでBookRepositoryを使用します.Javaクラスの作成
⦁ src.ch04.com.dao.ProductRepository.Javaクラスによる適切な記述
WebContent/ch 08/フォルダにaddBook processを追加します.jspファイルの作成
⦁ addBook.jspリクエストのフォームデータを受信し、BookRepositoryクラスで作成されたオブジェクトに格納します.
⦁ WebContent/ch08/products.jspの作成
⦁ addBook.jspとaddBook process.jspで追加した図書情報をリストに出力
⦁ WebContent/ch04/products.jspを参照
Reference
この問題について(検証[JSP]), 我々は、より多くの情報をここで見つけました https://velog.io/@vgo_dongv/JSP-유효성-검사テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol