手机端使用 form + input 输入框的那些坑

一般在 PC 端中使用 form 内嵌 input 输入框时，都知道在提交按钮（可以使用 type="submit" 的 input / button）来提交 form 前需要进行一些校验通过再把 form sumbit 给后端，或者给 form 绑定一个 onsumit 的事件然后，然后如果校验失败则使用 return false; 来阻止其提交。但如果在移动端呢？

移动端使用 form + input 输入框的那些坑

如果 form 内嵌 input 输入框时，如果 form 里面最后的一个输入项是 input 输入框，用户点击输入框会弹出虚拟键盘，键盘右下角会有 “前往” 按钮，如果用户不点你的 “提交” 按钮，直接点 “前往”，会发生什么事情呢？表单不经你对 “提交” 绑定的校验事件，直接触发 onsubmit 事件去提交表单了！

解决方案

兼容手动提交及虚拟键盘提交，加一个锁 lockSubmit 来防止重复提交，如果是虚拟键盘提交则人为 trigger 点击 “提交” 按钮统一处理

var lockSubmit = false; // 锁定 Submit 防止重复提交
$("#submit").click(function () { // 手动触发提交
  if (lockSubmit) {
    return false;
  }
  lockSubmit = true;
  if (validateForm()) { // 自己定义的校验表单的函数
    // 其他提交前的处理事件
    $("#form").submit();
  } else {
    lockSubmit = false;
  }
  return false;
});
// 虚拟键盘提交
var $form = $('#form');
$form[0].onsubmit = function () {
  if (!lockSubmit) { // 用户如果手动提交则 lockSubmit 为 true，不执行下面操作，直接提交
    if (validateForm()) { // 校验成功则触发模拟点击提交
      setTimeout(function () { // 触发提交
        $("#submit").click();
      }, 50);
    } 
    return false;
  }
}
function validateForm () {
  // 自己定义的校验表单的函数
  return true;
}