使用JavaScript填充登录表单后验证失败，求助排查原因

问题现象 #

• 用JS直接给输入框的.value赋值用户名和密码后，表单显示已填充，但点击登录提示「用户名或密码错误」
• 手动填写用户名密码后，在控制台调用按钮的.click()方法可正常登录
• 控制台查看loginUsername和password输入框的value属性值均正确

用户代码 #

JavaScript代码 #

function doStuff(){
        document.getElementById('loginUsername').value = "username@email.com";
        document.getElementById('password').value = "password123"
        document.getElementsByClassName('button ok')[0].click();
    }
    doStuff();

对应的HTML表单 #

<form data-v-d9a0abfc="" data-v-48366e1e="" role="form" class="form loginForm">
      <h2 data-v-d9a0abfc="" role="region" class="visuallyhidden">Login form</h2>
      <label data-v-d9a0abfc="" for="loginUsername" class="loginLabel">Username</label>
      <input data-v-d9a0abfc="" spellcheck="false" type="text" id="loginUsername" name="loginUsername" autofocus="autofocus" class="form-control loginField">
      <label data-v-d9a0abfc="" for="password" class="loginLabel">Password</label>
      <input data-v-d9a0abfc="" type="password" id="password" name="password" autofocus="autofocus" class="form-control loginField">
      <div data-v-d9a0abfc="" class="">
        <div data-v-304a83cb="" data-v-d9a0abfc="" role="alert" aria-relevant="additions removals" style="display: none;">
        </div>
        <div data-v-7224d6b7="" data-v-d9a0abfc="" class="ace-button" id="accept-button">
          <button data-v-7224d6b7="" aria-describedby="11" tabindex="0" type="button" class="button ok">
          Login
          </button>
        </div>
      </div>
    </form>

解决方法 #

1. 触发输入框的原生事件（最可能解决） #

从HTML里的data-v-*属性能看出这个站点用了Vue这类前端框架，框架会监听input/change事件来同步内部数据，直接赋值.value不会触发这些事件，导致框架没拿到真实输入值。

修改代码，手动触发事件：

function doStuff(){
    const usernameInput = document.getElementById('loginUsername');
    const passwordInput = document.getElementById('password');
    const loginBtn = document.getElementsByClassName('button ok')[0];

    // 赋值
    usernameInput.value = "username@email.com";
    passwordInput.value = "password123";

    // 触发input事件，通知框架更新数据
    usernameInput.dispatchEvent(new Event('input'));
    passwordInput.dispatchEvent(new Event('input'));

    // 加小延迟确保事件处理完成，再点击登录
    setTimeout(() => {
        loginBtn.click();
    }, 100);
}
doStuff();

如果input事件不行，可换成change事件试试：

usernameInput.dispatchEvent(new Event('change'));
passwordInput.dispatchEvent(new Event('change'));

2. 模拟真实输入过程 #

如果站点有实时加密或特殊验证逻辑，逐个字符输入更贴近手动操作：

// 封装模拟输入的函数
function simulateInput(input, value) {
    input.focus();
    input.value = '';
    // 逐个字符输入并触发事件
    for (const char of value) {
        input.value += char;
        input.dispatchEvent(new Event('input'));
    }
    input.blur();
}

function doStuff(){
    const usernameInput = document.getElementById('loginUsername');
    const passwordInput = document.getElementById('password');
    const loginBtn = document.getElementsByClassName('button ok')[0];

    simulateInput(usernameInput, "username@email.com");
    simulateInput(passwordInput, "password123");

    setTimeout(() => {
        loginBtn.click();
    }, 200);
}
doStuff();

3. 直接提交表单 #

如果按钮逻辑依赖表单提交状态，可尝试直接调用表单的submit方法：

function doStuff(){
    const usernameInput = document.getElementById('loginUsername');
    const passwordInput = document.getElementById('password');
    const loginForm = document.querySelector('.loginForm');

    usernameInput.value = "username@email.com";
    passwordInput.value = "password123";

    usernameInput.dispatchEvent(new Event('input'));
    passwordInput.dispatchEvent(new Event('input'));

    setTimeout(() => {
        loginForm.submit();
    }, 100);
}
doStuff();

内容的提问来源于stack exchange，提问作者jumbotrone