验证码验证登录

最新推荐文章于 2019-05-16 20:13:28 发布

weixin_30244681

最新推荐文章于 2019-05-16 20:13:28 发布

阅读量201

点赞数

原文链接：http://www.cnblogs.com/houjiie/p/7149436.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        fieldset{
            border-radius: 10px;
            width: 350px;
            height: 500px;
            margin: 0px auto;
            background: darkgray;
        }
        .text{
            height: 30px;
            width: 250px;
            border-radius: 8px;
        }
        #code{
            font-family: Arial;
            font-style: italic;
            border:0;
            letter-spacing: 2px;
            color:blue;
        }
        span{
            position: relative;
            top: 10px;
            left: 30px;
        }

       input{
           position: relative;
           top: 10px;
           left: 30px;
       }
        input:hover{
             transform: scale(1.05);
             transition: all 0.5s ease-in-out;
        }
        #user{
            margin: 30px auto;
        }
        #verifyCode{
            margin: 30px auto;
            width: 200px;

        }
        #login{
            margin: 40px 40px;
            width: 200px;
            height: 30px;
        }
        #send{
            margin-left: 15px;
        }
    </style>
</head>
<body>
<div id="div">
    <fieldset>
    <span>账号：</span> <input type="text" class="text"  placeholder="请输入用户名"  id="user"><br>
    <span>密码：</span><input type="password" class="text"  placeholder="请输入密码"  id="password"><br>
    <input type="text" placeholder="请输入验证码" class="text"   id="verifyCode">
    <input type="button" value="发送验证码" id="code" οnclick="createCode()">
    <input type="submit" value="登录" id="login" οnclick="validCode()">
    </fieldset>
</div>
</body>
<script>
    var code;//code  代表验证码
    function createCode(){
        code='';
        var codeLength = 4;//验证码长度
        var checkCode = document.getElementById('code');
        var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H',
                'I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
        for(var i=0;i<codeLength;i++){//执行次数？   4     0 1 2 3
            var index = Math.floor(Math.random()*36);//[0,35]
            code += random[index];//code = code + random[index]   + 连接符
        }
        //alert(code);//四位?
        checkCode.value = code;
    }
    function validCode(){
        var inputCode = document.getElementById('verifyCode').value.toUpperCase();
        var  user = document.getElementById("user");
        var  password = document.getElementById("password");
        if(user.valueOf() == "" || password.value == ""){
            alert("用户名或密码不能为空");
        }else if(user.value != 'user' ||  password.value != 123456){
            alert('用户名或密码错误');
        }else if(inputCode.length <=0){
            alert('请输入验证码');
        }else if(inputCode != code){
            alert('@_@验证码输入错误');
            document.getElementById('verifyCode').value = '';
            createCode();
        }else{
            alert('登录成功');
        }
    }
</script>
</html>

转载于:https://www.cnblogs.com/houjiie/p/7149436.html

weixin_30244681

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
验证码验证登录

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> fieldset{ border-radius: ...
复制链接

扫一扫