一个简单通用的登录页js逻辑

最新推荐文章于 2023-01-03 14:44:47 发布

金刚大力士

最新推荐文章于 2023-01-03 14:44:47 发布

阅读量2.1k

点赞数 1

分类专栏： JavaScript基础知识点文章标签：登录页js逻辑 login 前端登录页

本文链接：https://blog.csdn.net/qq_42177730/article/details/81202308

版权

本文介绍了如何创建一个基本的前端登录页面，包括HTML结构、CSS样式和JavaScript验证。登录页面包含用户名、密码输入框、验证码以及登录按钮。JavaScript部分实现了输入验证和登录功能，包括检查用户名、密码和验证码是否为空，并在输入错误时显示错误提示。

摘要由CSDN通过智能技术生成

注意：请勿复制源码，以免乱码

登录页部分很简单

只有一个（图标）/用户名

（图标）/密码

四位数的随机验证码

登录按钮

HTML部分

<div class=" login-box boxLineColor positionHorn">
<i class="leftBottom"></i>
<i class="rightBottom"></i>
<div class="login-title">欢迎登录CNITSEC</div>
<ul>
<li class="li-ipt">
<span class="smallIcon usaenameIcon"></span>
<i>用户名：</i>
<input type="" name="" class="username">
</li>
<li class="li-ipt">
<span class="smallIcon pwdIcon"></span>
<i>密码：</i>
<input type="password" name="" class="pwd">
</li>
<li class="li-vcode">
<input type="" name="" placeholder="验证码" class="verification">
<span class="verificationimg fb whiteColor">
<img src="/system/check_code" class="identifyImg" οnclick="this.setAttribute('src', '/system/check_code?nocache='+Math.random());" title="看不清？点击更换"/>
</span>
</li>
<li>
<input class="btnSubmit search-button js-btnSubmit" type="button" name="" value="登录">
</li>
</ul>