javascript - 仅当变量( bool 值)发生变化时才调用 javascript/jquery 函数

Question

目前我的元素包含一个登录表单，用于检查用户是否在用户名输入中输入了 3 个或更多字符，在密码输入中输入了 6 个或更多字符。

当用户名包含 3 个或更多字符时，它会将变量设置为 true(默认为 false)，密码也是如此。只有当它们都为真时，登录按钮才可用。是否禁用它不是问题，我想要改变颜色。当两者都为假或其中之一为真时，它获得黑色 rgba 值，当两者都为真时，它获得绿色 rgba 颜色。

代码在每次更改后检查输入字段，因此它执行多次更改 css 的功能。这会向 css 发送垃圾邮件并使代码的目的失败。

我没有想法(也没有精力，现在是凌晨 2:08)只是想知道是否有任何解决方案可以解决我的问题。

我的代码在下面。

var sheet = document.styleSheets[0];
var un = document.getElementById('un');
var pw = document.getElementById('pw');
var unCheck = false;
var pwCheck = false;
var bCheck = false;

$('#un').bind('input', function() {
una = un.value;
if (/^\s*$/.test(una)){
    //input is empty or contains white space
}
else{

    //input contains character
  if(una.length >= 3)
    {
        //input contains 3 characters or more
        unCheck = true;
    }
  else
    {
        unCheck = false;
    }
        checkUnPw();
 }
 })

 $('#pw').bind('input', function() {
  pwo = pw.value;
  if (/^\s*$/.test(pwo)){
    //input is empty or contains white space
 }
 else{
 //input contains character

  if(pwo.length >= 6)
    {
        //input contains 6 characters or more
      pwCheck = true;
    }
  else
    {
        pwCheck = false;
    }
        checkUnPw();
 }
 })

 function checkUnPw() {
 if(unCheck == true && pwCheck == true)
 {
  sheet.insertRule(".box button { background: rgba(46,204,113,1)!important;       }", 1);
  document.getElementById("loginButton").disabled = false;
 }
else
{
  sheet.insertRule(".box button { background: rgba(0,0,0,0.05)!important;     }", 1);
  document.getElementById("loginButton").disabled = true;
}             
}

Answer 1

您可以使用 jQuery 来实现这一点。我使用 Bootstrap 让它变得漂亮。

JS代码:

$(document).ready(function (){
    validate();
    $('#un, #pw').keyup(validate);
});

function validate(){
    if ($('#un').val().length   >=   3   &&
        $('#pw').val().length  >=   6) {
        $("#loginButton").prop("disabled", false);
        $("#loginButton").css("background", "rgba(46,204,113,1)");

    }
    else {
        $("#loginButton").prop("disabled", true);
        $("#loginButton").css("background", "rgba(0,0,0,0.05)");

    }
}

我使用“KeyUp”事件来检查用户名(至少 3 个字符)和密码(至少 6 个字符)

validate 函数用于检查基本条件。

HTML 代码:

<div class="container">

      <form class="form-signin">
        <h2 class="form-signin-heading">Please sign in</h2>
        <label for="un" class="sr-only">User Name</label>
        <input type="email" id="un" class="form-control" placeholder="User Name" required autofocus>
        <label for="pw" class="sr-only">Password</label>
        <input type="password" id="pw" class="form-control" placeholder="Password" required>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>
        <button id="loginButton" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      </form>

    </div>

CSS 代码:

body {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #eee;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

这是 JS fiddle : https://jsfiddle.net/Manoj85/wnw4j27u/

希望这对您有所帮助。