Question

我希望我不是在重复一个问题，但我已经四处寻找并且无法找到帮助，所以我想我应该直接问，我还是初学者，这是我课程的任务所以请尽可能彻底可能的

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

这是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.

请检查一下是否有效。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

在事件方法中调用JS函数

1 个答案: