HTML number类型输入框01转toString后长度不符问题咨询

这个问题我之前也碰到过，核心原因是你把输入值转成数字的时候，前导零被自动忽略了！当你用toString().length时，其实是先把输入的01转成了数字1，再转成字符串"1"，长度自然变成1了。

正确的做法是直接获取输入框的原始字符串值，而不是先转成数字。因为type="number"的输入框，其value属性返回的是用户输入的原始字符串（哪怕包含前导零），直接取这个字符串的长度就可以得到准确的位数。

原生JavaScript写法 #

// 获取输入框元素
const mmInput = document.getElementById('exp-mm');
// 直接取value（字符串类型）
const inputStr = mmInput.value;
// 获取长度
const inputLength = inputStr.length; // 输入01时返回2，输入1时返回1

jQuery写法 #

// 直接获取输入框的value字符串
const inputStr = $('#exp-mm').val();
// 获取长度
const inputLength = inputStr.length; // 同样输入01返回2

额外提示 #

虽然maxlength="2"已经限制了最多输入2位，但如果需要确保用户输入的是合法的两位月份（比如01-12），可以在获取长度后再做进一步验证：

if (inputLength === 2) {
  // 转成数字验证合法性
  const month = parseInt(inputStr, 10);
  if (month >= 1 && month <= 12) {
    // 执行合法逻辑
  } else {
    alert('请输入有效的月份（01-12）');
  }
} else {
  alert('请输入两位数字的月份');
}

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