jQuery使用者登入和登錄檔單驗證程式碼例項

螞蟻小編發表於2017-04-14
jQuery

本章節分享一段簡單的程式碼例項，它實現了使用者登入或者註冊之類表單的驗證效果。

雖然簡單，但是可以滿足一些簡單的實際需求，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body {
  font-family: Arial, "宋體", Lucida, Verdana, Helvetica, sans-serif;
  font-size: 12px;
  color: #333;
  line-height: 150%;
  background: #f2f2f2;
}
.hide {
  display: none;
}
.focus, .error {
  color: #e4393c;
  line-height: 36px;
  height: 36px;
  position: absolute;
  top: 0px;
  width: 260px;
  padding: 0 5px;
  background: #FFEBEB;
  border: 1px solid #ffbdbe;
}
.error span, .focus span {
  padding: 5px 0;
  line-height: 13px;
  display: block;
}
.focus {
  color: #666;
  width: 260px;
  line-height: 36px;
  background: #f7f7f7;
  border: 1px solid #dddddd;
}
.regist {
  width: 990px;
  padding: 0;
  margin: 0 auto;
  zoom: 1;
}
.mc {
  padding: 30px 0 20px;
  border: solid #dddddd;
  border-width: 0px 1px 1px;
  background: #FFF;
  overflow: hidden;
  zoom: 1;
  border-width: 0px 1px 1px;
}
.form {
  float: left;
  width: 750px;
  font-size: 12px;
}
.form label, .form input, .form select, .form textarea, .form button, .form .label {
  float: left;
  font-size: 12px;
}
.item {
  padding-top: 9px;
  height: 60px;
  line-height: 34px;
  position: relative;
  z-index: 1;
}
.label {
  float: left;
  width: 190px;
  text-align: right;
  font-size: 14px;
  color: #999;
  padding-right: 10px;
}
.input {
  float: left;
  position: relative;
  width: 270px;
  overflow: visible;
}
.text {
  float: none;
  width: 275px;
  height: 37px;
  line-height: 32px;
  border: 1px solid #cccccc;
  font-size: 14px;
  font-family: arial, "宋體";
  overflow: hidden;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
 <script>
$(document).ready(function () {
  // 1. 使用者名稱
  $("#username").focus(function () {
    /* 獲取焦點
    var username_msg = $("#username_msg");
    username_msg.text("4-20位字元，支援英文、數字及'-'、'_'組合");
    username_msg.attr("class","focus");
    */
    elemFocus("username_msg", "4-20位字元，支援英文、數字及'-'、'_'組合");
 
  }).blur(userValidator);
  // 2. 密碼
  $("#password").focus(function () {
    elemFocus("pwd_msg", "6-20位字元，可使用字母、數字的組合");
  }).blur(pwdValidator);
  // 3. 確認密碼
  $("#pwdRepeat").focus(function () {
    elemFocus("pwdRepeat_msg", "6-20位字元，可使用字母、數字的組合");
  }).blur(pwdRepeatValidator);
  // 4. Email
  $("#mail").focus(function () {
    elemFocus("mail_msg", "完成驗證後，可以使用該郵箱登入和找回密碼");
  }).blur(emailValidator);
  $("#registsubmit").click(function () {
    return validateForm();
  })
})
 
// 定義函式 - 通用的資訊提示
function elemFocus(eleId, text) {
  var ele_msg = $("#" + eleId);
  ele_msg.text(text);
  ele_msg.attr("class", "focus");
}
 
// 定義驗證使用者名稱的函式
function userValidator() {
  // 獲取使用者名稱輸入的值
  var value = $("#username").val();
  // 獲取用於顯示提示資訊的元素
  var username_msg = $("#username_msg");
  // 驗證邏輯
  if (value == "" || value == null) {
    username_msg.text("使用者名稱不能為空");
    username_msg.attr("class", "error");
    return false;
  } else if (value.length < 4 || value.length > 20) {
    username_msg.text("使用者名稱的長度不正確");
    username_msg.attr("class", "error");
    return false;
  } else if (!/^[a-zA-Z0-9-_]{4,20}$/.test(value)) {
    username_msg.text("使用者名稱輸入不正確");
    username_msg.attr("class", "error");
    return false;
  }
  // 驗證通過修改正確樣式
  if (!username_msg.hasClass("hide")) {
    username_msg.text("");
    username_msg.attr("class", "hide");
  }
  return true;
}
// 定義驗證密碼的函式
function pwdValidator() {
  var value = $("#password").val();
  var pwd_msg = $("#pwd_msg");
  if (value == "" || value == null) {
    pwd_msg.text("密碼不能為空");
    pwd_msg.attr("class", "error");
    return false;
  } else if (value.length < 6 || value.length > 20) {
    pwd_msg.text("密碼的長度不正確");
    pwd_msg.attr("class", "error");
    return false;
  } else if (!/^[a-zA-Z0-9]{6,20}$/.test(value)) {
    pwd_msg.text("密碼輸入不正確");
    pwd_msg.attr("class", "error");
    return false;
  }
  if (!pwd_msg.hasClass("hide")) {
    pwd_msg.text("");
    pwd_msg.attr("class", "hide");
  }
  return true;
}
// 定義確認密碼驗證的函式
function pwdRepeatValidator() {
  var value = $("#pwdRepeat").val();
  var pwdRepeat_msg = $("#pwdRepeat_msg");
  var pwd = $("#password").val();
  if (value == "" || value == null) {
    pwdRepeat_msg.text("密碼不能為空");
    pwdRepeat_msg.attr("class", "error");
    return false;
  } else if (value.length < 6 || value.length > 20) {
    pwdRepeat_msg.text("密碼的長度不正確");
    pwdRepeat_msg.attr("class", "error");
    return false;
  } else if (!/^[a-zA-Z0-9]{6,20}$/.test(value)) {
    pwdRepeat_msg.text("密碼輸入不正確");
    pwdRepeat_msg.attr("class", "error");
    return false;
  } else if (value != pwd) {
    pwdRepeat_msg.text("兩次密碼輸入不一致");
    pwdRepeat_msg.attr("class", "error");
    return false;
  }
  if (!pwdRepeat_msg.hasClass("hide")) {
    pwdRepeat_msg.text("");
    pwdRepeat_msg.attr("class", "hide");
  }
  return true;
}
// 定義Email驗證的函式
function emailValidator() {
  var value = $("#mail").val();
  var email_msg = $("#mail_msg");
  if (value == "" || value == null) {
    email_msg.text("Email不能為空");
    email_msg.attr("class", "error");
    return false;
  } else if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)) {
    email_msg.text("Email格式不正確");
    email_msg.attr("class", "error");
    return false;
  }
  if (!email_msg.hasClass("hide")) {
    email_msg.text("");
    email_msg.attr("class", "hide");
  }
  return true;
}
function validateForm() {
  if (!userValidator() || !pwdValidator() || !pwdRepeatValidator() || !emailValidator()) {
    return false;
  }
  return true;
}
</script>
</head>
<body>
  <div class="regist">
    <div class="mc">
      <form id="personRegForm" class="form" action="login.html" method="post">
        <div class="item">
          <span class="label">使用者名稱：</span>
          <div class="input">
            <input type="text" id="username" name="username" class="text">
 
            <label id="username_msg" class="hide"></label>
          </div>
        </div>
        <div class="item">
          <span class="label">請設定密碼：</span>
          <div class="input">
            <input type="password" id="password" name="password" class="text">
 
            <label id="pwd_msg" class="hide"></label>
          </div>
        </div>
        <div class="item">
          <span class="label">請確認密碼：</span>
          <div class="input">
            <input type="password" id="pwdRepeat" name="pwdRepeat" class="text">
 
            <label id="pwdRepeat_msg" class="hide"></label>
          </div>
        </div>
        <div class="item">
          <span class="label">驗證郵箱：</span>
          <div class="input">
            <input type="text" id="mail" name="mail" class="text">
 
            <label id="mail_msg" class="hide"></label>
          </div>
        </div>
        <div class="item">
          <span class="label"> </span>
          <input type="submit" class="btn-img" id="registsubmit" value="立即註冊" />
        </div>
      </form>
    </div>
  </div>
</body>
</html>

相關文章