在注入用户时绕过 Ember 验证并通过 jquery val

Question

作为一种爱好，我正在尝试建立自己的用户名和密码存储，以便通过 chrome 插件从一个站点注入到另一个站点。

它与通常的 $('#username').val() 配合得很好但是，我在使用 ember 构建的网站上遇到了一个问题。该网站有这样的形式：

<form class="login_form" novalidate="" data-ember-action="" data-ember-action-7="7" _lpchecked="1">
    <div id="ember4" class="fieldset fieldset--error fieldset--empty fieldset--material ember-view"> <label for="username" class="fieldset_label">Username</label> <input name="username" id="username" class="input username" autocomplete="off" autofocus=""></div>
</form>

问题是当我使用 $('#username').val("myUsername");

我收到一个错误 "please enter a username"。问题是，如果我进入输入，按任意键，然后删除我添加的文本，它会验证，因为它删除了 fieldset--error 和 fieldset--empty，然后允许我按提交并且它有效。

问题是 - 我该如何以编程方式解决这个问题？有没有办法告诉 Ember 停止缠着我手动输入而不是使用 .val()？

或者有没有办法让它认为我做了（因为 jquery.trigger 不起作用）

Answer 1

我不是 100% 确定，但我想您遇到的问题是由于未触发 change 事件而引起的。 jQuery.val() 不这样做：

Setting values using this method (or using the native value property) does not cause the dispatch of the change event. For this reason, the relevant event handlers will not be executed. If you want to execute them, you should call .trigger( "change" ) after setting the value.

https://api.jquery.com/val/

您可以使用 jQuery.trigger('change') 或重构以使用本机浏览器 API。 ember 社区有一组测试助手，它们尽可能地模拟正常的浏览器行为。它们是作为 @ember/test-helpers package. It comes with a fillIn 测试助手开发和提供的，可以完成您想要实现的目标。

我不建议直接在您的项目中使用 @ember/test-helpers，因为这会为一个简单的任务添加另一个依赖项。相反，您可以只使用那里的实现作为蓝图：https://github.com/emberjs/ember-test-helpers/blob/v1.6.1/addon-test-support/@ember/test-helpers/dom/fill-in.ts

简化后应该是这样的：

function fillIn(selector, value) {
  // TODO: Assert that selector does not match more than one element.
  let element = document.querySelector(selector);

  // TODO: Firefox does not trigger the `focusin` event if the window
  //       does not have focus.
  element.focus();

  // TODO: Handle elements that aren't a control.
  element.value = value;

  element.dispatchEvent(new Event('input'));
  element.dispatchEvent(new Event('change'));
}

这可能会导致异步工作。因此，您应该在继续之前等待该工作完成。 Ember 附带一个 settled test helper therefore. As this one is ember-specific it won't work on other projects. But you may find inspiration by the waitFor() and waitUntil()，它让您等待 UI 的特定状态。但这将是另一个问题的主题。

在注入用户时绕过 Ember 验证并通过 jquery val

Bypassing Ember validation while injecting a user and pass with jquery val

jquery

ember.js