如何实现输入框仅验证并接受生成的随机产品密钥？

核心逻辑很直接：把每次生成的密钥存在一个作用域内的变量里，点击验证按钮时直接对比输入框内容和这个变量的值就行。你之前的问题大概率是没把生成的密钥持久存储下来，导致验证时拿不到正确的对比值。

修改要点： #

• 给输入框添加ID方便JS获取，同时修正原代码里[type=text]的语法错误，改成标准的type="text"
• 在作用域内声明变量专门存储当前生成的密钥
• 给Send按钮绑定点击事件，实现内容对比验证

完整修改后的代码 #

<p><button id="generate">Generate</button> <code id="outputs"></code></p>

<p><input type="text" id="keyInput">
<button id="acc">Send</button></p>

<script>
(function() {
    function getRandomInt( min, max ) {
         return Math.floor( Math.random() * ( max - min + 1 ) ) + min;
    }
    
    function generateProductKey() {
        var tokens = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",
            chars = 5,
            segments = 4,
            keyString = "";
            
        for( var i = 0; i < segments; i++ ) {
            var segment = "";
            
            for( var j = 0; j < chars; j++ ) {
                var k = getRandomInt( 0, 35 );
                segment += tokens[ k ];
            }
            
            keyString += segment;
            
            if( i < ( segments - 1 ) ) {
                keyString += "-";
            }
        }
        
        return keyString;

    }
    
    document.addEventListener( "DOMContentLoaded", function() {
        var generate = document.querySelector( "#generate" ),
            output = document.querySelector( "#outputs" ),
            keyInput = document.querySelector("#keyInput"),
            accBtn = document.querySelector("#acc");
        // 存储当前生成的有效密钥
        let currentProductKey = '';
        
        generate.addEventListener( "click", function() {
            currentProductKey = generateProductKey();
            output.innerHTML = currentProductKey;
            // 生成新密钥后清空输入框，优化体验
            keyInput.value = '';
        }, false);
        
        // 绑定验证按钮的点击事件
        accBtn.addEventListener("click", function() {
            const inputValue = keyInput.value.trim();
            // 严格匹配（区分大小写）
            if (inputValue === currentProductKey) {
                alert("密钥验证通过！");
                // 这里可以添加表单提交等后续逻辑
            } else {
                alert("无效密钥，请输入当前生成的密钥！");
                keyInput.focus();
            }
        }, false);
        
    });
    
})();
</script>

额外提示： #

• 如果需要忽略大小写验证，把对比逻辑改成inputValue.toUpperCase() === currentProductKey.toUpperCase()即可
• 用trim()去掉输入内容的首尾空格，避免用户误输入空格导致验证失败

内容的提问来源于stack exchange，提问作者GeniusBrothers