<!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>
<!--
action:提交数据到服务器，跳转页面
-->
<form action="success.html" method="get">
用户名：<input id="username" type="text" name="username" placeholder="用户名长度不能超过5位" >
<br>
密码：<input id="password" type="password" name="password" placeholder="密码长度不能超过5位" >
<br>
<button type="button" onclick="login()">登录</button>
</form>
<script>
function login(){
//username是input输入框对象的值 value属性来获取输入框的值
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
//用户名不能为空并且长度不能超过5位
// 密码不能超过6位
//字符串的length属性表示字符串的长度
if(username.length>5 || username ==""){
alert("当前用户名输入不合法");
//结束整个方法
return;
}
if(password.length>6 || password ==""){
alert("当前密码输入不合法");
return;
}
//匹配用户名和密码
if(username == "dhl" && password=="12345"){
//验证成功,跳转成功页面
//事件：用户与浏览器之间的行为交互
//点击、鼠标移入、鼠标移出
//通过JS强制跳转页面
alert("登录成功");
window.location.href="success.html";
}
}
// 当用户名输入框值改变时，就去判断值的合法性
var username=document.getElementById("username");
username.onchange=function(){
var value=username.value;
if(value.length>5 || value ==""){
alert("当前用户名输入不合法");
//结束整个方法
return;
}
}
//失去焦点事件
username.onblur=function(){
alert("摸我干嘛");
}
username.onfocus=function(){
alert("你还摸我");
}
</script>
</body>
</html>
1693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
