JS登录表单提交案例-优快云博客

本文档介绍了一个使用JavaScript阻止默认表单提交行为并进行条件判断的实例。当输入特定用户名时，表单将直接提交；否则，将阻止提交动作。此案例展示了如何通过JavaScript控制HTML表单的行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
	<script type="text/javascript">
	window.onload=function(){
		var btnTest=document.getElementById("btnTest");
		btnTest.onclick=function(e){
			var username=document.getElementById("username");
			if(username.value=="macrotea"){
				var loginForm=document.getElementById("loginForm");
				loginForm.submit();
			}else{
				//方式1：
/*				if(e){
					e.preventDefault();//标准方式		
				}else{
					event.returnValue=false;//IE方式
				}*/
				//方式2：
				return false;
			}	

		}
	}
	</script>
	<style type="text/csss">
		
	</style>
	</head>

	<body>
    <form id="loginForm" name="loginForm" method="post" action="http://macrotea.iteye.com">
        <p>用户名: <br />
            <input name="username" type="text" id="username" value="macrotea1" />
            <br />
            <input type="button" name="btnTest" id="btnTest" value="测试"/>
        </p>
    </form>
</body>
</html>

自己动手-表单2