学完以下内容,你就可以实现一个静态登录验证功能啦
简易代码实现预设卡密登录页面的验证
提示:以下是本篇文章正文内容,下面案例可供参考
一、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('登录错误,请联系开发者获取账号');
}
}
总结
以上就是今天要讲的内容,本文仅仅简单介绍了静态登录界面的验证。