html +js实现简单的登录和验证

最新推荐文章于 2024-04-28 15:46:47 发布

newbaby2012

最新推荐文章于 2024-04-28 15:46:47 发布

阅读量1.6k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/newbaby2012/article/details/117843440

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

首先是html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>


<div>
  <form id="form">
      <div>
      用户名 <input id= "name"type="text" >
      </div>
      <span></span>
      <div>
      密码 <input id="pwd" type="password">
      </div>
      <input type="submit" value="登录">
  </form>
</div>

<script src="js/login.js"></script>
</body>
</html>

需要注意的是script的格式(src在尖括号<>里面)，以及位置在body最下面，因为js调用了addEventListener方法，如果放在body最上面，会报错uncaught (in promise): TypeError: Cannot read property 'addEventListen

然后是对应的js代码

const name = document.getElementById('name');


const form = document.getElementById('form');

form.addEventListener('submit', e => {
    e.preventDefault()
    const username = name.value.trim();
    if(username === '') {
        alert("null name");
    }
});

最后的结果如图:

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

newbaby2012

关注关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
html +js实现简单的登录和验证

首先是<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div> <form id="form"> <div> 用户名 <input id= "name"type="t
复制链接

扫一扫