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的函数）

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

2 个答案: