我如何重构以避免重复

Question

$('#foo').validate({
  errorPlacement: (e, el) => {
    /**
     * /* Insert .error after offending <input>'s <label>.
     */
    e.insertAfter(el.next('.form__label')).animate({
      opacity: 1,
      top: '-=10px',
    }, 'fast');
  },
  messages: {
    tc: 'Please accept our Terms & Conditions!',
  },
});
$('#bar').validate({
  errorPlacement: (e, el) => {
    /**
     * /* Insert .error after offending <input>'s <label>.
     */
    e.insertAfter(el.next('.form__label')).animate({
      opacity: 1,
      top: '-=10px',
    }, 'fast');
  },
});

我正在使用jqueryvalidation.org，我的页面上有两个不同的<form>容器。这是按原样运行的，但是，我敢肯定有一种更好的方法来推断errorPlacement对象，对吗？我只是现在没有看到它...

我尝试了这样的事情：

/**
 * Customize placement of created error labels.
 * (https://jqueryvalidation.org/validate/)
 * @param {$} e created error label
 * @param {$} el invalid element
 */
function ep(e, el) {
 // Insert .error after offending <input>'s <label>.
   e.insertAfter(el.next('.form__label')).animate({
      opacity: 1,
      top: '-=10px',
    }, 'fast');
}
$('#foo').validate({
  errorPlacement: function ep(e, el) {
  // Insert .error after offending <input>'s <label>.
  e.insertAfter(el.next('.form__label')).animate({
      opacity: 1,
      top: '-=10px',
    }, 'fast');
   },
  messages: {
    tc: 'Please accept our Terms & Conditions!',
  },
});
$('#bar').validate({
  errorPlacement: ep(e, el), // This throws error of 'unknown' e
});

Answer 1

没有必要，因为已经是该插件的一部分的.setDefaults()。您放入的任何内容都将成为页面上.validate()的所有实例的默认值。

$.validator.setDefaults({ // <- will be used on all instances of .validate() on this page
    errorPlacement: function(e, el) {
        e.insertAfter(el.next('.form__label')).animate({
            opacity: 1,
            top: '-=10px',
        }, 'fast');
    }
});
$('#foo').validate({
    messages: {
        tc: 'Please accept our Terms & Conditions!',
    }
});
$('#bar').validate({
    // other options
});

Answer 2

您正在设置被称为的函数，为已称为。

执行errorPlacement: ep(e, el)时，设置对象时，ep(e, el)的功能部分是调用的，而不是触发错误置换时。您只需要在没有parens的情况下传递函数名称。

$('#bar').validate({
  errorPlacement: ep,
});

如何最好地重构的问题可能太基于意见了，无法真正回答。但是，将功能拆分的工作似乎正确。