Question

这是我第一次在Stackoverflow上发帖。我不是jQuery专家，只是努力做到最好。

我编写了一部分用于在ajax中发送表单之前验证表单的代码。我为每个输入字段条件重复相同的代码。这是我的代码：

        // Le nom n'a pas été entré
    if ($sendername.val() === "") {
        $sendername.addClass('commenterrorfield').after( "<span class='commenterror'>Veuillez entrer votre nom</span> ");
        $sendername.on('click focusin', function() {
            $(this).removeClass().next("span").attr('class', 'commenterror-hide');
        });
        errors = true;

    }

    // Le courriel est absent ou invalide
    if ($senderemail.val() === "") {
        $senderemail.addClass('commenterrorfield').after("<span class='commenterror'>Veuillez entrer une adresse de courriel</span>");
        $senderemail.on('click focusin', function() {
            $(this).removeClass().next("span").attr('class', 'commenterror-hide');
        });
        errors = true;

    } else if (!emailReg.test($senderemail.val())) {
        $senderemail.addClass('commenterrorfield').after( "<span class='commenterror'> Votre adresse courriel semble invalide</span> "); 
        $senderemail.on('click focusin', function() {
            $(this).removeClass().next("span").attr('class', 'commenterror-hide');
        });
        errors = true;
    }

    // Le sujet n'a pas été entré
    if ($sendersubject.val() === "") {
        $sendersubject.addClass('commenterrorfield').after( "<span class='commenterror'>Veuillez écrire un commentaire</span> ");
        $sendersubject.on('click focusin', function() {
            $(this).removeClass().next("span").attr('class', 'commenterror-hide');
        });
        errors = true;
    }

    // Le commentaire n'a pas été entré
    if ($sendermessage.val() === "") {
        $sendermessage.addClass('commenterrorfield').after( "<span class='commenterror'>Veuillez écrire un commentaire</span> ");
        $sendermessage.on('click focusin', function() {
            $(this).removeClass().next("span").attr('class', 'commenterror-hide');
        });
        errors = true;
    }

使用函数减少此代码的最佳方法是什么...我想使用该函数不重复每个if条件中的这部分代码：

            $senderemail.addClass('commenterrorfield').after("<span class='commenterror'>Veuillez entrer une adresse de courriel</span>");
        $senderemail.on('click focusin', function() {
            $(this).removeClass().next("span").attr('class', 'commenterror-hide');
        });
        errors = true;

非常感谢你!!

Answer 1

您可以创建一个带有两个参数的函数 - 一个用于元素，另一个用于错误消息。它看起来像这样：

function showError(el, err) {
  el.addClass('commenterrorfield').after("<span class='commenterror'>" + err + "</span>");
  el.on('click focusin', function() {
    $(this).removeClass().next("span").attr('class', 'commenterror-hide');
  });
  errors = true;
}

// Le nom n'a pas été entré
if ($sendername.val() === "") {
  showError($sendername, 'Veuillez entrer votre nom');
}

// Le courriel est absent ou invalide
if ($senderemail.val() === "") {
  showError($senderemail, 'Veuillez entrer une adresse de courriel');
} else if (!emailReg.test($senderemail.val())) {
  showError($senderemail, 'Votre adresse courriel semble invalide');
}

// Le sujet n'a pas été entré
if ($sendersubject.val() === "") {
  showError($sendersubject, 'Veuillez écrire un commentaire');
}

// Le commentaire n'a pas été entré
if ($sendermessage.val() === "") {
  showError($sendermessage, 'Veuillez écrire un commentaire');
}

什么是减少jQuery中重复代码的最佳方法（验证表单）

1 个答案: