带有 Jquery 装饰的 Javascript 表单验证答案

【问题标题】：Javascript form validation with Jquery decoration带有 Jquery 装饰的 Javascript 表单验证
【发布时间】：2011-11-02 23:41:39
【问题描述】：

请原谅我缺少 javascript 调味料。我目前的验证有两个部分：
1. 对输入字段应用 css 装饰并使包含错误消息的 div 可见的函数
2.聚合以上函数的函数，调用形式为即onSubmit="(return validate();)"

我想解决两件事：

1. 重构代码以使其更小

2.修正了代码更新。将选择器文本修饰应用于所有空字段。目前，装饰应用于第一个空字段，然后一旦输入文本值，它就会命中下一个字段。每个空白字段都应经过验证并显示适当的装饰。

/** VALIDATION DECORATION **/

function validateAccountNameRequired(textInputId, textInputLabelName) {
    var valid = true;

    if (!$('input#accountName').val()) {
        $('input#accountName').addClass('inputError');
        $('ul#accountNameList').find('div.error').attr('style', '');
        valid = false;
    } else if ($('input#accountName').val()) {
        $('input#accountName').removeClass('inputError');
        $('ul#accountNameList').find('div.error').hide();
    }
    return valid;
}

function validateAccountBusOrgIDRequired(textInputId, textInputLabelName) {
    var valid = true;

    if (!$('input#accountBusOrgID').val()) {
        $('input#accountBusOrgID').addClass('inputError');
        $('ul#busOrgList').find('div.error').attr('style', '');
        valid = false;
    } else if ($('input#accountBusOrgID').val()) {
        $('input#accountBusOrgID').removeClass('inputError');
        $('ul#busOrgList').find('div.error').hide();
    }

    return valid;
} /** VALIDATORS **/

function validate() {

        valid = validateAccountNameRequired('accountName', 'Account Name');
        valid1 = validateAccountBusOrgIDRequired('accountBusOrgID', 'Account Bus Org ID');

    return valid && valid1;
}

【问题讨论】：

我知道这不会回答您当前解决方案的问题，但为什么不考虑切换验证以使用 jQuery 验证库呢？这比尝试自己动手要容易得多，并且可以完成您尝试用自己的东西做的所有事情（据我所知）。如果您仍然想自己动手，请告诉我，我可以仔细看看您在做什么，但我强烈建议您使用这个：jQuery validation plugin
如下所述，您应该使用Validator Plugin，它已经完成了您想要的功能以及更多功能。它还包括一个名为.valid() 的方法，它消除了对“有效标志”变量的需求。

标签： javascript jquery jquery-selectors validation

【解决方案1】：

我自己解决了问题。希望其他人可以受益：

一次验证所有字段
重构以获得更好的凝聚力，只需在函数 validate() 中加载值并重用一个函数 validateTextRequired()：


    function validateTextRequired( textInputId, errorListId)
        {
            var valid = true;

        if( !$('input' + '#' + textInputId).val())
        {
            $('ul' + '#' + errorListId).find('label').addClass('error');
            $('input' + '#' + textInputId).addClass('inputError');
            $('ul' + '#' + errorListId).find('div.error').attr('style','');
            valid = false;
        } else if ($('input#' + textInputId).val()) {
            $('ul' + '#' + errorListId).find('label').removeClass('error');
            $('input' + '#' + textInputId).removeClass('inputError');
            $('u' + 'l#' + errorListId).find('div.error').hide();
        }
        return valid;
    }

           function validate()
           {
        valid = validateTextRequired( 'accountName', 'accountNameList');
        valid1 = validateTextRequired( 'accountBusOrgID', 'busOrgList');
        valid2 = validateTextRequired( 'acctMgr', 'accountMgrList');
            }

【讨论】：

if( !something ) ... else if (something) ... 是多余的。写if( !something ) ... else ...就够了。除非something 计算没有副作用。