如何修复：小书签中的 'This field is required' 错误

Question

为 mongodb 大学网站 (https://university.mongodb.com/login) 创建自动登录小书签时出现问题，即使输入了数据，字段似乎还是空的，如果我 delete/add 一些字母然后 return 到原始数据。

检查 Html:

'Email' 字段：

输入名称="email" class="css-1d3375f e15weblb1" id="email" required="" type="email" value="" autocomplete="email"
'Password' 字段：

输入名称="password" class="css-1d3375f e15weblb1" id="password" required="" type="password" value="" autocomplete="current-password"
'Sign in' 按钮：

按钮 tabindex="0" class="css-1lcglra erk7wfm0" 类型="submit"

有了这些信息，我可以创建我的个人自动登录小书签：

javascript:(function(){
    document.getElementById('email').value='myEmail';
    document.getElementById('password').value='myPassword';
    document.getElementsByTagName('button')[0].click();
})();

字段已填写，按钮已激活，但字段显示为空，我在控制台中收到错误消息：HTTP400：无效请求 - 服务器无法处理请求，因为语法无效。（获取）POST - https://university.mongodb.com/login

如果我 delete/add 一些字母然后 return 到原始数据，错误就会消失。例子：电子邮件：'myPersonalEmail' 密码：'myPersonalPassword' //改变两个领域... 电子邮件：'myPersonal' 密码：'myPersonal' //返回初始值（正确的）... 电子邮件：'myPersonalEmail' 密码：'myPersonalPassword' //点击按钮一切正常

我该如何解决？

Answer 1

问题似乎是当您更改输入值时应用程序的内部状态没有更新。因此，当您单击提交按钮时，数据（电子邮件和密码）不会发送到服务器。您可以在开发人员工具的 网络选项卡 上查看。

为了使脚本工作，您必须在更改输入值后手动触发输入事件。问题是，该页面是使用 React 库构建的，所有事件都是真正的合成事件。

因此，在这种情况下触发事件比通常情况下要复杂一些。函数 setValue 更改输入值并触发事件。最终代码如下所示：

(function(){
    function setValue(input, value) {
        var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;

        nativeInputValueSetter.call(input, value);

        var ev2 = new Event('input', { bubbles: true});
        input.dispatchEvent(ev2);
    }

    setValue(document.getElementById('email'), 'myEmail');
    setValue(document.getElementById('password'), 'myPassword');
    document.getElementsByTagName('button')[0].click();
})();

如何修复：小书签中的 'This field is required' 错误

How to fix: 'This field is required' error in bookmarklet

javascript

bookmarklet

autologin