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

最新推荐文章于 2024-03-01 20:16:14 发布

NEVERTHELESS0

最新推荐文章于 2024-03-01 20:16:14 发布

阅读量3.4k

点赞数 19

分类专栏： html js css 文章标签： html js css

本文链接：https://blog.csdn.net/u013583311/article/details/89405848

版权

html 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

css

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取,当然也可以用你自己的图片

NEVERTHELESS0

关注

19
点赞
踩
53

收藏

觉得还不错? 一键收藏
0
评论
一个漂亮的js表单验证页面+验证码

一个漂亮的js表单验证页面见图知其意，主要特性带密码安全系数的判断其他的就没有啥啦嘿嘿嘿当然，其代码也在GIthub上我也准备了一套可以直接Ctrl + v; Ctrl + c 运行的代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫