原生js实现简单验证

利用运算实现验证，原创

若你想在登录时实现验证环节，不妨参考一下这个

html环节

<span>你的结果是</span>
    <input type="text" name="yzm" id="yzm">
    <div id="num"></div>
    <button id="yz">验证</button>

css环节

   <style>
        span {
            color: orangered;
            font-family: 'Times New Roman', Times, serif;
            font-size: 20px;
        }

        #yzm {
            width: 110px;
            color: red;
            font-size: 40px;
        }

        #num {
            width: 150px;
            height: 30px;
            /* border: solid 1px black; */
            margin-top: 10px;
            color: brown;
            font-size: 25px;
            text-align: center;
        }

        #yz {
            width: 150px;
            height: 50px;
            margin-top: 10px;
        }
    </style>

js环节

<script>
    var yzm = document.getElementById('yzm');
    var num = document.getElementById('num');
    var yz = document.getElementById('yz');
    var a = Math.floor(Math.random() * 20);
    var b = Math.floor(Math.random() * 30);
    c = a + "+" + b + "=" + "?";
    d = a + b;
    num.innerHTML = c;
    yz.addEventListener('click', function fyz() {
        e = Number(yzm.value);
        //判断e是否为数字，是为ture,否为false
        function NNaN(value) {
            return (typeof value === "number" && !isNaN(value));
        }
        if (NNaN(e) == false || e !== d) {
            alert('再算算');
            yzm.value = '';
        } else {
            alert('验证通过');
        }
    })
</script>

最后实现图

展示图