今回は、「Javaスクリプトでチェックする」です。
入力チェックは、ユーザビリティやサーバー負荷の低減のため、JavaScriptで行うことがよくあります。
ただし、あくまで簡易的なチェックなので、最終的にはサーバー側（Java）でチェックをしましょう。
■動画はこちら
■動画で使用しているソースコード
ソースコードが多いので、主要なコードのみ載せています。
他に欲しいソースコードがありましたら、youtubeのコメント欄へどうぞ。
JSP（in.jsp）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>都道府県追加</title> <style> table td { vertical-align: top; } .errMsg {color: red;} </style> <script> function checkForm() { const b1 = checkTodofukenCode(); const b2 = checkTodofukenName(); const b3 = checkJinkou(); return b1 && b2 && b3; } function checkTodofukenCode() { //都道府県コード //メッセージをクリア document.getElementById("errMsg_txtTodofukenCode").innerHTML = ""; //チェック const todofukenCode = document.getElementById("txtTodofukenCode").value; if( checkRequired(todofukenCode) == false ) { //必須 document.getElementById("errMsg_txtTodofukenCode").innerHTML = "都道府県コードを入力してください"; return false; } if(todofukenCode.length != 2){ //2桁（固定） document.getElementById("errMsg_txtTodofukenCode").innerHTML = "都道府県コードは２文字で入力してください"; return false; } if( checkNumber(todofukenCode) == false ){ //数値 document.getElementById("errMsg_txtTodofukenCode").innerHTML = "都道府県コードは数字で入力してください"; return false; } if( todofukenCode === "00" || todofukenCode === "99" ){ //00,99を除く document.getElementById("errMsg_txtTodofukenCode").innerHTML = "都道府県コードは01から98の数字を入力してください"; return false; } return true; } function checkTodofukenName() { //都道府県名 //メッセージをクリア document.getElementById("errMsg_txtTodofukenName").innerHTML = ""; //チェック const todofukenName = document.getElementById("txtTodofukenName").value; if( checkRequired(todofukenName) == false ) { //必須 document.getElementById("errMsg_txtTodofukenName").innerHTML = "都道府県名を入力してください"; return false; } if( checkLength(todofukenName,4) == false ){ //文字数が4文字以内 document.getElementById("errMsg_txtTodofukenName").innerHTML = "都道府県名は４文字以内で入力してください"; return false; } return true; } function checkJinkou() { //人口 //メッセージをクリア document.getElementById("errMsg_txtJinkou").innerHTML = ""; //チェック const jinkou = document.getElementById("txtJinkou").value; if( checkRequired(jinkou) == false ) { //必須 document.getElementById("errMsg_txtJinkou").innerHTML = "人口を入力してください"; return false; } if( checkNumber(jinkou) == false ){ //数字 document.getElementById("errMsg_txtJinkou").innerHTML = "人口は数字を入力してください"; return false; } return true; } function checkRequired(val){ if(val == ""){ return false; } return true; } function checkNumber(val){ const i = parseInt(val); if( isNaN(i) ){ return false; } return true; } function checkLength(val,digit){ if(val.length <= digit){ return true; } return false; } </script> </head> <body> <h2>都道府県追加</h2> <form action="./sv2" method="post" onsubmit="return checkForm();"> <table> <tr> <td>都道府県コード</td> <td> <input type="text" id="txtTodofukenCode" name="txtTodofukenCode" /> <div id="errMsg_txtTodofukenCode" class="errMsg"></div> </td> </tr> <tr> <td>都道府県名</td> <td> <input type="text" id="txtTodofukenName" name="txtTodofukenName" /> <div id="errMsg_txtTodofukenName" class="errMsg"></div> </td> </tr> <tr> <td>人口</td> <td> <input type="text" id="txtJinkou" name="txtJinkou" /> <div id="errMsg_txtJinkou" class="errMsg"></div> </td> </tr> </table> <br /> <input type="submit" value="追加" /> </form> </body> </html> |
