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就足够了，因为您不使用图像。

我希望这会有所帮助。

jQuery验证工作但不是正确的方法

2 个答案: