我希望只有在文本字段的焦点之后才能进行验证

I want the validation to happen only after focus of text field

本文关键字：之后 验证 焦点 文本 字段 我希望      更新时间：2023-09-26

这是我的代码。我想使用javascript验证表单。我想在用户专注于填写表单后验证特定的表单元素。这种情况发生的方式是，只加载页面就会显示十字标记，这意味着在用户没有输入代码的情况下，特定的表单是无效的。注意：我已经使用Bootstrap的图标-"Tick"answers"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>

尝试onchange而不是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 />

然后删除所有超时。

相关文章：