html实现简单非空验证和登录验证
实现简单非空验证和登录验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="..//js/jquery-3.3.1.min.js"></script>
<title>Document</title>
<style>
tr {
text-align: center;
}
span {
display: none;
}
table {
margin: 0 auto;
margin-top: 300px;
}
</style>
</head>
<body>
<div>
<form action="../T11/demo2.html" οnsubmit="return login()" method="get">
<table border="1" width="250px">
<tr>
<td colspan="2">用户登录</td>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" id="name" οnblur="mname(this)">
<span id="bb">用户名不能为空</span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" id="pwd" οnblur="mpwd(this)">
<span id="aa">密码不能为空</span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="登录">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</div>
</body>
<script>
//全局变量用户名密码
var name = ""
var pwd = ""
//非空验证用户名
function mname(obj) {
//获取用户名文本框的值
name = $("#name").val();
//判断用户名文本框是否空值
if (name.trim() == "") {
//空值运行
$("#bb").show();
}
}
//非空验证密码
function mpwd(obj) {
//获取密码文本框的值
pwd = $("#pwd").val();
//判断密码文本框是否空值
if (pwd.trim() == "") {
$("#aa").show();
}
}
//登录按钮验证
function login() {
if (name.trim() == "" || pwd.trim() == "") {
alert("用户名或者密码不能为空")
return false
} else if (name.trim() == "123" && pwd.trim() == "123") {
alert("登录成功")
return true
} else {
alert("用户名或者密码错误")
return false
}
}
</script>
</html>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)