學生管理表單驗證練手（正則表示式方式）
阿新 • • 發佈：2018-12-16
學習菜鳥的正則表示式時看到的，拿來練習做了些許修改
話不多說，直接上圖
程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> <link rel="stylesheet" href="style.css"> <title>test</title> </head> <body> <div class="container"> <div class="row"> <div class="col-12"> <form action="" name="myform" onsubmit="myfunc()"> <table class="table table-bordered"> <thead> <tr class="text-center"> <th colspan=2 class="text-success display-4">學生管理表單</th> </tr> </thead> <tbody> <tr> <td> <p class="text-primary">姓名:</p> <input type="text" id="sname"> <p>(中文)</p> </td> <td> <p class="text-primary">學號:</p> <input type="text" id="sno"> <p>(8位數字)</p> </td> </tr> <tr> <td> <p class="text-primary">郵箱:</p> <input type="text" id="email"> </td> <td> <p class="text-primary">電話:</p> <input type="text" id="tel"> </td> </tr> <tr class="text-center"> <td colspan="2"> <button type="submit" class="btn btn-danger">提交</button> </td> </tr> </tbody> </table> </form> </div> </div> </div> <script> /*是否帶有小數*/ function isDecimal(str) { var objRegExp = /^\d+\.\d+$/; return objRegExp.test(str); } /*校驗是否中文名稱組成 */ function ischina(str) { var reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/; /*定義驗證表示式*/ return reg.test(str); /*進行驗證*/ } /*校驗是否全由8位數字組成 */ function isStudentNo(str) { var reg = /^[0-9]{8}$/; /*定義驗證表示式*/ return reg.test(str); /*進行驗證*/ } /*校驗電話碼格式 */ function isTelCode(str) { var reg = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/; return reg.test(str); } /*校驗郵件地址是否合法 */ function IsEmail(str) { var reg = /^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})$/; return reg.test(str); } function myfunc() { if (!isStudentNo(document.getElementById("sno").value)) { alert("學生編號是8位數字"); document.getElementById("sno").focus(); return false; } if (!ischina(document.getElementById("sname").value)) { alert("學生姓名必須填寫中文"); document.getElementById("sname").focus(); return false; } if (!IsEmail(document.getElementById("email").value)) { alert("郵箱地址錯誤"); document.getElementById("email").focus(); return false; } if (!isTelCode(document.getElementById("tel").value)) { alert("電話號碼錯誤"); document.getElementById("tel").focus(); return false; } /*執行到這裡說明驗證通過返回true submit提交按鈕起作用提交表單*/ alert("提交成功") return false; // 這邊設定禁止提交，實際專案需要改為 true } </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script> </body> </html>