一个漂亮的js表单验证页面+验证码

1 篇文章 0 订阅
1 篇文章 0 订阅

一个漂亮的js表单验证页面


见图知其意,
在这里插入图片描述

主要特性

  • 带密码安全系数的判断
  • 其他的就没有啥啦
  • 嘿嘿嘿

当然,其代码也在Github

我也准备了一套可以直接Ctrl + v; Ctrl + c 运行的代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        html,body {
            background: linear-gradient(to left bottom, #DD6455, #a18cd1);
            width: 100%;
            height: 100%;
        }
        .form-container{
            background-color:#fff;
            width: 768px;
            margin: 100px auto;
            height: 500px;
            border-radius: 10px;
            box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
            overflow: hidden;
        }
        .left{
            width: 50%;
            height: 100%;
            float: left;
            background: url(../imgs/AbstractSaltBeds_ZH-CN8351691359_1920x1080.jpg) center center/cover no-repeat;
        }
        .right {
            float: right;
            width: 50%;
            height: 100%;
        }
        form{
            padding: 20px;
            height: 100%;
        }
        .passw-div, .verifi-div, .repassw-div{
            position: relative;
        }
        h1 {
            margin: 10px 6px;
        }
        input {
            background-color: #eee;
            outline:none; /*不出现蓝色边框*/
            width: 60%;
            padding: 12px 15px;
            margin: 16px 2px;
            border-radius: 20px;
            border: 1px solid #CE6D39;
            transition: 300ms;
            font-size: 14px;
        }

        .register-div span {
            width: 35%;
            height: 40px;
            display: block;
            border-radius: 20px;
            line-height: 40px;
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            letter-spacing: 5px;
            border: 1px solid #CE6D39;
            background-color: #CE6D39;
            color: #FFFFFF;
            margin: 15px 0 0 15%;
            margin-left: 15%;
            transition: 300ms;
        }
        .register-div span:hover{
            background-color: #FF4B2B;
            box-shadow: 0 2px 11px #B34747
        }
        .safety-factor-div {
            position: absolute;
            line-height: 10px;
            top: -6px;
            left: 0px;
        }
        .safety-factor-div div{
            float: left;
            width: 30px;
            height: 10px;
            border-radius: 5px;
            margin: 0 8px;
            visibility: hidden;
        }
        .safety-factor-div span{
            float: left;
            margin-left: 10px;
            font-size: 12px;
            visibility: hidden;
        }
        .passw-div p,.repassw-div p{
            position: absolute;
            font-size: 12px;
            color: #FF4B2B;
            top: 28px;
            left: 220px;
        }
        .verifi-div canvas{
            position: absolute;
            top: 18px;
            left: 117px;
            width: 90px;
            height: 39px;
            border-radius: 20px;
            border: 1px solid #CE6D39;
            background-color: #CE6D39;
            text-align: center;
            line-height: 40px;
            transition: 300ms;
        }
        input:focus, .verifi-div canvas:hover{
            box-shadow: 0 2px 11px #B34747
        }

    </style>
</head>
<body>
<div class="form-container">
    <div class="left"></div>
    <div class="right">
        <form >
            <div class="header-div">
                <h1>注册</h1>
            </div>
            <div class="username-div">
                <input id="username" type="text" placeholder="用户名">
            </div>
            <div class="passw-div">
                <input id="passw" type="password" placeholder="密码">
                <p id="passw-err"></p>
                <div class="safety-factor-div">
                    <span id="safe-head">安全系数</span>
                    <div id="safe-d1" style="background-color:red;"></div>
                    <div id="safe-d2" style="background-color:#F0F028;"></div>
                    <div id="safe-d3" style="background-color:green;"></div>
                </div>

            </div>
            <div class="repassw-div">
                <input id="repassw" type="password" placeholder="确认密码">
                <p id="repassw-err"></p>
            </div>
            <div class="verifi-div">
                <input id="input-code" type="text" placeholder="请输入验证码">
                <canvas id="verifi-code"></canvas>
            </div>
            <div class="register-div">
                <span id="register">注册</span>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    'use strict';

    var username = document.getElementById('username');
    var myInput = document.getElementById('passw');
    var myReinput = document.getElementById('repassw');
    var inputCode = document.getElementById('input-code');
    var register = document.getElementById('register');
    var canvas = document.getElementById('verifi-code');

    var code, password, repassword;

    myInput.addEventListener('input',function(e){

        let safe_head = document.getElementById('safe-head');
        let safe_d1 = document.getElementById('safe-d1');
        let safe_d2 = document.getElementById('safe-d2');
        let safe_d3 = document.getElementById('safe-d3');
        let input_err = document.getElementById('passw-err');

        console.log("输入密码: " + myInput.value);

        password = myInput.value;
        safe_head.style.visibility = "visible";
        switch (checkPwd(password)) {
            case 0:{
                input_err.innerHTML = "密码不能小于6位";
                safe_d1.style.visibility = "visible";
                safe_d2.style.visibility = "hidden";
                safe_d3.style.visibility = "hidden";
                break;
            }
            case 1:{
                input_err.innerHTML = "";
                safe_d1.style.visibility = "visible";
                safe_d2.style.visibility = "visible";
                safe_d3.style.visibility = "hidden";
                break;
            }
            case 2:{
                input_err.innerHTML = "";
                safe_d1.style.visibility = "visible";
                safe_d2.style.visibility = "visible";
                safe_d3.style.visibility = "visible";
                break;
            }
            default:{
                input_err.innerHTML = "";
            }
        }
    });


    myReinput.addEventListener('input',function(e){
        let reinput_err = document.getElementById('repassw-err');

        console.log("重复密码输入:" + myReinput.value);

        repassword = myReinput.value;
        if(repassword != password){
            reinput_err.innerHTML = "确认密码不相同哦";
        }
        else{
            reinput_err.innerHTML = "";
        }
    });


    register.onclick = function () {
        if(username.value){
            if (password) {
                if(password.length >= 6){
                    if(myReinput.value){
                        if(myReinput.value == password){
                            if(code == inputCode.value.toUpperCase()){
                                alert("登入成功")
                            } else alert("验证码错误");
                        } else alert("重复密码不相同哦")
                    } else alert("请输入重复密码")
                }else alert("请输入符合规范的密码")
            } else alert("请输入密码");
        } else alert("请输入邮箱");
    }

    function createCode() {
        let code = "";
        var codeLength = 4;
        var selectChar = 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++) {
            var charIndex = Math.floor(Math.random() * 36);
            code += selectChar[charIndex];
        }
        console.log("生成验证码 " + code);
        return code;
    }

    function draw_canvas(code) {
        if (canvas) {
            var ctx=canvas.getContext('2d');
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.font="80px Verdana";
            ctx.strokeText(code,25,110);
            console.log("canvas 绘制完成")
        }
        else
            console.log("没有找到canvas")
    }

    function checkPwd(str){
        var pattern1 = /([0-9]+)/i;
        var pattern2 = /([a-z]+)/i;
        if(str.length<6 || str.length>20){
            return 0;
        }
        if(pattern1.exec(str)){
            if(pattern2.exec(str)){
                return 2
            }
            return 1;
        }
    }

    canvas.onclick = function () {
        code = createCode();
        draw_canvas(code);
    }
    window.onload = function () {
        code = createCode();
        draw_canvas(code);
    }

</script>
</html>

但是这样图片加载不上去,可以去github取,当然也可以用你自己的图片

  • 19
    点赞
  • 53
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简验证页面的示例代码: HTML: ```html <!DOCTYPE html> <html> <head> <title>验证码</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <div class="container"> <h1>验证码</h1> <form> <div class="form-group"> <label for="inputCode">请输入验证码:</label> <input type="text" class="form-control" id="inputCode" placeholder="验证码"> </div> <div class="form-group"> <img id="codeImg" class="code-img" src=""> <button type="button" class="btn btn-primary" id="refreshBtn">刷新</button> </div> <button type="submit" class="btn btn-success">提交</button> </form> </div> </body> </html> ``` CSS: ```css .container { max-width: 400px; margin: 0 auto; text-align: center; } h1 { margin-top: 50px; margin-bottom: 30px; } .form-group { display: flex; align-items: center; margin-bottom: 20px; } .form-control { flex: 1; margin-right: 10px; } .code-img { width: 120px; height: 40px; margin-right: 10px; } .btn-primary { margin-left: auto; } .btn-success { margin-top: 20px; } ``` JavaScript: ```javascript // 随机生成验证码 function generateCode() { var code = ''; var codeLength = 4; var codeChars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; for (var i = 0; i < codeLength; i++) { var randomIndex = Math.floor(Math.random() * codeChars.length); code += codeChars.charAt(randomIndex); } return code; } // 更新验证码图片 function updateCodeImg() { var code = generateCode(); var codeImg = document.getElementById('codeImg'); codeImg.src = 'code.php?code=' + code; return code; } // 刷新验证码 function refreshCode() { var code = updateCodeImg(); var inputCode = document.getElementById('inputCode'); inputCode.value = ''; inputCode.focus(); } // 初始加载验证码 refreshCode(); // 点击刷新按钮 var refreshBtn = document.getElementById('refreshBtn'); refreshBtn.addEventListener('click', function() { refreshCode(); }); // 提交验证验证码 var form = document.querySelector('form'); form.addEventListener('submit', function(event) { var inputCode = document.getElementById('inputCode'); var code = inputCode.value; if (code !== updateCodeImg()) { event.preventDefault(); alert('验证码错误,请重新输入!'); refreshCode(); } }); ``` 以上代码包含了一个随机生成验证码、更新验证码图片、刷新验证码、验证验证码的功能,并且使用了Bootstrap的样式。需要注意的是,以上代码中的验证码图片地址为'code.php',需要在后端编写一个生成验证码图片的脚本。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值