如何在失去焦点后立即验证字段

Question

我正在学习网络开发。我有一个登录表单，其中有两个文本字段，一个用于电子邮件，一个用于密码。我想验证电子邮件字段。目前，我能够验证，但是当我点击提交按钮时会发生这种情况。有没有一种方法可以让我在电子邮件字段失去焦点后立即进行验证。我想在失去焦点后立即调用 validateEmail 方法。

这是我目前的情况：

HTML 文件

<div id="ErrMsg" style="color:red">
    <form id="myForm" action = "" method="post">
        <input id="email" name="Email" type="email" class="form-control" placeholder="Email">
        <input id="pass" name="Password" type="password" class="form-control" placeholder="Password" />
        <button id="signIn" type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
    </form>

JS 文件

window.loginView = Backbone.View.extend({
        events: {
            'click #signIn': 'doSignIn',
        },
        initialize: function() {
            console.log('Initializing Login View');
        },
        validateEmail: function(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);
        },
        doSignIn: function(event) {
            $("#ErrMsg").text("");
            var email = $("#email").val();
            // checking if email is valid
            if (!this.validateEmail(email)) {
                $("#ErrMsg").text(email + " is not valid :(");
            }
            else
            {
            // some logic to fetch data from REST
            }
        }

Answer 1

是的，有办法。您可以绑定一个 focusout 事件。

编辑： 添加另一个事件（在 'click #signIn': 'doSignIn' 之后）：

'focusout #signIn': 'doSignIn'

Answer 2

因为你正在使用 jquery 看到这个 https://api.jquery.com/blur/

$("#email").blur(validateEmail)

（显然这需要一个名为 validateEmail 的函数）

如何在失去焦点后立即验证字段

How to validate a field as soon as it loses focus

html

javascript

validation

jquery

backbone.js