一個漂亮的js表單驗證頁面+驗證碼

時間 2019-11-09
標籤一個漂亮表單驗證頁面驗證碼欄目 JavaScript 简体版
原文原文鏈接
一個漂亮的js表單驗證頁面

見圖知其意，
html
主要特性git
帶密碼安全係數的判斷
其餘的就沒有啥啦
嘿嘿嘿
固然，其代碼也在Github上github
我也準備了一套能夠直接Ctrl + v; Ctrl + c 運行的代碼canvas
<!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>