Question

所以我写了一个自定义的javascript事件来处理用户列表中是否存在用户名。如果没有用户匹配，则会很好地记录没有该名称的用户。但是问题是当用户匹配时，if和else同时运行。代码如下所示：用户键入他的用户名，并且一旦单击密码字段，就会触发一个事件来检查用户名是否存在。我是javascript新手，只是想弄清楚自定义事件的感谢。

下面是我的代码：

var user_list = [
 {
 username:"john",
 name:"john.doe",
 last_seen:"2mins ago"
 },
 {
 username:"mary",
 name:"Mary marta",
 last_seen:"2hrs ago"
 },
 {
 username:"susan",
 name:"susy457",
 last_seen:"45mins ago"
 },
 {
 username:"moses",
 name:"moe23",
 last_seen:"45mins ago"
 },  
];
var password = document.getElementById("passwordtext");
password.addEventListener('click', checkPassword);
//Custom event to grab username field when the user is about to type the         password
var users = document.getElementById('usertext');
users.addEventListener('trigger', function(e){
   var display = e.target.value;//e.target.value
   if(display === ""){
      //console.log('empty string..');
   }else{
       for(var i = 0; i < user_list.length; i++){
           if(user_list[i].username === display){
               console.log('user found..')
           }
           else{
               console.log('user not found!');
           }
       };
   };
    event.preventDefault();
});
function checkUser(){
  var event = new CustomEvent('trigger');
  users.dispatchEvent(event);    
};
function checkPassword(e){
  checkUser()
  passcode = e.target.value;
  //console.log(e.target.value);
  event.preventDefault();
};

编辑：这是我的html表单代码

<form>
              <div class="form-row">
                <div class="col">
                  <input type="text" name="usertext" id ="usertext" class="form-control"placeholder="Email or username"/>
                </div>
                <div class="col">
                  <input type="password" id ="passwordtext" class="form-control" placeholder="password"/>
                </div>
                <div class="col-auto">
                  <a class="btn btn-primary" id="id-login" href="#" role="button">login</a>
                </div>
              </div>
            </form>

Answer 1

在for循环之外获取您的支票。看到这个例子。

但是，当您只是在Javascript对象中搜索用户的存在而不是循环对象时，还有更简便的方法。

var user_list = [{
    username: "john",
    name: "john.doe",
    last_seen: "2mins ago"
  },
  {
    username: "mary",
    name: "Mary marta",
    last_seen: "2hrs ago"
  },
  {
    username: "susan",
    name: "susy457",
    last_seen: "45mins ago"
  },
  {
    username: "moses",
    name: "moe23",
    last_seen: "45mins ago"
  },
];
var password = document.getElementById("passwordtext");
password.addEventListener('click', checkPassword);
//Custom event to grab username field when the user is about to type the         password
var users = document.getElementById('usertext');
users.addEventListener('trigger', function(e) {
  var display = e.target.value; //e.target.value
  if (display === "") {
    //console.log('empty string..');
  } else {
    var userFound = false;
    for (var i = 0; i < user_list.length; i++) {
      if (user_list[i].username === display) {
        userFound = true;
        break;
      }
    };
    if (userFound) {
      console.log('user found!');
    } else {
      console.log('user not found!');
    }
  };
  event.preventDefault();
});

function checkUser() {
  var event = new CustomEvent('trigger');
  users.dispatchEvent(event);
};

function checkPassword(e) {
  checkUser()
  passcode = e.target.value;
  //console.log(e.target.value);
  event.preventDefault();
};

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" name="usertext" id="usertext" class="form-control" placeholder="Email or username" />
    </div>
    <div class="col">
      <input type="password" id="passwordtext" class="form-control" placeholder="password" />
    </div>
    <div class="col-auto">
      <a class="btn btn-primary" id="id-login" href="#" role="button">login</a>
    </div>
  </div>
</form>

自定义事件记录倍数-Javascript

1 个答案: