仅通过URL查询参数填充表单Email字段的取值异常及校验实现咨询

• 传参侧原始代码问题：手动拼接参数时在参数名中夹杂了空格，未对参数值做标准URL编码，易造成参数解析异常。
  修正实现：改用URLSearchParams原生API完成参数拼接，自动处理特殊字符编码、格式校验，避免路由/CDN拦截：

  const baseUrl = 'https://go.mysite.com/form.html';
  // 传入键值对，自动生成标准查询串
  const queryParams = new URLSearchParams({
    email: email_id
  });
  const targetFormUrl = `${baseUrl}?${queryParams.toString()}`;
  

• 接收侧原始代码问题：误用substring方法获取参数值——substring的第一个参数为数字格式的起始截取索引，传入字符串参数会被强制转换为0，直接从带?的原始查询串开头截取，自然会混入问号、参数名前缀，最终出现?emailmail@gmail.com这类冗余取值。
  修正实现：同样用URLSearchParams解析查询参数，加入邮箱格式校验，只有取值符合邮箱规则时才触发表单赋值，屏蔽UTM等无关参数的干扰：

  function handleAutoFill() {
    // 解析当前URL的所有查询参数
    const params = new URLSearchParams(window.location.search);
    const emailValue = params.get('email');
    // 邮箱格式校验，不满足则直接终止逻辑，不改动表单状态
    const emailFormatReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (!emailValue || !emailFormatReg.test(emailValue.trim())) {
      return;
    }
    // 校验通过后完成字段赋值
    form.setValues({
      Email: emailValue.trim()
    });
  }
  // 等待页面DOM加载完成后触发一次校验填充
  document.addEventListener('DOMContentLoaded', handleAutoFill);
  

• 方案适配说明：
  • 取值环节由原生API完成解析，自带URI解码能力，无需手动调用decodeURIComponent，从根源避免取值时混入查询串前缀的问题。
  • 邮箱正则校验会拦截所有非邮箱格式的参数值，哪怕URL中携带了多组UTM参数、甚至其他同名但值非法的参数，都不会触发表单字段的自动填充，保证表单初始状态不被干扰。

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