焦點離開立刻進行表單驗證程式碼例項

antzone發表於2017-03-15

當前表單驗證的的形式有多種多樣，比較人性化的一種是，當表單元素失去焦點的時候就會立刻進行合法性驗證，下面就通過程式碼例項介紹一下如何實現此功能，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  font-size:13px;
}
/*元素初始化樣式*/ 
.divInit{
  width:390px;
  height:55px;
  line-height:55px;
  padding-left:20px;
}
.txtInit{
  border:solid 1px #666;
  padding:3px;
  background-image:url('Images/bg_email_input.gif');
}
.spnInit{
  width:179px;
  height:40px;
  line-height:40px;
  float:right;
  margin-top:8px;
  padding-left:10px;
  background-repeat:no-repeat;
}
/*元素丟失焦點樣式*/ 
.divBlur{
  background-color:#FEEEC2;
}
.txtBlur{
  border:solid 1px #666;
  padding:3px;
  background-image:url('Images/bg_email_input2.gif');
}
.spnBlur{
  background-image:url('Images/bg_email_wrong.gif');
}
.divFocu{
  background-color:#EDFFD5;
} /*div獲取焦點樣式*/
.spnSucc{
  background-image:url('Images/pic_Email_ok.gif');
  margin-top:20px;
} /*驗證成功時span樣式*/
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
  $("#txtEmail").trigger("focus"); 
  $("#txtEmail").focus(function(){ 
    $(this).removeClass("txtBlur").addClass("txtInit"); 
    $("#email").removeClass("divBlur").addClass("divFocu"); 
    $("#spnTip").removeClass("spnBlur").removeClass("spnSucc").html("請輸入您常用郵箱地址！"); 
  }); 
  $("#txtEmail").blur(function(){ 
    var vTxt=$("#txtEmail").val();
    if(vTxt.length==0){ 
      $(this).removeClass("txtInit").addClass("txtBlur"); 
      $("# email").removeClass("divFocu").addClass("divBlur"); 
      $("#spnTip").addClass("spnBlur").html("郵箱地址不能為空！"); 
    } 
    else { 
   //如果不正確 
      if(!chkEmail(vTxt)){
        $(this).removeClass("txtInit").addClass("txtBlur"); 
        $("#email").removeClass("divFocu").addClass("divBlur"); 
        $("#spnTip").addClass("spnBlur").html("郵箱格式不正確！"); 
      } 
      else { //如果正確 
        $(this).removeClass("txtBlur").addClass("txtInit"); 
        $("#email").removeClass("divFocu"); 
        $("#spnTip").removeClass("spnBlur").addClass("spnSucc").html(""); 
      } 
    } 
  }); 
  function chkEmail(strEmail){ 
    var vChk=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; 
    if(!vChk.test(strEmail)){ 
      return false; 
    } 
    else { 
      return true; 
    } 
  } 
}); 
</script>
</head>
<body>
<form id="form1" action="#">
<div id="email" class="divInit">
郵箱:<span id="spnTip" class="spnInit"></span>
<input type="text" id="txtEmail" class="txtInit" />
</div>
</form>
</body>
</html>

以上程式碼實現了我們的要求，文字框失去焦點就可以立馬進行表單驗證，下面介紹一下它的實現過程。

上面程式碼缺少所需要的背景圖片，完整的程式碼執行效果如下:

a:3:{s:3:\"pic\";s:43:\"portal/201703/15/093407yya770cy804hq85a.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼圖片就是驗證的三種狀態，一看就明白了，這裡就不多介紹了，下面看具體實現過程。

1.$(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

2.$("#txtEmail").trigger("focus")，使文字框獲取焦點，也就是說文件結構載入完畢之後預設使其獲取焦點。

3.$("#txtEmail").focus(function(){})，為文字框註冊focus事件處理函式。

相關文章