在事件方法中调用 JS 函数

Question

我希望我不是在重复一个问题，但我四处搜索并找不到帮助所以我想我应该直接问，我还是个初学者，这是我 class 的作业所以请尽可能彻底

我正在尝试创建一个表单，当用户点击另一个字段时，它会检查他在第一个字段中输入的内容是否符合网站的要求，而无需点击输入或提交按钮。

这是 HTML 文件。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="test.js"></script>  
<script>

$(document).ready(function(){
    $("div.ID").focusin(function(){
        $(this).css("background-color", "#FFFFCC");
    });
    $("div.ID").focusout(function(){
        $(this).css("background-color", "#FFFFFF");
        userid_validation(userid,5,12);

    });
});
</script>
</head>
<body>

<div class="ID" >
  User ID: <input type="text" name="userid" size="12" />
 </div>

 <div class="pass">
 Password: <input type="text" name="psw" size="12" />
 </div>

</body>
</html>

这是 JS 文件

function userid_validation(userid,mx,my)  
{  
var uid_len = userid.value.length;  

if (uid_len == 0 || uid_len >= my || uid_len < mx)  
{  

alert("User Id should not be empty / length be between "+mx+" to "+my);  

//uid.focus();  
return false;  
}  

return true;  
}

我很可能做错了什么，但我不知道是什么。提前致谢！

Answer 1

您需要对输入元素应用 focusin 和 foucsout。目前您已经在 div 上应用了它。你在调用以下函数时也有代码错误，

userid_validation(userid, 5, 12); // userid not defined.

请检查这是否有效。

function userid_validation(userid, min, max) {
  var uid_len = userid.length;

  if (uid_len == 0 || uid_len > max || uid_len < min) {

    alert("User Id should not be empty / length be between " + min+ " to " + max);

    //uid.focus();  
    return false;
  }

  return true;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="test.js"></script>
  <script>
    $(document).ready(function() {
      $("div.ID").find('input').focusin(function() {
        $(this).css("background-color", "#FFFFCC");
      });
      $("div.ID").find('input').focusout(function() {
        $(this).css("background-color", "#FFFFFF");
        userid_validation($(this).val(), 5, 12);

      });
    });
  </script>
</head>

<body>

  <div class="ID">
    User ID:
    <input type="text" name="userid" size="12" />
  </div>

  <div class="pass">
    Password:
    <input type="text" name="psw" size="12" />
  </div>

</body>

</html>

在事件方法中调用 JS 函数

call a JS function inside an event method

javascript

jquery

function

mouseevent