javascript - 在同一表单上使用模糊和提交事件

Question

我对此仍然很困惑。现在开始学习 JQuery 大约一周了，这就是我所拥有的:

var IsValidUserName = false;

$(document).ready(function () {
    $('#txtUserName').blur(function () {

  if ($('#txtUserName').val().match(isNumberLetter) && 
($('#txtUserName').val().length >= 8)) {

            $('#userNameError').removeClass("error").addClass("default");
            $('#txtUserName').removeClass("alert");
            $('#txtUserName + label').removeAttr("id", "lblUserName");
            IsValidUserName = true;
        }
        else {
            $('#userNameError').removeClass("default").addClass("error");
            $('#txtUserName').addClass("alert");
            $('#txtUserName + label').attr("id", "lblUserName");
        }
    });
});

假设我有另一个像上面这样的函数，假设FirstName:

如何在提交事件中调用它？当用户离开字段时，代码可以按照我需要的方式工作。不知道如何调用此代码并使用上面的变量来防止输入的数据无效时提交。

如果用户单击提交按钮，我需要调用上面的验证，如果 IsValidUserName 变量为 false，我需要停止提交。

有些事情只需要一点点插入。

谢谢我的 friend 们。

盖伊

Answer 1

您始终可以将其提取到函数而不是匿名函数中，并将引用传递给要检查的对象。这将为您带来将其重用于其他元素的额外好处。

function validate(ele) {
    var valid;

    if (ele.val().match(isNumberLetter)) && (ele.val().length >= 8)) {
        valid = true;

        // update user here.
    } else {
        valid = false;

        // update user here.
    }

    return valid;
}

$(function(){
    $('#firstName').blur(function(){ validate($(this)); });
    $('#lastName').blur(function(){ validate($(this)); });

    $("yourFrom").submit(function(){
        var firstNameIsValid = validate($('#firstName'));
        var lastNameIsValid = validate($('#lastName'));

        if (!nameIsValid) && (!lastNameIsValid) {
            return false;
            // User has already been updated
        }
    });
});

此外，由于您已经大量使用 JavaScript 进行验证(希望这是方便而不是唯一的安全性)，您还可以完全禁用提交按钮，直到表单满足适当的要求。