javascript可以以时间驱动的方式直接对客户端的输入作出响应,无需进过服务器端程序。这里举了一个判断输入是否为空的简单实例,来学习javascript的使用方法和作用。
首先在页面添加用户登录表单及表单元素:
<form name="form" method="post" action="">
用户名:<input name="user" type="text" id="user" /><br /><br />
密 码:<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 />
密 码:<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>
运行程序,单击“登录”按钮,结果如下: