JavaScript onsubmit 事件：表单被提交_JavaScript基础教程

JavaScript onsubmit 事件

表单被提交时发生时会触发 onsubmit 事件。点击 submit 提交按钮后，onsubmit 事件是先于表单提交发生的，因此可以利用 onsubmit 事件执行一些代码，如表单内容检测等。

下面的例子演示了，在提交表单时，弹出消息确认框进行确认，如果点击否，就不提交表单：

<html>
<head>

<script type="text/javascript">

function checkSubmit(){
    if ( confirm("确认提交表单吗？")){
        var your_name = testform.your_name.value;
        if( your_name == "" ){
            alert("请填写您的名字！");
	    testform.your_name.focus(); 
            return false;
        }
        alert("您好" + your_name + "！");
    } else {
        return false;
    }
}

</script>

</head>
<body>
<form name="testform" onsubmit="return checkSubmit();">
<p>
您的名字：<input type="text" name="your_name" />
<input type="submit" value=" 提交 " />
</p>
</form>
</body>
</html>

您可以在下面试试本例子效果：

语法解释

表单被提交则触发 onsubmit 事件，checkSubmit() 函数前要加上 return ，否则表单总是会被提交
例子中通过 confirm 确认框进行表单提交确认
当检测到没有填写名字时，进行提示并利用 return false 语句阻止表单提交
testform.your_name.focus() 用语在阻止表单提交后，将输入焦点设置到 input 文本输入框，这是开发中系统人性化的一个体现