简易代码实现预设账号(卡密)登录页面的验证

学完以下内容,你就可以实现一个静态登录验证功能啦


简易代码实现预设卡密登录页面的验证

提示:以下是本篇文章正文内容,下面案例可供参考

一、html中设计Login登录文本框

代码如下:

<center><p>Login</p></center>
      <center><input id="zy" type="text" placeholder="请输入卡号"></center>     
      <center><input id="mima" type="password"  placeholder="请输入卡密"></center>
      <center><input type="button" value="登录" onclick="msgbox()"></center>

一个Login文本
两个文本输入框
一个登录按钮
备注:这里需要将卡号和卡密预设为两个不同的id,以及登录点击onclick事件预设变量为msgbox,后续js中要引用

二、JS中实现验证预设卡密

首先对点击事件变量msgbox写function触发功能
下一步,获取用户输入两个文本框的值并作为两个变量分别存储起来,命名为acc和psw

    var acc = document.getElementById("zy").value;
    var psw = document.getElementById("mima").value;

接下来开始预设卡号卡密,这里我预设了两套账号用于登录验证

 	var acc1 ="qzw";
    var psw1 ="666";
    var acc2 ="love";
    var psw2 ="forever";

接着是 if else 实现验证对预设卡密的验证功能

if(acc==acc1&&psw==psw1 || acc==acc2&&psw==psw2)
    {
        
        alert('登录成功');
        window.location.href="跳转页面.html";
    }
    else
    {
        alert('登录错误,请联系开发者获取账号');
        
    }
    

当输入正确预设卡号卡密时
效果如图
在这里插入图片描述
当输入错误卡号卡密时
效果如图在这里插入图片描述

完整代码如下:

function msgbox()
{
    var acc = document.getElementById("zy").value;
    var psw = document.getElementById("mima").value;
    var acc1 ="qzw";
    var psw1 ="666";
    var acc2 ="love";
    var psw2 ="forever";
    if(acc==acc1&&psw==psw1 || acc==acc2&&psw==psw2)
    {
        
        alert('登录成功');
        window.location.href="跳转页面.html";
    }
    else
    {
        alert('登录错误,请联系开发者获取账号');
        
    }
    
}

总结

以上就是今天要讲的内容,本文仅仅简单介绍了静态登录界面的验证。

  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你可以使用 Node.js 来实现一个简单的验证系统。下面是一个基本的实现示例: 1. 首先,你需要创建一个列表,可以将存储在数据库或者文件中。每个可以包含一个唯一的标识符和状态(已使用或未使用)。 2. 在你的 Node.js 项目中安装依赖项。可以通过运行以下命令安装 Express 和其他必要的库: ``` npm install express body-parser ``` 3. 创建一个 Express 应用并置路由。在你的主文件中,添加以下代码: ```javascript const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); // 处理验证的 POST 请求 app.post('/verify', (req, res) => { const cardCode = req.body.cardCode; // 获取请求中的 // 在这里进行验证逻辑 // 检查是否存在,以及状态是否为未使用 // 如果验证成功,更新状态为已使用 // 返回适当的响应给客户端,表示验证结果 }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 4. 在 `/verify` 路由中,你可以编写验证逻辑。根据你的具体需求,可以使用数据库查询来检查的状态,并在验证成功后更新状态为已使用。 这只是一个简单的示例,你可以根据自己的需求进行扩展和改进。需要注意的是,这个示例还缺少错误处理和安全性措施,你可能需要根据实际情况进行补充。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值