将相同事件的对象方法代码设为 DRY

Question

所以我有这个代码块，其中对象中的方法只是重复每个方法的块。

我怎么能'parameterizing'这个方法只用了一次。

我已经尝试了很多方法来将这些方法重写为一个带有 'pattern' 参数的可重用块，但是根据我输入的内容会出现很多不同的错误

代码如下：

function applyRegexValidation(){
    validator = {
        email: /^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
        postcode: /^(GIR 0AA)|((([A-PR-UWYZ][0-9][0-9]?)|(([A-PR-UWYZ][A-HK-Y][0-9][0-9]?)|(([A-PR-UWYZ]][0-9][A-HJKSTUW])|([A-PR-UWYZ][A-HK-Y][0-9][ABEHMNPRVWXY])))) ?[0-9][ABD-HJLNP-UW-Z]{2})$/i,
        dob: /^(0[1-9]|1\d|2\d|3[01])\/(0[1-9]|1[0-2])\/(19|20)\d{2}$/,
        companyReg: /^[OSCLIPRN]{2}[0-9]{6}|[0-9]{8}$/,
        phone: /^[0-9]{11,18}$/,
        text: /^[a-zA-Z ]*$/
    };

var RegexCheck = {
    email: function () {
        var isEmpty, pattern, result, elem = this.value;
        isEmpty = !elem;
        pattern = validator.email;
        result = pattern.test(elem);
        if (result === false || isEmpty) {
            $(this).closest('div').removeClass('has-success');
            $(this).closest('div').addClass("has-feedback has-error");
            $(this).attr("data-valid", "false");
        }
        else {
            $(this).closest('div').removeClass('has-error');
            $(this).closest('div').addClass("has-feedback has-success");
            $(this).attr("data-valid", "true");
        }
    },
    postcode: function () {
        var isEmpty, pattern, result, elem = this.value;
        isEmpty = !elem;
        pattern = validator.postcode;
        result = pattern.test(elem);
        if (result === false || isEmpty) {
            $(this).closest('div').removeClass('has-success');
            $(this).closest('div').addClass("has-feedback has-error");
            $(this).attr("data-valid", "false");
        }
        else {
            $(this).closest('div').removeClass('has-error');
            $(this).closest('div').addClass("has-feedback has-success");
            $(this).attr("data-valid", "true");
        }
    },
    dob: function () {
        var isEmpty, pattern, result, elem = this.value;
        isEmpty = !elem;
        pattern = validator.dob;
        result = pattern.test(elem);
        if (result === false || isEmpty) {
            $(this).closest('div').removeClass('has-success');
            $(this).closest('div').addClass("has-feedback has-error");
            $(this).attr("data-valid", "false");
        }
        else {
            $(this).closest('div').removeClass('has-error');
            $(this).closest('div').addClass("has-feedback has-success");
            $(this).attr("data-valid", "true");
        }
    },
    companyReg: function () {
        var isEmpty, pattern, result, elem = this.value;
        isEmpty = !elem;
        pattern = validator.companyReg;
        result = pattern.test(elem);
        if (result === false || isEmpty) {
            $(this).closest('div').removeClass('has-success');
            $(this).closest('div').addClass("has-feedback has-error");
            $(this).attr("data-valid", "false");
        }
        else {
            $(this).closest('div').removeClass('has-error');
            $(this).closest('div').addClass("has-feedback has-success");
            $(this).attr("data-valid", "true");
        }
    },
    phone: function () {
        var isEmpty, pattern, result, elem = this.value;
        isEmpty = !elem;
        pattern = validator.phone;
        result = pattern.test(elem);
        if (result === false || isEmpty) {
            $(this).closest('div').removeClass('has-success');
            $(this).closest('div').addClass("has-feedback has-error");
            $(this).attr("data-valid", "false");
        }
        else {
            $(this).closest('div').removeClass('has-error');
            $(this).closest('div').addClass("has-feedback has-success");
            $(this).attr("data-valid", "true");
        }
    }
};
$('form [type=email]').on('input blur', RegexCheck.email);
$('form [type=tel]').on('input blur', RegexCheck.phone);

$('form [bf-datatype=dob]').on('input blur', RegexCheck.dob);
$('form [bf-datatype=companyReg]').on('input blur', RegexCheck.companyReg);
$('form [bf-datatype=postcode]').on('input blur', RegexCheck.postcode);
}

Answer 1

可能是这样的：

function applyRegexValidation() {
    validator = {
        email: /^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
        postcode: /^(GIR 0AA)|((([A-PR-UWYZ][0-9][0-9]?)|(([A-PR-UWYZ][A-HK-Y][0-9][0-9]?)|(([A-PR-UWYZ]][0-9][A-HJKSTUW])|([A-PR-UWYZ][A-HK-Y][0-9][ABEHMNPRVWXY])))) ?[0-9][ABD-HJLNP-UW-Z]{2})$/i,
        dob: /^(0[1-9]|1\d|2\d|3[01])\/(0[1-9]|1[0-2])\/(19|20)\d{2}$/,
        companyReg: /^[OSCLIPRN]{2}[0-9]{6}|[0-9]{8}$/,
        phone: /^[0-9]{11,18}$/,
        text: /^[a-zA-Z ]*$/
    };

    function RegexCheck() {
        var isEmpty, pattern, result, classesToRemove, classesToAdd, dataValid, elem = this.value;
        isEmpty = !elem;
        // "$(this).prop('type')" works for 'type=*', for the 'bf-datatype=*' find a way to get a key to search in 'validator'
        pattern = validator[$(this).prop('type')];
        result = pattern.test(elem);
        dataValid = (result !== false && !isEmpty);

        classesToRemove = dataValid ? 'has-error' : 'has-success';
        classesToAdd = dataValid ? 'has-feedback has-success' : 'has-feedback has-error';

        $(this).closest('div')
            .removeClass(classesToRemove)
            .addClass(classesToAdd)
            .attr("data-valid", dataValid);
    }

    $('form').on('input blur', RegexCheck);
}

将相同事件的对象方法代码设为 DRY

Make object method code DRY for same events

javascript

methods

jquery

dry

object