jQuery-E-mail輸入欄位格式驗證-教學撰寫:徐嘉裕Neil hsu

在開發Xoops模組一定會遇到填寫表單的功能，以前都是透過表單post後由後端接受變數再進行PHP正則表達式進行判斷，如正確存入資料表，錯誤則返回頁面，像這樣的code

$email = $_POST["email"];
if(!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$email)) {
 redirect_header(XOOPS_URL,0 , _MD_NOMAIL);
}

但這樣user在介面操作上不是很便利也不友善，因為每填錯一個欄位就要返回頁面再從填一次，所以想說寫一個jQuery前端判斷E-mail格式的code來解決的問題，當然後端判斷還是要的，怕有心人關了瀏覽器的js功能存心搗蛋，雙重保險總是好的，以下為前端驗證E-mail格式的code

html結構

 <input type='text' id='email' class=' form-control' name='email' value='' placeholder='請輸入電子信箱'>


然後再網站佈景或是模組頁面的js檔中輸入以下code



$(document).ready(function(){

//E-MAIL格式檢查

$("body").on("change", "#email", function (){

$Emailchecking=IsEmail($("#email").val());


if($Emailchecking==false){

alert("請填寫正確的E-MAIL格式");

$("#email").blur(); //離開焦點

}

})

function IsEmail(email) {

var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

if(!regex.test(email)) {

return false;

}else{

return true;

}

}

});

由於有設了.blur()離開焦點，所以當輸入錯誤時欄位會自動離開焦點，在次輸入又觸發.change()取得焦點，所以就能連續驗證，

實際測試看看

像下面的欄位隨便輸入12345

離開焦點後立刻跳出【請填寫正確的E-MAIL格式】訊息

如填寫正確的E-MAIL格式則不會跳出警告視窗

這樣就完成E-MAIL表單驗證功能，當然還能再延伸開發，例如吧送出按鈕預設為.attr('disabled', true);，也就是無法送出，在收到E-MAIL驗證回傳值為true改為.attr('disabled', false);，這樣就更多層一層保險了!!

教學撰寫：徐嘉裕 Neil hsu