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

留言

這個網誌中的熱門文章

Xoops免費佈景:neilambilight2.5正式版釋出-佈景設計開發:徐嘉裕Neil hsu

在CentOS7上安裝XAMPP並設定允許外部連線phpmyadmin的方法-教學撰寫:徐嘉裕Neil hsu

jquery.datepicker下拉月曆只顯示年-月的設定方法-教學撰寫:徐嘉裕Neil hsu