Question

我在提交表单之前尝试检查一些输入字段。但是这段代码对我来说有点复杂。由于有些部分是重复的，我认为应该可以优化/缩小代码。

代码做了什么：

检查表格的输入字段
如果出现错误，则添加了一个类
如果有错误类 - ＆gt;表格不会被提交

JS：

$('form').submit(function( event ) {
    $("tr").each(function() {
        $.each($(this).children("td:eq(1)"),function() {
            var str = $(this).children('input').val().replace(/ /g,"").replace(/,/g,".");
            $(this).children('input').val(str);
            if (str.match(/^\d+(-?\d+|\d*)$/)) {
                $(this).children('input').removeClass('error');
            }
            else {
                $(this).children('input').addClass('error');
            }
        });
        $.each($(this).children("td:eq(2)"),function() {
            var str = $(this).children('input').val().replace(/ /g,"").replace(/,/g,".");
            $(this).children('input').val(str);
            if (str.match(/^\d+(\.\d+|\d*)(-?\d+(\.\d+|\d*)|\d*)$/)) {
                $(this).children('input').removeClass('error');
            }
            else {
                $(this).children('input').addClass('error');
            }
        });
        $.each($(this).children("td:eq(3)"),function() {
            var str = $(this).children('input').val();
            if (str.match(/^[a-zA-Zµ]+$/i)) {
                $(this).children('input').removeClass('error');
            }
            else {
                $(this).children('input').addClass('error');
            }
        });
    });
    if (!$('.error').length) {
        event.preventDefault();
    }
});

我试图把一些部分放在一个单独的功能中，但我没有得到它:-( 我认为一个单独的函数会更好，即如果我想为同一个案例检查两个不同的输入字段......

Answer 1

要保存大量代码，您可以创建一个执行检查的功能：

$('form').submit(function( event ) {
    $("tr").each(function() {
        var self = $(this);
        validateTD(self, 1, /^\d+(-?\d+|\d*)$/, true);
        validateTD(self, 2, /^\d+(\.\d+|\d*)(-?\d+(\.\d+|\d*)|\d*)$/, true);
        validateTD(self, 3, /^[a-zA-Zµ]+$/i);
    });
    if (!$('.error').length) {
        event.preventDefault();
    }
});

function validateTD(tr, number, pattern, removeSpacesAndReplaceCommasWithDot) {

    if(removeSpacesAndReplaceCommasWithDot == undefined) {

        removeSpacesAndReplaceCommasWithDot = false;

    }

    $.each(tr.children("td:eq(" + number + ")"),function() {
        if(removeSpacesAndReplaceCommasWithDot) {
            var str = $(this).children('input').val().replace(/ /g,"").replace(/,/g,".");
            $(this).children('input').val(str);
        }
        else {
            var str = $(this).children('input').val();
        }
        if (str.match(pattern)) {
            $(this).children('input').removeClass('error');
        }
        else {
            $(this).children('input').addClass('error');
        }
    });

}

Answer 2

您可以自己制作一系列规则，提取更改的位（选择器，值准备和正则表达式测试），然后循环执行规则：

var rules = [
    {
        selector: "td:eq(1)",
        prepValue: function(val) { return val.replace(/ /g,"").replace(/,/g,"."); },
        regex:    /^\d+(-?\d+|\d*)$/
    },
    {
        selector: "td:eq(2)",
        prepValue: function(val) { return val.replace(/ /g,"").replace(/,/g,"."); },
        regex:    /^\d+(\.\d+|\d*)(-?\d+(\.\d+|\d*)|\d*)$/
    },
    {
        selector: "td:eq(2)",
        prepValue: function(val) { return val; },
        regex:    /^[a-zA-Zµ]+$/i
    }
];
$('form').submit(function( event ) {
    $("tr").each(function() {
        var $this = $(this);
        $.each(rules, function(i, rule) {
            $.each($this.children(rule.selector),function() {
                var $this = $(this),
                    input = $this.children('input'),
                    str = rule.prepValue(input.val());
                input.val(str);
                input.toggleClass('error', rule.regex.test(str));
            });
        });
    });
    if (!$('.error').length) {
        event.preventDefault();
    }
});

Answer 3

这有用吗？

我放了一张地图并在里面放了不同的数据然后你可以减少一些代码。

$('form').submit(function( event ) {
    var map = {};
    map["1"] = /^\d+(-?\d+|\d*)$/;
    map["2"] = /^\d+(\.\d+|\d*)(-?\d+(\.\d+|\d*)|\d*)$/;
    map["3"] = /^[a-zA-Zµ]+$/i;
    $("tr").each(function() {
        for(var key in map){
            $.each($(this).children("td:eq(" + key + ")"),function() {
                var str = $(this).children('input').val().replace(/ /g,"").replace(/,/g,".");
                $(this).children('input').val(str);
                if (str.match(map[key])) {
                    $(this).children('input').removeClass('error');
                }
                else {
                    $(this).children('input').addClass('error');
                }
            });

        }
    });
    if (!$('.error').length) {
        event.preventDefault();
    }
});

Answer 4

我相信最好的方法是在html中加入一些逻辑。基本上当你构建hmtl时，将属性data-pattern =＆＃34; YourRegex＆＃34;和class =＆＃34; has-pattern＆＃34;进入你的投入。

之后你可以这样做：

$('form').submit(function( event ) {
    $('.has-patter').each(function() {
      var str = $(this).val().replace(/ /g,"").replace(/,/g,".");
      var re = new RegExp($(this).attr('data-pattern'), "gi");
      $(this).toggleClass('error', re.test(str));
    }
// if there are errors  prevent Default and stop submit

});

更不用说实际上有一个名为pattern的htmnl5属性，它也是一样的，但是你不需要编写任何javascript。 Safari tho不支持它。

Answer 5

将正则表达式放在数组中并确定每个td元素的索引可以节省重复次数，使用.toggleClass可以节省几行代码。

$('form').submit(function( event ) {
    var re = [
        /^\d+(-?\d+|\d*)$/,
        /^\d+(\.\d+|\d*)(-?\d+(\.\d+|\d*)|\d*)$/,
        /^[a-zA-Zµ]+$/i
    ];        
    $("tr").each(function() {
        $.each($(this).children("td:gt(0)"),function() {
            var index = $(this).closest('tr').children('td:gt(0)').index( this ),
                str = $(this).children('input').val().replace(/ /g,"").replace(/,/g,".");
            $(this).children('input').val(str);
            $(this).children('input').toggleClass( 'error', !str.match( re[index] ) );
        });
    });
    if (!$('.error').length) {
        event.preventDefault();
    }
});

避免重复jquery脚本的部分内容

5 个答案: