如何使用 javascript 捕获 html 表单提交？答案

【问题标题】：How to capture an html form submit with javascript?如何使用 javascript 捕获 html 表单提交？
【发布时间】：2013-05-22 21:41:57
【问题描述】：

目前我有几个文本输入，然后是一个类型图像提交按钮。在提交按钮上，我有 onmouseover、onmouseout 等。这会将它们发送到处理图像更改以实现悬停效果的 javascript 函数。我想做的是提交表格，然后做一些检查，比如密码是否匹配等等。我会使用表单标签的 action 属性将其提交给 javascript 函数吗？

【问题讨论】：

使用表单的提交处理程序。例如<form onsubmit="…" …>.
你能添加一些示例代码吗？
从可用性的角度来看，请在修改每个控件时完成客户端检查，而不是仅在提交时完成。我讨厌有任意密码要求的网站，直到我点击“提交”后才告诉我。（从安全的角度来看，假设服务器端表单被破解，并且没有运行任何客户端检查。）

标签： javascript html forms

【解决方案1】：

首先我推荐使用像 jQuery 这样的东西。它使代码更易于管理。以下是您在 jQuery 中的操作方式：

$('form').submit(function(e) {
    var validated = true;
    // do form validation

    if (!validated) {
        e.preventDefault();
    }

    return validated;
});

以下是您在纯 javascript 中的操作方式：

// function to make sure we add the event correctly no matter which browser
function addEvent(evnt, elem, func) {
    if (elem.addEventListener) {  // W3C DOM
        elem.addEventListener(evnt,func,false);
    } else if (elem.attachEvent) { // IE DOM
        elem.attachEvent("on"+evnt, func);
    } else { // No much to do
        elem[evnt] = func;
    }
}

// get first form on page
var form = document.forms[0];
addEvent('submit', form, function(e) {
    var validated = true;
    // do form validation

    if (!validated) {
        e.preventDefault();
    }

    return validated;
});

【讨论】：

【解决方案2】：

<form onsubmit="return cancel()"><input type="submit" /></form>
<script>
function cancel()
{
    //code validation
    var validated = false;
    if(!validated)return false;
    else return true;
}
</script>

【讨论】：