随机验证码-账号密码验证

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了随机验证码-账号密码验证相关的知识,希望对你有一定的参考价值。

一、默认账号密码为admin 验证正确 然后继续验证验证码==随机验证码 全部正确跳转login.html

重点:Math.random(0-1)随机获取0-1的随机数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input{margin-bottom: 10px}

    </style>
</head>
<body>
<form action="">
    userName: <input type="text"><br />
    password: <input type="password"><br />
    验证码: <input type="text"><span id="span">1111</span><br />
    <input type="button" value="提交" id="btn">

</form>
<script>
    var span=document.getElementById("span")
    var btn=document.getElementById("btn")
    var input=document.getElementsByTagName("input")
//    alert(input[0])
//    span.innerHTML= parseInt(Math.random()*9000+1000)   //纯4位数字验证
    var str="asdjsakldjsalkjdl3513kjasad撒旦撒打算544561351231"
    var str2=""
    for(var i=0;i<4;i++){
       str2+= str.charAt(Math.random()*30+10)
    }
    span.innerHTML=str2
    btn.onclick=function () {
        if (input[0].value=="admin"){
            if(input[1].value=="admin"){
                if (input[2].value==span.innerHTML){
                   location.href="login.html"
                }else{
                    alert("请输入正确的验证码")
                }
            }else{
                alert("请输入正确的密码")
            }


        }else{
            alert("请输入正确的用户名")
        }
    }



</script>

</body>
</html>

 

以上是关于随机验证码-账号密码验证的主要内容,如果未能解决你的问题,请参考以下文章

Java登陆验证码问题

饿了么商家版账号密码正确怎么显示验证码无效?

JSP 设计教师与学生不同登陆界面(带验证码)

第四天-代码练习

简易登录表单的制作,包括用户名密码随机验证码(代码完整,复制即用)

python快速生成验证码(密码)