在開發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;
}
}
});
$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
留言
張貼留言