110年地方特考四等程式設計概要
|
四、請撰寫一支包含 Javascript 及 HTML 程式碼的checkLegalForVaccineShot.html 程式，執行後可以呈現如下的頁面，其中「身分證字號」、「健保卡卡號」、及「手機號碼」輸入欄位的長度由 HTML 控制，資料內容則使用 Javascript 檢查，資料內容檢查後，在對應的資料輸入位置右方顯示，「請輸入正確的……」或 “OK” 表示檢查的結果。（20分） 註：身分證字號由一碼的英文字母及九碼的數字所組成，如 A123456789 註：健保卡卡號由三組四碼的數字所組成，如1234-5678-1234 註：手機號碼由09加上八碼的數字所組成，如0912345678
|
答：
checkLegalForVaccineShot.html：
執行結果：
|
<!DOCTYPE html> <html> <body> <head> <title>預約平台身分驗證</title> </head> <style> /* 定義表格的樣式 */ table { border: 5px solid black; /* 給表格外部加上 2px 的黑色邊框 */ border-collapse: collapse; /* 使內部沒有邊框 */ } /* 確保儲存格和表格行之間沒有邊框 */ td, tr { border: none; padding: 10px; /* 給儲存格加上內間距 */ } </style> <form> <table align="center" border = 5> <thead> <tr> <th align="left"> <font size="37">預約平台身分驗證</font> </th> </tr> </thead> <tr> <td align="left"> <font size="5">身分證字號：</font> <input type="text" id="idNumber" maxlength="20" size = 10"> <span id="idResult"></span> </td> </tr> <tr> <td align="left"> <font size="5">健保卡卡號：</font> <input type="text" id="healthCard1" maxlength="10" size = 4>- <input type="text" id="healthCard2" maxlength="10" size = 4>- <input type="text" id="healthCard3" maxlength="10" size = 4> <span id="healthResult"></span> </td> </tr> <tr> <td align="left"> <font size="5">手機號碼：</font> <input type="text" id="phone" maxlength="20" size = 10> <span id="phoneResult"></span> </td> </tr> <tr> <td align="left"> <input type="button" name="SubmitButton" value="Submit" onClick="check( )"> </td> </tr> </table> </form> <script> /* 檢查身分證字號 */ function validateID( ) { // 身分證字號由一碼的英文字母及九碼的數字所組成，例如 A123456789 const idPattern = /^[A-Za-z][0-9]{9}$/; const idValue = document.getElementById('idNumber').value; const idResult = document.getElementById('idResult'); if (idPattern.test(idValue)) { idResult.textContent = "OK"; } else { idResult.textContent = "請輸入正確的身分證字號"; } } /* 檢查健保卡卡號 */ function validateHealthCard(healthCard) { // 健保卡卡號由三組四碼的數字所組成，例如1234-5678-1234 const healthPattern = /^[0-9]{4}$/; const healthValue = document.getElementById(healthCard).value; const healthResult = document.getElementById('healthResult'); if (healthPattern.test(healthValue)) { return true; } else { return false; } } /* 檢查手機號碼 */ function validatePhone( ) { // 手機號碼由09加上八碼的數字所組成，例如0912345678 const phonePattern = /^09[0-9]{8}$/; const phoneValue = document.getElementById('phone').value; const phoneResult = document.getElementById('phoneResult'); if (phonePattern.test(phoneValue)) { phoneResult.textContent = "OK"; } else { phoneResult.textContent = "請輸入正確的手機號碼"; } } function check( ) { validateID( ); const check1 = validateHealthCard('healthCard1'); const check2 = validateHealthCard('healthCard2'); const check3 = validateHealthCard('healthCard3'); if (check1 == false || check2 == false || check3 == false) { healthResult.textContent = "請輸入正確的健保卡卡號"; } else { healthResult.textContent = "OK"; } validatePhone( ); } </script> </body> </html> |
執行結果：
留言列表
國考資訊處理解答 (7)
