表單驗證失敗出現閃動

admin發表於2019-01-18

當表單驗證不通過的時候，通常會給出一定的提示。

本章節也來分享一個提示效果，比如當文字框輸入內容的格式不通過的時候會出現抖動效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
.main {
  width: 600px;
  background: #fff;
  margin: 0 auto;
  padding: 20px 0;
  border: solid #ddd;
  border-width: 0 1px;
  min-height: 800px;
}
input.box {
  width: 240px;
  border: 1px solid #ddd;
  height: 26px;
  line-height: 26px;
  font-weight: 900;
  color: #999;
  display: block;
  background: #fff;
  text-align: left;
  margin: 20px auto;
}
input.red {
  border: 1px solid #d00;
  background: #ffe9e8;
  color: #d00;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
function shake(ele, cls, times) {
  var i = 0;
  var t = false;
  var o = ele.attr("class") + " ";
  var c = "";
  var times = times || 2;
 
  if (t) return;
  t = setInterval(function () {
    i++;
    c = i % 2 ? o + cls : o;
    ele.attr("class", c);
    if (i ==  times) {
      clearInterval(t);
      ele.removeClass(cls);
    }
  }, 200);
};
$(function () {
  $("#mail").blur(function () {
    if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test($(this).val())) {
      shake($(this), "red", 8);
    }
  });
});
</script>
</head>
<body>
<div class="main">
  <input class="box" type="text" id="mail"/>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.function shake(ele, cls, times) ，實現元素的抖動效果，ele規定要抖動的元素，cls規定一個樣式類，times規定抖動次數。

（2）.var i = 0，宣告一個變數並賦初值為0，這是一個標識，後面會用到。

（3）.var t = false，宣告一個變數並賦初值為false，用來儲存定時器函式的標識。

（4）.var o = ele.attr("class") + " "，獲取元素的class屬性值，並且在後面新增一個空格，為再新增一個樣式類做準備，比如class="a b"這種形式。

（5）.var c = ""，宣告變數並賦值為空，用來儲存樣式類字串。

（6）.var times = times || 2，如果傳遞times引數，那麼就使用times，否則使用預設值2。

（7）.if (t) return，如果不為false，那麼就直接跳出函式。

（8）.t = setInterval(function () {},200)，一個定時器函式的執行。

（9）.i++，自增。

（10）.c = i % 2 ? o + cls : o，如果i為偶數，那麼樣式類不包括red，否則包括。

（11）.ele.attr("class", c)，設定元素的class樣式類。

（12）.if (i ==  times) {

  clearInterval(t);

  ele.removeClass(cls);

},如果達到抖動的次數，那麼就停止定時器的執行，並且恢復原來的樣式。

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

（14）.$("#mail").blur(function () {})，為指定元素註冊blur事件處理函式。

（15）.if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test($(this).val())) {

  shake($(this), "red", 3);

}，如果輸入的內容不符合郵箱格式，那麼就進行抖動。

二.相關閱讀:

（1）.attr()方法參閱jQuery attr()一章節。

（2）.setInterval()方法參閱JavaScript setInterval()一章節。

（3）.clearInterval()方法參閱JavaScript clearInterval()一章節。

（4）.removeClass()方法參閱jQuery removeClass()一章節。

相關文章