如何将输入框数字值传递给BSN校验JavaScript函数

先确认你的HTML结构（参考示例） #

确保输入框和按钮有明确标识（比如id），方便后续获取值：

<input type="number" id="bsnInput" min="0" max="999999999" placeholder="输入9位BSN">
<button id="checkBsnBtn">校验BSN</button>
<div id="checkResult"></div>

方案1：原生JavaScript实现 #

无需依赖jQuery，直接通过原生DOM操作获取输入值并传递给校验函数：

// 你的BSN 11-proef校验函数示例（可替换成你已实现的版本）
function bsn_check(bsn) {
  if (bsn.toString().length !== 9) return false;
  let sum = 0;
  const digits = bsn.toString().split('').map(Number);
  for (let i = 0; i < 8; i++) {
    sum += digits[i] * (9 - i);
  }
  sum -= digits[8];
  return sum % 11 === 0;
}

// 绑定按钮点击事件
document.getElementById('checkBsnBtn').addEventListener('click', function() {
  // 获取输入框值并转为数字
  const inputBsn = parseInt(document.getElementById('bsnInput').value, 10);
  
  // 先做基础校验：排除非数字、长度不足9位的情况
  if (isNaN(inputBsn) || inputBsn.toString().length !== 9) {
    document.getElementById('checkResult').textContent = '请输入有效的9位BSN数字';
    return;
  }
  
  // 调用校验函数并展示结果
  const isValid = bsn_check(inputBsn);
  document.getElementById('checkResult').textContent = isValid ? 'BSN有效' : 'BSN无效';
});

方案2：修正jQuery选择器问题 #

如果坚持使用jQuery，核心是确保选择器与HTML元素的标识完全匹配（拼写、类型都不能错）：

// 你的BSN校验函数（同前）
function bsn_check(bsn) {
  if (bsn.toString().length !== 9) return false;
  let sum = 0;
  const digits = bsn.toString().split('').map(Number);
  for (let i = 0; i < 8; i++) {
    sum += digits[i] * (9 - i);
  }
  sum -= digits[8];
  return sum % 11 === 0;
}

// 页面加载完成后绑定事件
$(document).ready(function() {
  $('#checkBsnBtn').click(function() {
    const inputBsn = parseInt($('#bsnInput').val(), 10);
    
    if (isNaN(inputBsn) || inputBsn.toString().length !== 9) {
      $('#checkResult').text('请输入有效的9位BSN数字');
      return;
    }
    
    const isValid = bsn_check(inputBsn);
    $('#checkResult').text(isValid ? 'BSN有效' : 'BSN无效');
  });
});

关键注意事项 #

• 选择器失败的常见原因是拼写错误，或者用了错误的选择器类型（比如把id选择器#xxx写成类选择器.xxx）
• 提前对输入值做基础校验，避免把空值、非数字、长度不符合的内容传入校验函数
• 若使用type="number"输入框，注意用户可能输入小数或少于9位的数字，需提前拦截

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