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个字符）

验证功能是检查基本条件的功能。

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小提琴： https://jsfiddle.net/Manoj85/wnw4j27u/

希望这有帮助。

仅当变量（布尔值）更改时才调用javascript / jquery函数

1 个答案: