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

您将被称为的功能设置为被称为的功能。

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

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

尽管如此，关于如何进行最佳重构的问题可能过于基于意见而无法真正回答。但是你在拆分功能时所做的似乎是正确的。

Answer 2

没有必要，因为有一些名为.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
});

如何重构以避免重复？

2 个答案: