当输入框字符超10位时，如何用JS动态修改表单action目标？

问题（翻译后） #

当输入框「account」的字符长度超过10位时，需要访问server2服务器，请问如何通过JavaScript动态修改表单的action目标？相关表单代码如下：

最实用的方式是在表单提交前做判断，动态调整action目标，具体实现如下：

1. 先给表单和输入框补充标识（方便快速定位DOM元素）：

<form id="loginForm" method="get" action="server1/login.php" class="get-started-form flex items-center flex-wrap">
  <input name="account" type="text" id="accountInput">
  <button type="submit">提交</button>
</form>

2. 编写JavaScript逻辑，监听表单提交事件：

// 获取表单和输入框元素
const loginForm = document.getElementById('loginForm');
const accountInput = document.getElementById('accountInput');

// 拦截表单提交，先判断再修改action
loginForm.addEventListener('submit', function() {
  // 去掉首尾空格后计算长度，避免无效空格干扰判断
  const accountLen = accountInput.value.trim().length;
  
  // 根据长度切换目标服务器
  loginForm.action = accountLen > 10 ? 'server2/login.php' : 'server1/login.php';
});

如果需要实时跟随输入内容切换action（比如用户输入过程中就改变目标），可以监听输入框的输入事件：

accountInput.addEventListener('input', function() {
  const accountLen = this.value.trim().length;
  loginForm.action = accountLen > 10 ? 'server2/login.php' : 'server1/login.php';
});

注意点 #

• 确保server2的接口地址正确，且与server1的接口参数格式一致，避免提交后报错；
• 如果不用id定位元素，也可以用document.querySelector('.get-started-form')或document.querySelector('input[name="account"]')来获取对应DOM节点。

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