Question

这是我的代码。我想使用javascript验证表单。我想在用户专注于填写表单后验证特定的表单元素。它发生的方式是，只是加载页面显示十字标记 - 意味着特定表单无效而用户无需输入代码。注意：我使用Bootstrap作为图标 - 'Tick'和'X'。谢谢您的帮助。

<!DOCTYPE html>
<html>

<head>
<title> Form Elements </title>
<!-- Latest compiled and minified CSS OF BOOTSTRAP - BOOTSTRAP CDN-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!--Script of Javascript-->
<script type="text/javascript">
    ID = setTimeout("check_name();", 0);
    ID = setTimeout("check_phone();", 0);
    ID = setTimeout("check_address();", 0);

    function check_name() {
        if (document.form.name.value.length < 1) {
            keycode = document.getElementById("name");
            character = ' <i class="glyphicon glyphicon-remove"></i>';
            keycode.innerHTML = character;
        } else {
            keycode = document.getElementById("name");
            character = ' <i class="glyphicon glyphicon-ok"></i>';
            keycode.innerHTML = character;
        }
        ID = setTimeout("check_name();", 500);
    }

    function check_phone() {
        if (document.form.phone.value.length < 10) {
            keycode = document.getElementById("phone");
            character = ' <i class="glyphicon glyphicon-remove"></i>';
            keycode.innerHTML = character;
        } else {
            keycode = document.getElementById("phone");
            character = ' <i class="glyphicon glyphicon-ok"></i>';
            keycode.innerHTML = character;
        }
        ID = setTimeout("check_phone();", 500);
    }

    function check_address() {
        if (document.form.address.value.length < 1) {
            keycode = document.getElementById("address");
            character = ' <i class="glyphicon glyphicon-remove"></i>';
            keycode.innerHTML = character;
        } else {
            keycode = document.getElementById("address");
            character = ' <i class="glyphicon glyphicon-ok"></i>';
            keycode.innerHTML = character;
        }
        ID = setTimeout("check_address();", 500);
    }
</script>
<style>
    .glyphicon {
        font-size: 20px;
    }
    .glyphicon-remove {
        color: red;
    }
    .glyphicon-ok {
        color: green;
    }
</style>
</head>

<body>
<div class="row" style="padding:20px;">
    <form name="form">
        <p>Name:</p>
        <input type="text" onfocus="check_name();" name="name" /><span id="name"></span>
        <br />
        <p>Phone:</p>
        <input type="text" onclick="check_phone();" name="phone" /><span id="phone"></span>
        <br />
        <p>Address:</p>
        <input type="text" onclick="check_address();" name="address" /><span id="address"></span>
        <br />
        <button type="submit" onclick="test();">Submit</button>
    </form>
</div>
</body>

</html>

Answer 1

尝试使用on而不是onclick：

<p>Name:</p><input type="text" onchange="check_name();"name="name"/><span id="name"></span><br />

<p>Phone:</p><input type="text" onchange="check_phone();" name="phone" /><span id="phone"></span><br />

<p>Address:</p><input type="text" onchange="check_address();" name="address" /><span id="address"></span><br />

然后删除所有超时。

我希望验证只在文本字段的焦点之后发生

1 个答案: