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

我创造了一个小提琴，并改变了一些事情。http://jsfiddle.net/5z8r166v/3/

我已经为您单击元素时创建了一个焦点。在这里，我移除错误类。这只是一个预先的决定，但我让它删除红线。

当单击out (模糊)时，我检查是否有值，如果其中没有值，则设置error类。

我使用== "“来检查它是否是空的，而不是长度。这里你必须计算字符串的长度。

只是在性能上要好一点。

我知道你不会注意到它，因为它只有毫秒+我发现它更容易阅读。

在下一次单击中，我添加了

e.preventDefault();

它阻止按钮的默认操作。不知道你想做什么，但知道什么时候使用它。

你增加了regex。这可能是你所允许的角色所需要的。您忘了在next按钮单击时检查它。也是在那里加的。

实际上，next按钮单击循环时出现了错误。是你干的

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

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

也要使用好的变量名。

我使用的是hasError而不是错误，因为它是布尔类型。

此外，您还返回了变量，如下所示

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

但是因为它是布尔值，所以您只需要返回值。

如果要在发送之前反转布尔值，请使用

return !hasError 

但在这种情况下它是不必要的。

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

我希望这能帮到你。

Answer 2

// 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);
    }
});