有时候用户的操作未满足某些条件时,需要阻止某些元素的默认行为,如链接的跳转和表单的提交等,jQuery 提供了 preventDefault() 方法来实现。当用户未填写用户名时,阻止表单提交:
Demo:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../scripts/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("#sub").bind("click",function(){
var username = $("#username").val(); //获取元素的值
if(username==""){ //判断值是否为空
$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
//return false;
//event.preventDefault(); //阻止默认行为 ( 表单提交 )
}
})
})
</script>
</head>
<body>
<form action="/index.html">
用户名:<input type="text" id="username" value="" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>
<div id="msg"><b>我是divmsg</b></div>
</body>
</html>
如果不使用 return false;或event.preventDefault(); 还是会进行进行默认的 提交事件,使用事件即可阻止。