jQuery登錄檔單驗證程式碼例項

antzone發表於2017-04-13
jQuery

本章節分享一段程式碼例項，它實現了簡單的表單驗證小姑。

在文字框或者密碼框的尾部會有提示文字的出現。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body {
  position: absolute;
  top: 25%;
  left: 33%;
}
table {
  color: #666;
}
table tr {
  height: 50px;
}
.state1 {
  color: #aaa;
}
.state2 {
  color: #00b0ff;
}
.state3 {
  color: #EB4F38;
}
.state4 {
  color: #00B694;
}
input[type="submit"] {
  width: 80px;
  height: 30px;
  font-weight: bold;
  border-radius: 15px;
  background-color: #3CbAB7;
  color: #fff;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
  var username = false;
  var password = false;
  var repassword = false;
  var email = false;
  //username
  $('input[name="username"]').focus(function () {
    $(this).parent()
           .siblings()
           .find('span')
           .text('使用者名稱應該在6-20位之間!')
           .removeClass('state1 state4 state3').addClass('state2');
  }).blur(function () {
    var len = $(this).val().length;
    if (len >= 6 && len <= 20 && $(this).val() != '') {
      $(this).parent()
             .siblings()
             .find('span')
             .text('使用者名稱輸入正確!')
             .removeClass('state1 state4 state3').addClass('state4');
      username = true;
    } else {
      $(this).parent()
             .siblings()
             .find('span')
             .text('使用者名稱輸入錯誤,應在6-20位之間!')
             .removeClass('state1 state2 state4')
             .addClass('state3');
    }
  })
 
  //password
  $('input[name="password"]').focus(function () {
    $(this).parent()
           .siblings()
           .find('span')
           .text('密碼6-20位字元,字母開頭,只包含字母數字下劃線!')
           .removeClass()
           .addClass('state2');
  }).blur(function () {
    var reg = /^[a-z | A-Z]\w{5,19}$/;
    if (reg.test($(this).val())) {
      $(this).parent()
             .siblings()
             .find('span')
             .text('密碼輸入正確!')
             .removeClass()
             .addClass('state4');
      password = true;
    }
    else {
      $(this).parent()
             .siblings()
             .find('span')
             .text('密碼輸入錯誤,請重新輸入!')
             .removeClass()
             .addClass('state3');
    }
  })
 
  //repassword
  $('input[name="repassword"]').focus(function () {
    $(this).parent()
           .siblings()
           .find('span')
           .text('請輸入確認密碼!')
           .removeClass()
           .addClass('state2');
  }).blur(function () {
    var reg = /^[a-z | A-Z]\w{5,19}$/;
    if (reg.test($(this).val()) && $(this).val() == $('input[name="password"]').val()) {
      $(this).parent()
             .siblings()
             .find('span')
             .text('確認密碼輸入正確!')
             .removeClass()
             .addClass('state4');
      repassword = true;
    } else {
      $(this).parent()
             .siblings()
             .find('span')
             .text('兩次輸入不一致!')
             .removeClass()
             .addClass('state3');
    }
  })
  //email
  $('input[name="email"]').focus(function () {
    $(this).parent()
           .siblings()
           .find('span')
           .text('請輸入正確的EMAIL格式!')
           .removeClass()
           .addClass('state2');
  }).blur(function () {
    var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
    if (reg.test($(this).val())) {
      $(this).parent()
             .siblings()
             .find('span')
             .text('郵箱輸入正確!')
             .removeClass()
             .addClass('state4');
      email = true;
    } else {
      $(this).parent()
             .siblings()
             .find('span')
             .text('郵箱輸入錯誤，請輸入重新輸入!')
             .removeClass()
             .addClass('state3');
    }
  })
 
  //提交
  $('input[type="submit"]').click(function () {
    if (username && password && repassword && email) {
      $('form').submit();
    } else {
      return alert('您未填寫齊全，或填寫格式錯誤!');
    }
  });
})
</script>
</head>
<body>
  <form>
    <table>
      <tr>
        <td>用 戶 名：</td>
        <td><input type="text" name="username" /></td>
        <td><span class="state1">請輸入使用者名稱</span></td>
      </tr>
      <tr>
        <td>密  碼：</td>
        <td><input type="password" name="password" /></td>
        <td><span class="state1">請輸入密碼</span></td>
      </tr>
      <tr>
        <td>確認密碼：</td>
        <td><input type="password" name="repassword" /></td>
        <td><span class="state1">請輸入確認密碼</span></td>
      </tr>
      <tr>
        <td>郵  箱：</td>
        <td><input type="email" name="email" /></td>
        <td><span class="state1">請輸入郵箱</span></td>
      </tr>
      <tr>
        <td></td>
        <td><input type="submit" value="提  交" /></td>
        <td></td>
      </tr>
    </table>
  </form>
</body>
</html>

相關文章