Shopify邮箱验证脚本改造：验证不通过阻止下一步并弹窗

我们有一家Shopify店铺，现有两个脚本：

• 邮箱格式验证脚本：仅在邮箱无效时输出文本提示，无阻止提交逻辑
• 表单必填项检查脚本：绑定到结账按钮点击事件，若必填项未填则弹窗提示并阻止进入下一步

需求：将邮箱验证脚本改造为与表单检查脚本逻辑一致——邮箱格式不正确时弹出提示弹窗，并阻止用户进入下一步

现有脚本 #

邮箱验证脚本 #

const validateEmail = (email) => {
return email.match(
/^(([^<>()\[\]\\.,;:\s@\"]+(\.[^<>()\[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
);
};

const validate = () => {
const $result = $('#result');
const email = $('#email').val();
$result.text('');

if (validateEmail(email)) {
$result.text(email + ' e-mail address is valid!');
$result.css('color', 'green');
} else {
$result.text(email + ' Lūdzu, ievadiet derīgu e-pastu lai pabeigt pirkumu');
$result.css('color', 'red');
}
return false;
}

$('#email').on('input', validate);

表单必填项检查脚本 #

document.getElementById("cart__checkout").onclick = function() {
  let allAreFilled = true;
  document.getElementById("myForm").querySelectorAll("[required]").forEach(function(i) {
    if (!allAreFilled) return;
    if (i.type === "radio") {
      let radioValueCheck = false;
document.getElementById("myForm").querySelectorAll(`[name=${i.name}]`).forEach(function(r) {
        if (r.checked) radioValueCheck = true;
      })
      allAreFilled = radioValueCheck;
      return;
    }
    if (!i.value) { allAreFilled = false;  return; }
  })
  if (!allAreFilled) {
    alert('Lūdzu, ievadiet Jūsu e-pastu lai pabeigt pirkumu!');
  }

};

缺失的核心逻辑 #

1. 邮箱验证仅绑定了输入事件，未关联结账按钮的点击触发逻辑，无法在提交时拦截
2. 未实现邮箱无效时的弹窗提示功能
3. 未将邮箱格式检查与必填项检查的逻辑合并，无法协同判断是否允许进入下一步

改造后的完整脚本 #

// 保留原邮箱验证正则函数
const validateEmail = (email) => {
  return email.match(
    /^(([^<>()\[\]\\.,;:\s@\"]+(\.[^<>()\[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  );
};

// 保留实时输入验证（给用户即时反馈）
const validateOnInput = () => {
  const $result = $('#result');
  const email = $('#email').val();
  $result.text('');

  if (validateEmail(email)) {
    $result.text(email + ' e-mail address is valid!');
    $result.css('color', 'green');
  } else {
    $result.text('Lūdzu, ievadiet derīgu e-pastu lai pabeigt pirkumu');
    $result.css('color', 'red');
  }
};

$('#email').on('input', validateOnInput);

// 整合必填项+邮箱格式检查到结账按钮点击事件
document.getElementById("cart__checkout").onclick = function(e) {
  let allAreValid = true;
  const emailInput = document.getElementById('email');
  const emailValue = emailInput.value.trim();

  // 第一步：检查所有必填项
  document.getElementById("myForm").querySelectorAll("[required]").forEach(function(i) {
    if (!allAreValid) return;
    if (i.type === "radio") {
      let radioValueCheck = false;
      document.getElementById("myForm").querySelectorAll(`[name=${i.name}]`).forEach(function(r) {
        if (r.checked) radioValueCheck = true;
      })
      allAreValid = radioValueCheck;
      return;
    }
    if (!i.value.trim()) { 
      allAreValid = false;  
      return; 
    }
  });

  // 第二步：检查邮箱格式（仅当邮箱已填写时验证）
  if (allAreValid && emailValue && !validateEmail(emailValue)) {
    allAreValid = false;
    alert('Lūdzu, ievadiet derīgu e-pastu lai pabeigt pirkumu!');
  }

  // 第三步：验证不通过则阻止默认行为
  if (!allAreValid) {
    // 必填项未填时的提示
    if (!emailValue || !allAreValid && !emailValue) {
      alert('Lūdzu, ievadiet Jūsu e-pastu lai pabeigt pirkumu!');
    }
    e.preventDefault(); // 阻止进入下一步
  }
};

改造说明 #

• 保留实时输入验证逻辑，给用户即时的格式反馈
• 将邮箱格式检查整合到结账按钮的点击事件中，与必填项检查顺序执行
• 新增e.preventDefault()方法，在验证不通过时阻止默认的提交/跳转行为
• 区分不同场景的提示文案：必填项未填提示补全信息，邮箱格式错误提示输入有效邮箱

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