基于Chromium浏览器使用JavaScript代码片段填充并提交表单的验证问题

我正在尝试在Chromium浏览器环境下，使用JavaScript代码片段实现网页表单的填充与提交操作，编写的代码如下：

// sleep time expects milliseconds
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}
document.getElementById('username').value = 'user';
document.getElementById('password').value = 'password';
sleep(1000).then(() => {
  document.getElementsByClassName("loginfloatright")[0].click();
});

目前表单内容已被正确填充，但点击提交按钮后却触发了表单验证错误，提示必须输入用户名和密码。我曾尝试在设置输入框值后点击对应的表单字段（示例代码：document.getElementById('username').click();），但问题仍未解决，请问该如何处理此问题？

这种情况大概率是因为你直接修改输入框的value属性时，没有触发表单控件依赖的输入事件，导致表单的验证逻辑没识别到输入框已经被填充。现代前端框架（比如React、Vue）或者自定义表单逻辑，通常会通过input、change这类事件同步表单状态，单纯设置value不会自动触发这些事件。

你可以试试手动触发对应的事件，修改后的代码如下：

// sleep time expects milliseconds
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

// 填充用户名并触发input事件
const usernameInput = document.getElementById('username');
usernameInput.value = 'user';
usernameInput.dispatchEvent(new Event('input', { bubbles: true }));

// 填充密码并触发input事件
const passwordInput = document.getElementById('password');
passwordInput.value = 'password';
passwordInput.dispatchEvent(new Event('input', { bubbles: true }));

sleep(1000).then(() => {
  document.getElementsByClassName("loginfloatright")[0].click();
});

如果input事件无效，你可以尝试触发change事件，或者同时触发两个：

// 同时触发input和change事件
usernameInput.dispatchEvent(new Event('input', { bubbles: true }));
usernameInput.dispatchEvent(new Event('change', { bubbles: true }));

另外，部分表单还会监听focus和blur事件，你可以模拟真实用户的交互流程，在设置值前后添加这些操作：

usernameInput.focus();
usernameInput.value = 'user';
usernameInput.dispatchEvent(new Event('input', { bubbles: true }));
usernameInput.blur();

passwordInput.focus();
passwordInput.value = 'password';
passwordInput.dispatchEvent(new Event('input', { bubbles: true }));
passwordInput.blur();

通过模拟真实用户的操作步骤，基本能让表单的验证逻辑识别到输入内容，解决提交时的验证错误问题。

内容的提问来源于stack exchange，提问作者Mike C.