如何使用if语句仅采集表单中包含@符号的字段用于Piwik Pro事件上报

现有代码的核心问题 #

• 混淆了赋值运算符=和相等运算符==/===，你写的if (fieldHasAtSymbol = 'true')是把字符串true赋值给变量而非做判断，该语句永远返回真
• includes()方法返回的是布尔值true/false，不是字符串，不需要加引号做判断
• 校验@的时机错误：你要么是在页面初始化时仅判断第一个字段的初始值，要么是直接对DOM元素调用includes()而非元素的value属性，无法得到正确的判断结果
• 不需要提前判断整个字段要不要监听，应该在用户触发输入完成事件（change/focusout）时，实时校验当前输入值是否包含@，符合条件再上报即可

修复后可用代码 #

// 要监听的表单字段ID列表
const formFields = ['input_3_1','input_3_2','input_3_3','input_3_4']

function trackUnsubmittedField(fieldId){
  const formField = document.getElementById(fieldId)
  // 字段不存在直接跳过
  if(!formField) return

  // 封装上报逻辑，统一做@校验
  const reportIfValid = () => {
    const fieldValue = formField.value
    // 仅当值不为空且包含@时才上报
    if(fieldValue && fieldValue.includes('@')){
      _paq.push(['trackEvent','formAbandonment', fieldId, fieldValue])
    }
  }

  // 绑定对应事件
  if(formField.nodeName === "SELECT"){
    formField.addEventListener('change', reportIfValid)
  } else {
    formField.addEventListener('focusout', reportIfValid)
  }
}

// 遍历所有字段绑定监听
formFields.forEach(element => trackUnsubmittedField(element))

逻辑说明 #

• 对所有配置的表单字段统一绑定监听事件，不会出现漏绑的情况
• 每次用户完成输入触发事件时，才会实时读取当前输入值做校验，避免初始化时判断的逻辑错误
• 只有输入值非空且包含@符号时，才会调用Piwik Pro的自定义事件上报接口_paq.push，其他字段值不会被采集

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