HTML表单提交数据异常：选中选项文本篡改问题排查求助

前端交互与浏览器行为排查 #

• 检查Chrome自动填充/拼写修正干扰：Android Chrome可能开启了自动拼写修正或表单自动填充功能，哪怕选项处于禁用状态，浏览器的自动处理逻辑也可能异常触发。可以给select或表单添加autocomplete="off"，同时给option设置明确的value属性——当前代码里的option未配置value，浏览器默认会用选项文本作为提交值，一旦文本被自动修正就会导致提交错误。
• 验证移动端触摸交互异常：Android 10的Chrome在触摸选择控件时，可能存在文本识别或交互bug，比如快速触摸触发文本反转？试试给select添加readonly属性（配合唯一选中的选项，阻止用户交互触发意外修改），或者换成隐藏input+静态显示文本的方式，彻底绕开select控件的交互问题。
• 添加前端提交校验逻辑：在表单提交前对值进行校验，发现异常直接修正，代码示例：

  document.querySelector('form').addEventListener('submit', e => {
    const select = document.querySelector('select[name="var100a"]');
    if (select.value !== 'CU') {
      e.preventDefault();
      select.value = 'CU';
      alert('选项值异常，已自动修正');
      select.form.submit();
    }
  });
  

服务器端校验与生成逻辑排查 #

• 强制服务器端值校验：不管前端提交什么值，服务器都要校验var100a是否为合法有效值（仅允许为CU），不符合则直接修正或拒绝提交，避免脏数据入库。
• 检查HTML生成一致性：虽然用户反馈8份表单无差异，但仍需排查服务器生成HTML时的并发或缓存逻辑，比如生成option的代码是否存在字符串处理错误？添加日志记录每次生成该select的option文本和选中状态，确认服务器输出的HTML是否100%正确。
• 给option添加明确value属性：给选中的option加上value="CU"，这样就算文本被意外篡改，提交的value仍保持正确，修改后的代码片段：

  <select name='var100a'>
    <option disabled></option>
    <option disabled>AB</option>
    <option disabled>XY</option>
    <option SELECTED value="CU">CU</option>
    <option disabled>MN</option>
    <option disabled>EG</option>
    <option disabled>RO</option>
    <option disabled>SC</option>
    <option disabled>TS</option>
    <option disabled>CF</option>
    <option disabled>AK</option>
    <option disabled>NY</option>
    <option disabled>WF</option>
  </select>
  

特定环境兼容性排查 #

• 检查Chrome版本：让用户确认使用的Chrome具体版本，某些旧版本的Chrome在处理带disabled选项的select时可能存在已知bug，建议升级到最新稳定版。
• 排查输入法干扰：Android第三方输入法可能存在自动替换或拼写修正逻辑，让用户切换到系统默认输入法测试，看是否还会出现问题。

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