Javascript表单验证与Jquery装饰

Javascript form validation with Jquery decoration

本文关键字：Jquery 装饰 验证 表单 Javascript      更新时间：2023-09-26

请原谅我缺乏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;
}

我解决了自己的问题。希望其他人能从中受益:

  1. 一次验证所有字段

  2. 为更好的内聚而重构，只在函数validate()中加载值，并重用一个函数validatetextrerequired ():


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

相关文章：