把你代码贴出来,看能不能修改
把你觉得不太对的地方说一下,最好贴一下代码
<!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" />
<title>Document</title>
</head>
<body>
<input id="user" type="text" type="text" />
<span style="display: none" id="usererror"
><b style="color: #f00">用户输入框不能为空</b></span
>
<br />
<input id="psd" type="password" type="text" />
<span style="display: none" id="psderror"
><b style="color: #f00">密码入框不能为空</b></span
><br />
<button id="bnt">登录</button>
<script>
let user = document.getElementById("user");
let psd = document.getElementById("psd");
let usererror = document.getElementById("usererror");
let psderror = document.getElementById("psderror");
let bnt = document.getElementById("bnt");
user.onblur = function () {
console.log(this.value, "==this");
if (this.value === "") {
usererror.style.display = "inline-block";
} else {
usererror.style.display = "none";
}
};
psd.onblur = function () {
console.log(this.value, "==this");
if (this.value === "") {
psderror.style.display = "inline-block";
} else {
psderror.style.display = "none";
}
};
bnt.onclick = function () {
let uservalue = user.value;
let psdvalue = psd.value;
if (uservalue == "") {
usererror.style.display = "inline-block";
}
if (psdvalue == "") {
psderror.style.display = "inline-block";
}
if (psdvalue == "" || uservalue == "") {
return;
}
if (uservalue == "admin" && psdvalue == "123") {
alert("登录成功!");
} else {
alert("用户名或密码登录不正确!");
}
};
</script>
</body>
</html>
<!-- 以下就是创建 a2.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">
<title>Document</title>
</head>
<body>
<!-- 1id为user带提示词 的用户名输入框 -->
<input type="text" id="user" placeholder="请输入用户名">
<!-- 2id为usererror 的红色b标签display:none让打开页面时候元素隐藏 -->
<b id="usererror" style="color: red;display:none">用户名输入框不能为空</b>
<br>
<!-- 3id为psd带提示词 的密码输入框 -->
<input type="password" id="psd" placeholder="请输入密码">
<!-- 4id为psderror 的红色b标签 display:none让打开页面时候元素隐藏-->
<b id="psderror" style="color: red;display:none">密码输入框不能为空</b>
<br>
<!-- 5登录按钮 -->
<button id="but">登录</button>
<!-- 以上的12345 可以拿到5分 -->
<script>
//1用户名绑定失去焦点事件
var user=document.getElementById("user")
var usererror=document.getElementById("usererror")
user.onblur=function(e){
//2失去焦点是没有输入数据
if (!this.value) {
//不存在值的时候 使用b标签提示
usererror.style.display='inline-block'
}else{
//存在值的时候 b隐藏
usererror.style.display='none'
}
}
//2密码绑定失去焦点事件
var psd=document.getElementById("psd")
var psderror=document.getElementById("psderror")
psd.onblur=function(e){
//2失去焦点是没有输入数据
if (!this.value) {
//不存在值的时候 使用b标签提示
psderror.style.display='inline-block'
}else{
//存在值的时候 b隐藏
psderror.style.display='none'
}
}
// 以上内容完成把 b标签的提示与否 以及密码|用户绑定失去焦点事件 和非空的处理 10分
//给登录按钮添加点击事件
var but=document.getElementById("but")
but.onclick=function(){
//非空的终止拦截
if (!user.value || !psd.value) {
return
}
//判断 密码是否123 用户是否admin
if ( user.value=="admin" && psd.value=="123") {
window.alert("登陆成功")
}else{
window.alert("用户名或密码不正确")
}
}
// 以上内容完成把登录添加点击事件 进行用户名和密码的判断处理 给出提示 5分
</script>
</body>
</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">
<title>Document</title>
<style>
#usererror,
#psderror {
color: red;
display: none;
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<input type="text" placeholder="请输入用户名" id="user"> <b id="usererror">用户名输入框不能为空</b>
</div>
<div>
<input type="password" placeholder="请输入用户名" id="psd"> <b id="psderror">密码输入框不能为空</b>
</div>
<div>
<button id="btn">登录</button>
</div>
<script>
var username = document.getElementById("user");
var userpassword = document.getElementById("psd");
var userError = document.getElementById("usererror");
var psdError = document.getElementById("psderror");
var btn = document.getElementById("btn");
username.onblur = function() {
// console.log(username.value.length);
if(username.value.length == 0) {
userError.style["display"] = "inline-block";
}else {
userError.style["display"] = "none";
}
}
userpassword.onblur = function() {
// console.log(username.value.length);
if(userpassword.value.length == 0) {
psdError.style["display"] = "inline-block";
}else {
psdError.style["display"] = "none";
}
}
btn.onclick = function() {
// console.log(1);
if(username.value == 'admin' && userpassword.value == '123') {
alert("登录成功")
}else {
alert("登录失败")
}
}
</script>
</body>
</html>
function check(thisform) {
var name=document.getElementById("name").value; //读取表单数据,创建变量
var pass=document.getElementById("pass").value;
if (name=="admin" && pass=="123456" || name=="admin2" && pass=="456789") {
//验证变量。此处设置账号、密码(可设置多组,用||隔开)
alert("登录成功!");
window.document.f.action="test.html"; //此处设置登录后跳转页面
window.document.f.submit();
}
else{
alert("用户名或密码错误!");
}
}