Question

每当用户点击用户名或密码输入字段并在不输入的情况下退出时，我都会尝试收到提醒。但是，在使用“onblur”而不是“onfocus”之后，我能够使用它（感谢Gurvinder的回答）。现在，当我使用“onfocus”在表单外部单击时，警报似乎对两个字段都有效。但是，当我使用tab键从用户名字段到密码字段获取密码字段时，“passwordCheck”函数继续运行。请帮忙。

<!DOCTYPE html>
<html>
    <head>
        <title>Javascript exercises</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <form name="myForm" >
            <table>
                <tr>
                    <td>Username:</td>
                    <td><input name="username" id="userName" type="text" onfocus="userNameCheck();"></input></td>
                </tr>
                <tr>
                    <td>Password:</td>
                    <td><input name="password" id ="password" type="password" onfocus="passwordCheck();"></input></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="Button" value="Submit"></input></td>
                </tr>
            </table>    
        </form>     
        <script>

            //User name field validator - Alert a message for empty input fields
            var userNameCheck = function() {
                if(document.myForm.username.value == ""){
                    alert("User Name cannot be blank"); 

                }
                else{
                    return false;
                }
            }

            //password field validator - Alert a message for empty input fields
            var passwordCheck = function() {
                if(document.myForm.password.value == ""){
                    alert("Password cannot be blank");

                }
                else{
                    return false;   
                }
            }
        </script>
    </body>
</html>

Answer 1

如果用户点击它，我希望用户名输入显示警告并在不输入任何数据的情况下标记到下一个字段。

如果您使用焦点事件来检查输入有效性，那么除非预先填充了值，否则警报将继续显示。

使用模糊事件，onblur代替onfocus。

<td><input name="username" id="userName" type="text" onblur="userNameCheck();"></input></td>

<强>演示

＆＃13;

<body>
  <form name="myForm">
    <table>
      <tr>
        <td>Username:</td>
        <td><input name="username" id="userName" type="text" onblur="userNameCheck();"></input>
        </td>
      </tr>
      <tr>
        <td>Password:</td>
        <td><input name="password" id="password" type="password"></input>
        </td>
      </tr>
      <tr>
        <td></td>
        <td><input type="Button" value="Submit"></input>
        </td>
      </tr>
    </table>
  </form>
  <script>
    //User name field validator - Alert a message for empty input fields
    var userNameCheck = function() {
      if (document.myForm.username.length >= 1) {
        //Nothing happens
      } else {
        alert("User Name cannot be blank");
        return false;
      }
    }
  </script>
</body>

＆＃13;

Answer 2

为什么不创建自己的警报＆＃39; div用于更多控制（以及更好的用户体验）。

$("input").focus(function(){
      var x = document.forms["myForm"]["password"].value;
        if (x == "") {
            /*alert("Password cannot be blank");*/
            $('.alert').show();
            return false;
       }
});

要指定标签键方案，请尝试：

function checkTabPress(key_val) {
    if (event.keyCode == 9) {
        $('.alert').hide();
    }
}

JavaScript“实时”表单验证

2 个答案: