如何将JavaScript的validCNP校验函数绑定到HTML表单实现数字校验

下面是可直接运行的完整HTML代码，已经集成你提供的校验函数，符合输入校验后控制台打印结果的要求：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CNP校验工具</title>
</head>
<body>
    <form id="cnpCheckForm">
        <label for="cnpInput">请输入13位CNP编码：</label>
        <input type="text" id="cnpInput" maxlength="13" placeholder="仅允许输入13位数字">
        <button type="submit">提交校验</button>
    </form>

    <script>
        // 你提供的原始校验函数
        function validCNP( p_cnp ) {
            var i=0 , year=0 , hashResult=0 , cnp=[] , hashTable=[2,7,9,1,4,6,3,5,8,2,7,9];
            if( p_cnp.length !== 13 ) { return false; }
            for( i=0 ; i<13 ; i++ ) {
                cnp[i] = parseInt( p_cnp.charAt(i) , 10 );
                if( isNaN( cnp[i] ) ) { return false; }
                if( i < 12 ) { hashResult = hashResult + ( cnp[i] * hashTable[i] ); }
            }
            hashResult = hashResult % 11;
            if( hashResult === 10 ) { hashResult = 1; }
            year = (cnp[1]*10)+cnp[2];
            switch( cnp[0] ) {
                case 1  : case 2 : { year += 1900; } break;
                case 3  : case 4 : { year += 1800; } break;
                case 5  : case 6 : { year += 2000; } break;
                case 7  : case 8 : case 9 : { year += 2000; if( year > ( parseInt( new Date().getYear() , 10 ) - 14 ) ) { year -= 100; } } break;
                default : { return false; }
            }
            if( year < 1800 || year > 2099 ) { return false; }
            return ( cnp[12] === hashResult );
        }

        // 表单提交绑定校验逻辑
        document.getElementById('cnpCheckForm').addEventListener('submit', function(e) {
            // 阻止表单默认提交刷新页面的行为
            e.preventDefault();
            const inputValue = document.getElementById('cnpInput').value.trim();
            const checkResult = validCNP(inputValue);
            console.log(checkResult ? 'Valid' : 'Invalid');
        })
    </script>
</body>
</html>

• 输入框做了最大长度限制，最多只能输入13个字符
• 打开页面输入内容后点击提交校验按钮，按F12打开浏览器控制台切换到Console标签即可看到校验结果
• 如果需要在页面上显示校验结果，可在console.log对应位置新增DOM操作逻辑修改页面内容即可

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