JavaScript基础 - 经典案例2 - 生成校验验证码

需求：

随机生成4位验证码，范围0-9a-z，用户输入后，点击确定按钮开始校验；

若用户未输入，弹出提示框；

若用户输入错误，显示红色的字，提示用户验证码输入错误，重新生成验证码，并清空输入框；

若用户输入正确，显示绿色的字，提示用户验证码输入正确；

当用户点击看不清换一张时重新显示新的验证码；

示例：

 

 

 

 

关键点：

1、生成随机数

2、修改DOM元素内容、样式

代码示例：

HTML:

<div class="code">
    <!-- 验证码显示 -->
    <div class="code_show">
        <span class="code_check">fr3d</span>
        <a href="javascript:;" class="change">看不清换一张</a>
    </div>

    <!-- 验证码输入 -->
    <div class="code_input">
        验证码：<input type="text">
        <!-- 提示验证码输入对错 -->
        <span class="tip"></span>
    </div>

    <button>确定</button>
</div>

CSS：

.code_input .tip {
    color: red;
}

/* 验证码输入正确时的样式 */
.code_input .tip.right {
    color: green;
}

JS

<script>
    // 获取显示验证码的span
    let codeCheck = document.querySelector('.code_check')
    // 获取'看不清换一张'按钮
    let change = document.querySelector('.change')
    // 获取提示验证码输入对错的span
    let tip = document.querySelector('.tip')
    // 获取验证码输入框
    let input = document.querySelector('.code_input input')
    // 获取确定按钮
    let btn = document.querySelector('.code button')

    // 确定按钮点击事件
    btn.addEventListener('click', () => {

        // 用户未输入提示'请输入验证码！'时
        if (!input.value) {
            return alert('请输入验证码！')
        }

        // 用户输入验证码与显示的验证码不一致时
        if (input.value !== codeCheck.innerHTML) {

            // 将用户输入框清空，便于用户下一次输入
            input.value = ''

            // 更换验证码
            codeCheck.innerHTML = getRandomCode(4)

            // 去掉提示验证码输入对错的span的 .right 样式
            tip.className = 'tip'

            // 设置提示验证码输入对错的span的内容，并退出函数
            return tip.innerHTML = '验证码输入错误！'
        }

        // 用户输入验证码正确
        tip.innerHTML = '验证码输入正确！'
        tip.classList.add('right')

    })

    // '看不清换一张'按钮点击事件
    change.addEventListener('click', () => {
        codeCheck.innerHTML = getRandomCode(4)

        // 清空提示验证码输入对错的span的内容
        tip.innerHTML = ''
    })

    // 生成随机数函数，范围是 min-max
    function getRandomNum(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min
    }

    // 生成 n 位随机验证码函数 /^[0-9a-z]{4}$/
    function getRandomCode(n) {

        // 验证码素材数组
        let arr = ['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']

        // 存放验证码的字符串
        let checkStr = ''

        for (let i = 0; i < n; i++) {
            // 调用getRandomNum函数，生成随机的 n 个数组下标
            let random = getRandomNum(0, arr.length - 1)

            // 将数组下标对应的元素拼接到字符串
            checkStr += arr[random]
        }

        return checkStr
    }
</script>

结束；