action 和 onsubmit 的配合使用

easy · 发表于 2013-4-22 17:03:07

在表单中，action 属性是将表单内容提交到它所指定的 URL 上，这是浏览器的默认操作。然而在用户按下提交按钮时，将会

激发 submit 事件。如果 submit 事件返回 false ，那么浏览器就会阻止默认的提交操作，反之允许提交。

下面代码将演示上面说明的情况：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 事件的返回值 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" language="javascript">

</script>

</head>

<body>

  <form name="myForm" action="submit.htm" onsubmit="return checkData()">
   姓    名: <input type="text" name="myName" /> <br />

密    码：<input type="password" name="myPassword" /><br />

重复密码：<input type="password" name="myPassword2" /><br />

<input type="submit" value="注册" />
</form>

</body>

</html>

在上面代码中，创建了一个文本框和两个密码框，以及一个提交按钮：

当填写完表单，按下“注册”按钮提交时，就会激发 submit 事件(onsubmit="return checkData()") 。

需要注意的是，onsubmit 属性值为 "return checkData()"，这说明要从 checkData() 函数中获得返回值。

如果 checkData() 的返回值为 false，则阻止提交操作，否则将数据提交到 submit.htm 网页进行处理。

如果 onsubmit 的属性值省掉 return，而只有 checkData() ，那么在点击提交按钮时，虽然也会执行 checkData() 函数中的语句，但是在执行完函数之后，不论结果如何，都会执行默认的操作，即将数据提交到 submit.htm 中。这是因为没有使用 return 语句获得事件的返回值。

		自动登录	找回密码
密码			立即注册

[HTML] action 和 onsubmit 的配合使用

本帖子中包含更多资源

浏览过的版块