js表单事件及验证码案例

最新推荐文章于 2020-08-13 17:27:40 发布

smileForward

最新推荐文章于 2020-08-13 17:27:40 发布

阅读量276

点赞数

分类专栏：案例文章标签： javascript css css3 html5 html

本文链接：https://blog.csdn.net/weixin_45000814/article/details/105228569

版权

案例专栏收录该内容

11 篇文章 0 订阅

订阅专栏

效果图如下：
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input,
        button {
            height: 30px;
            margin: 20px 0;
            font-size: 20px;
        }

        button {
            margin: 0 20px;
        }

        span[name^="promptInfo"] {
            margin-left: 30px;
        }

        span[name="verifiCode"] {
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <form action="./BOM基本属性方法.html">

        登录账号：<input type="text" name="loginAccount" placeholder="请输入账号" required maxlength="16">
        <span name="promptInfo"></span><br>
        登录密码：<input type="text" name="loginPassword" placeholder="请输入密码" required> <span name="promptInfo1"></span><br>
        再次输入：<input type="text" name="loginPassword1" placeholder="请再次输入密码" required><br>
        验 证 码： <input type="text" name="inputVerifiCode" required><span name="verifiCode"></span><button
            type="button">看不清,重新刷新</button><span name="promptInfo2"></span><br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
    <script>

        var promptInfo = document.querySelector("[name='promptInfo']");// 账号提示信息的span

        var promptInfo1 = document.querySelector("[name='promptInfo1']");// 密码提示信息的span

        var promptInfo2 = document.querySelector("[name='promptInfo2']");// 验证码错误提示信息的span

        var loginAccount = document.querySelector("[name='loginAccount']");// 登录账号

        var loginPassword = document.querySelector("[name='loginPassword']");//登录密码

        var loginPassword1 = document.querySelector("[name='loginPassword1']");// 确认登录密码

        var verifiCode = document.querySelector("[name='verifiCode']");// 自动生成验证码

        var inputVerifiCode = document.querySelector("[name='inputVerifiCode']");// 输入验证码

        var oForm = document.querySelector("form");

        var btn = document.querySelector("button");

        // 随机验证码
        function randomVerifiCode() {

            var str = "0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";

            var str1 = "";

            for (let i = 0; i < 6; i++) {

                // 随机旋转
                var h = Math.random() < 0.5 ? -1 : 1;

                var zhuan = Math.random() * h * 30;

                // 随机字体大小
                var randomFontSize = parseInt(Math.random() * 15) + 20;

                var num = parseInt(Math.random() * str.length);

                if (str1.indexOf(str[num]) != -1) {

                    i--;
                    continue;

                }

                str1 += `<span style="transform:rotateZ(${zhuan}deg);display:inline-block;color:${randomColor()};font-size:${randomFontSize}px;">${str[num]}</span>`;

            }

            return str1;

        }

        // 随机颜色
        function randomColor() {

            var color = "#";

            for (let i = 0; i < 3; i++) {

                var num = parseInt(Math.random() * 256);

                if (num < 15) {

                    color = color + "0" + num.toString(16);

                }
                else {
                    color += num.toString(16);
                }

            }
            return color;
        }

        // 点击更新随机验证码
        btn.onclick = function () {

            verifiCode.innerHTML = randomVerifiCode();
        }
        // 提前调用显示在网页
        btn.onclick();

        // 获取焦点时,在span标签中输入提示
        loginAccount.onfocus = function () {

            promptInfo.innerHTML = "请您输入账号,不能为空,长度是8-16位";

        }
        // 输入数据,在span标签中输入提示
        loginAccount.oninput = function () {

            var length = loginAccount.value.length;
            promptInfo.style.color = "black";
            promptInfo.innerHTML = `目前输入${length}个字符,最少输入8个字符，最多还能输入${16 - length}个字符,请继续输入`;
        }

        //当失去焦点时, 判断, 输入的数据, 是否符合规范
        // 目前就判断数据的长度是8-16为字符
        loginAccount.onchange = function () {

            var length = loginAccount.value.length;

            if (length <= 16 && length >= 8) {

                promptInfo.style.color = "black";
                promptInfo.innerHTML = `目前输入${length}个字符,符合规范`;
            }
            else if (length > 16) {

                promptInfo.style.color = "red";
                promptInfo.innerHTML = `目前输入${length}个字符,超了，请停止输入并删除`;
            }
            else {

                promptInfo.style.color = "black";
                promptInfo.innerHTML = `目前输入${length}个字符,至少还需输入${8 - length}个字符,请继续输入`;
            }

        }

        // 获取焦点时,在span标签中输入提示
        loginPassword.onfocus = function () {

            promptInfo1.innerHTML = "请您输入密码,不能为空";

        }

        // 当点击提交按钮时,进行数据验证
        // 数据必须符合规范,才能执行提交表单效果
        // 否则会阻止表单提交
        // console.log(verifiCode.innerText);
        oForm.onsubmit = function (e) {

            var length = loginAccount.value.length;

            var length1 = loginPassword.value.length;

            if (!(length >= 8 && length <= 16)) {
                e.preventDefault();
                promptInfo.style.color = "red";
                promptInfo.innerHTML = '您输入的账号,不符合长度规范,请输入8-16位账号';
                return;
            }


            // 密码和确认密码验证
            if (loginPassword.value !== loginPassword1.value) {
                e.preventDefault();
                promptInfo1.style.color = "red";
                promptInfo1.innerHTML = '您两次输入的密码不一样,请重新输入';
                return;
            }

            // 验证码确认
            if (inputVerifiCode.value !== verifiCode.innerText) {
                e.preventDefault();
                promptInfo2.style.color = "red";
                promptInfo2.innerHTML = '您输入的验证码错误,请重新输入';
                return;
            }
        }

    </script>
</body>

</html>