javascript的基本使用

javascript可以以时间驱动的方式直接对客户端的输入作出响应,无需进过服务器端程序。这里举了一个判断输入是否为空的简单实例,来学习javascript的使用方法和作用。

首先在页面添加用户登录表单及表单元素:

		<form name="form" method="post" action="">
			用户名:<input name="user" type="text" id="user" /><br /><br />
			密&nbsp;&nbsp;码:<input name="pwd" type="text" id="pwd" /><br /><br />
			<input name="Button" type="button" class="btn_grey" value="登录" />
			<input name="Submit" type="reset" class="btn_grey" value="重置" />
		</form>

然后自定义用于判断用户输入是否为空的javascript函数check():

			function check(){
				if(form.user.value==""){		//判断用户名是否为空
					alert("请输入用户名!");
					form.user.focus();
					return;
				}else if(form.pwd.value==""){	//判断密码是否为空
					alert("请输入密码!");
					form.pwd.focus();
					return;
				}else{
					form.submit();				//提交表单
				}
			}

最后在“登录”按钮的onclick事件中调用check()函数:

	<input name="Button" type="button" class="btn_grey" value="登录" onclick="check()"/>

完整的代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>验证用户登录</title>
		
	</head>
	<body>
		<form name="form" method="post" action="">
			用户名:<input name="user" type="text" id="user" /><br /><br />
			密&nbsp;&nbsp;码:<input name="pwd" type="text" id="pwd" /><br /><br />
			<input name="Button" type="button" class="btn_grey" value="登录" onclick="check()"/>
			<input name="Submit" type="reset" class="btn_grey" value="重置" />
		</form>
		
		<script language="JavaScript">
			function check(){
				if(form.user.value==""){		//判断用户名是否为空
					alert("请输入用户名!");
					form.user.focus();
					return;
				}else if(form.pwd.value==""){	//判断密码是否为空
					alert("请输入密码!");
					form.pwd.focus();
					return;
				}else{
					form.submit();				//提交表单
				}
			}
		</script>
	</body>
</html>

运行程序,单击“登录”按钮,结果如下:

猜你喜欢

转载自blog.csdn.net/skye_95/article/details/81152476