Question

我有一个非常简单的HTML / JavaScript表单，我正在为课程工作，我已经让它工作但我希望它验证输入作为用户类型（我的验证出现在文本字段下面）怎么能我实现了这一点？我的代码如下：

<!DOCTYPE html>
<html>
<head>
    <script class="jsbin" src="http:ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">  </script>
    <meta charset=utf-8 />
    <title>Email Validation</title>
</head>
<body>
    <form onsubmit='validate(); return false;'>
        <p>Enter an email address:</p>
        <input id='email' placeholder="example@example.com" size="21">
        <button type='submit' id='validate'>Submit</button>
    </form>
    <br />
    <h2 id='result'></h2>
    <script>
        function validateEmail(email) {
            var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
        }
        function validate() {
            $("#result").text("");
            var email = $("#email").val();
            if (validateEmail(email)) {
                $("#result").text(email + " is valid");
                $("#result").css("color", "green");
            } else {
                $("#result").text(email + " is not valid");
                $("#result").css("color", "red");
            }
            return false;
        }
        $("form").bind("submit", validate);
    </script>
</body>
</html>

Answer 1

对于不使用jQuery的方法，如果你感兴趣的话，这里还有另一个Stack Overflow问题：On Input Change Event。

有很多方法可以做你想在那里列出的东西，但在这种情况下你可以这样做：

var input = document.querySelector('input');

input.addEventListener('input', function()
{
    // Check input.value for what you're looking for here
});

请参阅jsFiddle在该其他页面中提到的Drew Noakes'作为示例。

但是，既然你正在使用jQuery，那么Nicholas Kyriakides的建议是要走的路。

Javascript实时验证

1 个答案: