<!--保持兼容的情况下 action 可以留着(在没有js的情况下还能登录)-->
<form id="login" action="login.php" method="post">
<p>Login form</p>
<div>
<!-- 用户名 提交的时候是 username -->
<label for="username">username: </label>
<input type="username" name="username" id="username" required>
</div>
<div>
<!-- 密码 password -->
<label for="password">password: </label>
<input type="password" name="password" id="password" required autocomplete="new-password" >
</div>
<!-- CSRF 校验,看自身需求,现代浏览器跨域倒是都会发 OPTIONS 请求 -->
<input type="hidden" name="csrf" value="1145141919810">
<div>
<!--type=submit 是提交按钮-->
<!--就是按下去会有提交事件,前面浏览器会校验类型什么的,所以不要在这边放按钮 onclick 之类的-->
<input type="submit" value="Login" >
</div>
</form>
xxxxxxxxxx
// 对 <form> 的 submit 加个事件
document.querySelector('#login').onsubmit = (e)=>{
// 阻止默认行为
e.preventDefault();
// 类型校验,post,一些弹窗什么的
if(true){
alert(`username: ${document.querySelector('#username').value}\npassword: ${document.querySelector('#password').value}`);
}else{
// 登录失败
}
return true;
}
$(document.querySelector('#password')).keypress(function(e){
// 13 = enter 按键
if (e.which == 13){
// 触发 submit 事件
document.querySelector('#login').submit()
}
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.