zoukankan      html  css  js  c++  java
  • 验证码验证登录

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

    fieldset{
    border-radius: 10px;
    350px;
    height: 500px;
    margin: 0px auto;
    background: darkgray;
    }
    .text{
    height: 30px;
    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;
    200px;

    }
    #login{
    margin: 40px 40px;
    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" onclick="createCode()">
    <input type="submit" value="登录" id="login" onclick="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>

    
    
  • 相关阅读:
    SQL中的cast和convert用法示例
    SpendidCRM:在adminlayout中修改了视图上的字段后,用MyGeneration生成修改脚本
    [转]ASP.NET数据绑定方法
    商城 5051课 纪要
    .net判断用户是否已登录
    Jquery 监视按键,按下回车键触发某方法
    Sharepoint中三个强力的工具(WPManager, OSSEventManager, FriendlyQuery),另增清除已删除用户
    错误处理:此网页不允许使用基本类型"System.Web.UI.MasterPage”该类型未注册为安全类型
    MOSS页面显示“根级别上的数据无效”
    读取/设置超链接或图片类型栏的值
  • 原文地址:https://www.cnblogs.com/houjiie/p/7149436.html
Copyright © 2011-2022 走看看