<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<style type="text/css">
.box{
width:400px;
margin:100px auto;
}
</style>
<body>
<div class="box">
<form action="#" method="get" onsubmit="return sub();">
用户名:<input type="text" name="text"/><span></span><br/><br/>
密码:<input type="password" name="password"/><span></span><br/><br/>
<input type="submit" value="提交" name=""/>
<input type="reset" value="重置" name="rest">
</form>
</div>
<script type="text/javascript">
function sub()
{
var text = document.getElementsByName('text')[0];
var password = document.getElementsByName('password')[0];
var span = document.getElementsByTagName('span');
if (text.value==''){
text.focus();
span[0].innerHTML="用户名不能为空";
return false;
}
else if (password.value==''){
password.focus();
span[0].innerHTML="";
span[1].innerHTML="密码不能为空";
return false;
}else{
return true;
}
}
window.onkeydown=function()
{
if (event.which == 13 || event.keyCode == 13) {
sub();
}
}
document.getElementsByName('rest')[0].onclick=function()
{
var str = confirm("确定重置吗?");
if (str==true) {
document.getElementsByName('rest')[0].reset();
}else{
return false;
}
}
</script>
</body>
</html>
Javascript(十五)练习表单提交
最新推荐文章于 2023-12-19 00:08:54 发布