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

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

---

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

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

一、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('登录错误，请联系开发者获取账号');
        
    }
    
}

---

总结

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