jQuery验证有效，但方法不正确

Question

我有一个简单的jQuery验证，需要在我的网站的不同页面上检查必填字段。

目前，我有一个下面的代码有效。 我检查了函数check_inputs（） ，但是我认为这不是正确的方法。

 // Check the required fields function check_inputs() { var errors = false; jQuery('#wiz-action .required').each(function () { var input = jQuery(this); if (input.val().length < 1) { input.addClass('error'); errors = true; } else { input.removeClass('error'); errors = false; } }); if (errors == false) { return true; } } // Check fields on blur $('#wiz-action input.required').blur(function () { var input = $(this); input.removeClass('error'); if (input.val().length < 1) { input.addClass('error'); } else if (!input.val().match(/^\\d+$/)) { input.addClass('error'); } }); // Check fields by clicking "next" link $('#next-link').click(function (e) { if (check_inputs() == true) { // Do something } else { $('.error-message').fadeOut(200).fadeIn(200); } }); 

 .error { border: 1px solid #f00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div id="wiz-action"> <input type="text" class="required"> <input type="text" class="required"> <a id="next-link" href="#">Next</a> </div> 

Answer 1

// Check the required fields
function check_inputs() {
    var errors = false;
    $('#wiz-action .required').each(function () {
        var input = $(this);
        if (input.val().length < 1) {
            input.addClass('error');
            errors = true;
        } else {
            input.removeClass('error');
            errors = false;
        }
    });

    if (errors == false) {
        return true;
    }
}

// Check fields on change
$('#wiz-action input.required').change(function () {
    var input = $(this);
    input.removeClass('error');
    if (input.val().length < 1) {
        input.addClass('error');
    } else if (!input.val().match(/^\d+$/)) {
        input.addClass('error');
    } else {
        input.removeClass('error');
    }
    check_inputs();
});


// Check fields by clicking "next" link 
$('#next-link').click(function (e) {

    if (check_inputs() == true) {
        // Do something

    } else {
        $('.error-message').fadeOut(200).fadeIn(200);
    }
});

Answer 2

我创建了一个jsfiddle并更改了一些内容。 http://jsfiddle.net/5z8r166v/3/

当您单击该元素时，我已经创建了焦点。 在这里，我删除了错误类。 这只是一个前端决定，但我已删除了红线。

当我单击（模糊）时，我检查是否有一个值，然后在其中没有值的情况下设置错误类别。
我用==“”检查它是否为空而不是长度。 在这里，您必须计算字符串的长度。
性能稍好一点。
我知道您不会注意到它，因为它只有毫秒，而且我发现它更易于阅读。

在下一个点击中，我添加了

e.preventDefault();

这防止了按钮的默认操作。 不知道您想做什么，但知道何时使用它。

您已添加正则表达式。 对于允许的字符，可能需要这样做。 您忘了在下次单击按钮时检查它。 在那里也添加了它。

下一步按钮单击循环中实际上存在错误。 你做到了

  if (input.val().length < 1) {
        input.addClass('error');
        errors = true;
    } else {
        input.removeClass('error');
        errors = false;

但是，如果最后一个文本框是好的，并且仍然有一个空的或无效的文本框，则该变量将被false覆盖，这会使它在下一次单击不正确的按钮时继续。

也要使用好的变量名。
我使用hasError而不是错误，因为它是布尔类型。
你也像这样返回变量

if (errors == false) {
    return true;
}

但由于它是布尔值，因此您只需要返回该值即可。
如果要在发送前反转布尔值，请使用

return !hasError 

但在这种情况下，则不需要。

最后但并非最不重要的一点：您选择OnLoad，但是OnDomready就足够了，因为您不使用图像。

我希望这有帮助。