実現したいこと
ログイン画面でIDとパスワードを入力し、ログインボタンを押した際、IDかパスワードに誤りがあった場合、｢IDかパスワードが間違っています｣とアラートで表示させたいです。(誤りがある場合は画面は遷移しません。=ログイン画面のまま)
IDとパスワードはデータベースで照合する形です。
サーブレット、JSP、HTML、JavaScriptを使ってこれを実現させたいです。
発生している問題・分からないこと
｢ログイン画面でIDとパスワードを入力し、ログインボタンを押すと、IDとパスワードがデータベースと照合され、誤りがある場合は画面遷移しない。｣という設定はできたのですが、その際に｢IDかパスワードが間違っています｣というアラートを表示させることができません。
該当のソースコード
LoginServlet
1package servlet; 2 3import java.io.IOException; 4 5import javax.servlet.RequestDispatcher; 6import javax.servlet.ServletException; 7import javax.servlet.annotation.WebServlet; 8import javax.servlet.http.HttpServlet; 9import javax.servlet.http.HttpServletRequest; 10import javax.servlet.http.HttpServletResponse; 11import javax.servlet.http.HttpSession; 12 13import model.Login; 14import model.LoginLogic; 15 16@WebServlet("/LoginServlet") 17public class LoginServlet extends HttpServlet { 18 private static final long serialVersionUID = 1L; 19 20 protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{ 21 //フォワード 22 RequestDispatcher dispatcher = request.getRequestDispatcher("WEB-INF/login.jsp"); 23 dispatcher.forward(request, response); 24 } 25 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 26 //リクエストパラメータの取得 27 request.setCharacterEncoding("UTF-8"); 28 String shain_id = request.getParameter("shain_id"); 29 String password = request.getParameter("password"); 30 31 //ログイン処理の実行 32 Login login = new Login(shain_id,password); 33 LoginLogic bo = new LoginLogic(); 34 boolean result = bo.execute(login); 35 36 //ログイン処理の成功、失敗によって処理を分岐 37 if(result) {//ログイン成功 38 //セッションスコープにIDを保存 39 HttpSession session = request.getSession();//セッションスコープの取得 40 session.setAttribute("shain_id", shain_id); 41 42 session.setAttribute("errorMsg", "IDかパスワードが間違っています。"); 43 44 //フォワード 45 RequestDispatcher dispatcher = request.getRequestDispatcher("WEB-INF/list.jsp"); 46 dispatcher.forward(request, response); 47 }else{//ログイン失敗 48 49 //リダイレクトでログイン画面(トップ)まで戻る 50 response.sendRedirect("LoginServlet"); 51 52 } 53 } 54}
login.jsp
1<%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3<!DOCTYPE html> 4<html> 5<head> 6 <title>ログイン画面</title> 7 <meta charset="UTF-8"> 8 <link rel="stylesheet" href="login.css"> 9</head> 10<body> 11 <form action="LoginServlet" method="post" onsubmit = "return checkForm();"> 12 <!--タイトル--> 13 <p class="title">ログイン</p> 14 <!--入力欄--> 15 <table class="ma1"> 16 <tr> 17 <th class="moji1">ID：</th> 18 <th><input type="text" name="shain_id" id="id" oninput="inputNumber(this);" maxlength="6" class="pw2"></th><!--tdだとグレーになるためth--> 19 </tr> 20 <tr> 21 <th class="pw">パスワード：</th> 22 <th><input type="password" name="password" id="pw" oninput="inputPass(this);" maxlength="10" class="pw2"></th> 23 </tr> 24 </table> 25 <!--ログインボタン--> 26 <p class="login"><input type="submit" value="ログイン"></p> 27 <script src="login.js"></script> 28 </form> 29</body> 30</html>
login.js
1/ID文字限定 2function inputNumber(input){ 3 input.value = input.value.replace(/[^0-9]/g,""); 4} 5 6//ID&パスワードが入力されていない場合 7function checkForm(){ 8 var inputCode = document.getElementById("id"); 9 var inputPw = document.getElementById("pw"); 10 if(inputCode.value === ""){ 11 alert("IDを入力してください。"); 12 return false; 13 }else if(inputPw.value === ""){ 14 alert("パスワードを入力してください。"); 15 return false; 16 }else if(inputCode.value != true || inputPw.value != true){ //ログイン失敗アラート 17 alert(errorMsg); 18 } 19 return true; 20} 21 22//パスワード文字限定 23function inputPass(input){ 24 input.value = input.value.replace(/[^0-9][^a-z]/g,""); 25}
試したこと・調べたこと
上記の詳細・結果
調べたところ、サーブレットに｢session.setAttribute("errorMsg", "IDかパスワードが間違っています。");｣と書き、JSPで｢<span class="label label-danger">${message}</span>｣と書き、この文章を取得するというやり方が出てきたので、外部にあるJavaScriptファイルに自分なりにアレンジして、
else if(inputCode.value != true || inputPw.value != true){
alert(errorMsg);
}
と書いてみましたがアラートは表示されず、JSPに直接
<span>${message}</span>
とも書いてみましたがメッセージも表示させることができませんでした。
補足
外部JavaScriptファイルに書いてアラートとして表示させる、というやり方はありますでしょうか？もしあればそちらのやり方を教えていただけると助かります。無いようでしたら他のやり方を教えていただきたいです。
拙い説明ですが、何卒よろしくお願いいたします。
0 コメント