找回密码
当前位置：前端开发者 > JavaScript > 正文

前端登录页面开发_js生成验证码并验证

2018-07-16 分类：JavaScript 阅读(1113) 评论(0)

前端拖拽页面开发|web前端 开发工具|前端开发薪水知乎
html 代码

<!Doctype html>
<html>
<head>
    <meta charset=”utf-8″ />
    <title>前端集成开发工具:js验证码 </title>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
        .main_bar {
            width: 100%;
            height: 350px;
            margin-top: 200px;
        }
        .login_form {
            width: 30%;
            height: 80%;
            margin: 0 auto;
            /*border:2px solid #16A085;*/
            border-radius: 15px;
            padding: 10px;
            background: #ECF0F1;
        }
        .name,
        .pwd,
        .sbm_btn {
            display: block;
            width: 70%;
            margin: 0 auto;
            height: 35px;
            font-size: 16px;
            border-color: transparent;
            border-radius: 5px;
            border: 0;
            padding-left: 8px;
        }
        .yzm {
            height: 35px;
            margin: 0 auto;
            width: 72%;
            line-height: 35px;
            position: relative;
            margin-bottom: 10px;
        }
        .code {
            width: 50%;
            height: 35px;
            border: 0;
            border-color: transparent;
            font-size: 16px;
            border-radius: 5px;
            padding-left: 8px;
        }
        .code_pic {
            display: block;
            width: 40%;
            height: 35px;
            background-color: #34495e;
            color: #FFF;
            position: absolute;
            top: 0px;
            left: 60%;
            border-radius: 5px;
            text-align: center;
        }
        .name {
            margin-top: 20px;
        }
        .sbm_btn {
            text-align: center;
            background-color: #1abc9c;
            color: #fff;
            line-height: 35px;
        }
        .re_pwd {
            width: 25%;
            margin: 10px auto 10px;
        }
        .re_pwd a {
            text-decoration: none;
            font-size: 14px;
            color: #ccc;
        }
        .re_pwd a:hover {
            cursor: pointer;
            color: #16A085;
        }
        .errorTips {
            width: 70%;
            color: red;
            font-size: 14px;
            margin: 0 auto;
            height: 20px;
            line-height: 20px;
        }
    </style>
</head>
<body onload=”changeImg()”>
    <div class=”main_bar”>
        <div id=”login_form” class=”login_form”>
            <div class=”title”></div>
            <form action=”login.html”>
                <div id=”form_widgt”>
                    <input type=”text” name=”name” class=”name” placeholder=”请输入账号”>
                    <br>
                    <input type=”password ” name=”pwd ” class=”pwd ” placeholder=”请输入密码 “>
                    <br>
                    <p class=”yzm “>
                        <input type=”text ” name=”code ” id=”codeInput ” class=”code ” placeholder=”验证码 “>
                        <span id=”code ” class=”code_pic ” title=”看不清，换一张 “></span>
                    </p>
                    <p class=”errorTips ” id=”errorTips “></p>
                    <a href=”javascript:; ” name=”sbm ” class=”sbm_btn ” onclick=”return check() “>登录</a>
                </div>
            </form>
            <div class=”re_pwd “>
                <a href=” “>忘记密码了</a>
            </div>
        </div>
    </div>
    <script type=”text/javascript “>
// 声明一个变量用于存储生成的验证码
document.getElementById(‘code’).onclick=changeImg;
functionchangeImg(){
// 验证码组成库
vararrays=newArray(
‘1’,’2′,’3′,’4′,’5′,’6′,’7′,’8′,’9′,’0′,
‘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’,
‘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’
);
// 重新初始化验证码
code=”;
// 随机从数组中获取四个元素组成验证码
for(vari=0; i<4; i++){
// 随机获取一个数组的下标
varr=parseInt(Math.random()*arrays.length);
code+=arrays[r];
}
// 验证码写入span区域
document.getElementById(‘code’).innerHTML=code;
}
// 验证验证码
functioncheck(){
varerror;
// 获取用户输入的验证码
varcodeInput=document.getElementById(‘codeInput’).value;
if(codeInput.toLowerCase() ==code.toLowerCase()){
console.log(‘123’);
returntrue;
}else{
error=’验证码错误，重新输入’;
document.getElementById(‘errorTips’).innerHTML=error;
returnfalse;
}
}
</script>
</body>
</html>

前端开发视频html|web前端开发0基础视频|前端高级开发视频

赞(0)
前端开发者 » 前端登录页面开发_js生成验证码并验证
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论