javaEE002.05 登录的 非空验证&取消默认行为&confirm()提示用户是否确认删除
程序员文章站
2022-05-31 15:59:19
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form空白</title>
</head>
<body>
<h1>登录</h1>
<form action="login_success.html">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td align="right">密码:</td>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="reset">
<input id="btnSub" type="submit" value="登录">
</td>
</tr>
</table>
</form>
<a href="../index.html">回首页</a>
</body>
</html>
复制这段登录代码
一、分析
1、获取用户名的值
原因是没有绑定id
不为空
二、提示用户是否确认删除，confirm()的使用
返回true或者false
三、完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form空白</title>
<script type="text/javascript">
window.onload = function(){
var btnEle = document.getElementById("btnSub");
btnEle.onclick = function(){
//1.取用户名值
var uname = document.getElementById("username").value;
if(uname == null || "" == uname){
alert("用户名不能为空，请重新输入！");
// var yOn = confirm("确认删除吗？");
// alert(yOn);
//取消默认行为
return false;
}
}
}
</script>
</head>
<body>
<h1>登录</h1>
<form action="login_success.html">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td align="right">密码:</td>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="reset">
<input id="btnSub" type="submit" value="登录">
</td>
</tr>
</table>
</form>
<a href="../index.html">回首页</a>
</body>
</html>