JavaScript“实时”表单验证

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>

演示版

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

Answer 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();
    }
}

JavaScript“实时”表单验证

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-11-10 15:07:03

解决方案2
0 2017-11-10 16:16:00

JavaScript“实时”表单验证

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-11-10 15:07:03

解决方案2 0 2017-11-10 16:16:00

解决方案1
0 已采纳 2017-11-10 15:07:03

解决方案2
0 2017-11-10 16:16:00