検証[JSP]

40080 ワード

検証ボックス


  • フォーム・ページに入力したデータ値が、サーバに送信される前に特定のルールに合致しているかどうかを確認します.

  • 例えば、年齢入力時にデジタル署名を行い、会員登録時に重複認証を行い、登録認証時に身分やパスワード署名などを行う.

    Handler関数とは



  • フォームページでは、Javascript/jqueryを使用してコードのセットを検証し、イベント発生時に検証するようにマッピングします.

  • サーバにオーバーロードしない.

    認証タイプ



  • デフォルトの検証:値が存在するかどうか

  • ≪データ型の検証|Validate Data Type|ldap≫:アレイに適しているかどうか(正規表現を使用)

    isNaN()



  • is Not a Number=>数字false、数字ではなくtrue

    正規表現



  • 特定のルールを持つ文字列の集合を表すフォーマット言語.

  • パターン表示で文字列を検索する特定の形式

  • Var変数名=/正規表現/[Flag]

  • var変数名=new RegExp(「正規表現」,「Flag」)

  • Flagとは?
  • i:ignore Case(文字列の大文字と小文字を区別しない)
  • g:Global(検出文字列内のすべてのモード)
  • m:複数行(文字列に改行があるかどうかを検出)

  • Flagは省略できます.省略した場合、一度だけ検出します

  • 正規表現の方法
  • test():文字列が正規表現(真/偽戻り)
  • に合致するかどうかを判断する
  • exec():正規表現に一致する分子列を文字列から抽出し、
  • を返します.

  • 正規表現で使用されるシンボル(メタ文字):特定の意味を持つ文字
  • ^x:文字列xで始まる
  • x$:文字列がxで終わる
  • .x:(任意の文字)文字列はxで終わり、
  • です.
  • x+:xを1回以上繰り返す
  • x? : x
  • なし
  • x*:xを0回以上繰り返す
  • x|y:(or)xまたはy検索
  • (x):()のコンテンツパケット
  • (x)(y):パケット.自動グループ番号=>アレイ
  • X{n}:xを繰り返すn文字を見つける
  • x{n,}:xを繰り返す文字がn回以上見つかった
  • x{n,m}:m回以下のxの重複文字
  • を検索
  • [xy]:xまたはy
  • が見つかりました
  • [^xy]:1文字(x,yを除く)
  • が見つかりました.
  • [x-z]:xからzまでの文字
  • が見つかりました.
  • 共通パターン(*-無限)
  •   - 숫자만 : ^[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を参照