JavaScript“实时”表单验证答案

【问题标题】：JavaScript "Live" form validationJavaScript“实时”表单验证
【发布时间】：2023-04-02 09:20:01
【问题描述】：

每当用户单击用户名或密码输入字段并在未输入的情况下退出时，我都会尝试获取警报。但是，在使用“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>

【问题讨论】：

不要显示警报，因为这真的很烦人。只需使用 HTML5 模式属性来测试输入是否为空。如果是，输入将显示为红色以提醒用户。 [a-z-A-Z0-9]{1} 之类的东西会检查是否存在至少一个字符。
Run JavaScript when an element loses focus的可能重复
为什么不直接选择感兴趣的元素呢？ document.getElementById("username") 而不是 document.myForm.username.length 啊，也许你的 onfocus 甚至没有被调用......对吧？
注意，<input> 元素是自动关闭的
可能重复stackoverflow.com/questions/28091261/javascript-live-validation

标签： javascript html forms validation

【解决方案1】：

我希望用户名输入在用户点击时显示警报并在不输入任何数据的情况下跳到下一个字段。

如果您使用焦点事件来检查输入的有效性，那么除非预先填充了值，否则警报会不断出现。

使用 blur 事件，onblur 而不是 onfocus。

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

演示

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

【讨论】：

谢谢 Gurvinder..onblur 似乎解决了这个问题。但是，我现在收到来自 passwordCheck 功能的重复警报
您也需要按照相同的方法输入密码。
是的 Gurvinder，我在密码和用户名字段中都使用了 onblur。对于用户名，警报似乎有效，但对于密码，警报处于无限循环中
//用户名字段验证器 - 提示空输入字段的消息 var userNameCheck = function() { if(document.myForm.username.value != ""){ //什么都没有发生 } else { alert("用户名不能为空"); } } //密码字段验证器 - 提示空输入字段的消息 var passwordCheck = function() { if(document.myForm.password.value != ""){ //什么都没有发生 } else{ alert("密码不能空白的”）;返回假； } }
我已经更新了我的问题中的新代码，您只需将 onfocus 更改为 onblur

【解决方案2】：

为什么不创建自己的“警报”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();
    }
}

【讨论】：

是的。这正是我正在寻找的。但问题是，如果我使用 Tab 键进入下一个字段，警报会不断重复。
Gotchya - 已更新。希望能帮助到你。我会根据您的需要创建我的警报元素。