Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Cách kiểm tra số thập phân (decimal) trong JavaScript

Để validate số thập phân, dùng Regular Expression (RegExp) kết hợp phương thức test() hoặc match(). Dưới đây là các pattern phổ biến.

Regex cơ bản cho số thập phân


// Số dương/âm, bắt buộc có phần thập phân
/^[-+]?\d+\.\d+$/

// Giải thích:
// ^        : đầu chuỗi
// [-+]?    : dấu + hoặc - (tùy chọn)
// \d+      : một hoặc nhiều chữ số (phần nguyên)
// \.       : dấu chấm (escape)
// \d+      : một hoặc nhiều chữ số (phần thập phân)
// $        : cuối chuỗi

Các pattern mở rộng

Yêu cầuRegexVí dụ hợp lệ
Bắt buộc có phần thập phân/^[-+]?\d+\.\d+$/1.5, -0.25, +3.14
Cho phép số nguyên (có hoặc không phần thập phân)/^[-+]?\d+(\.\d+)?$/10, 10.5, -3
Cho phép .5 (không có phần nguyên)/^[-+]?(\d+\.\d+|\.\d+)$/.5, 0.5, 1.5
Cho phép dấu phân cách hàng nghìn/^[-+]?\d{1,3}(,\d{3})*(\.\d+)?$/1,000.50
Chỉ số dương/^\d+(\.\d+)?$/0, 10, 3.14

Hàm validate tái sử dụng


function isDecimal(str, options = {}) {
  const { allowInteger = true, allowSign = true, allowLeadingDot = false } = options;
  
  let regexStr = '^';
  if (allowSign) regexStr += '[-+]?';
  if (allowLeadingDot) {
    regexStr += '(\\d+\\.\\d+|\\.\\d+)';
  } else if (allowInteger) {
    regexStr += '\\d+(\\.\\d+)?';
  } else {
    regexStr += '\\d+\\.\\d+';
  }
  regexStr += '$';
  
  return new RegExp(regexStr).test(str);
}

// Test
console.log(isDecimal("1.5"));        // true
console.log(isDecimal("-0.25"));      // true
console.log(isDecimal("10"));         // true (allowInteger mặc định)
console.log(isDecimal("10", {allowInteger: false})); // false
console.log(isDecimal(".5", {allowLeadingDot: true})); // true
console.log(isDecimal("abc"));        // false

Lưu ý quan trọng

  • Dùng regex.test(str) thay vì str.match(regex) – nhanh hơn, trả về boolean.
  • Input từ form luôn là string – validate string trước khi parseFloat.
  • Cẩn thận locale: Việt Nam dùng dấu phẩy 1,5 thay vì chấm. Cần normalize trước: str.replace(',', '.').
  • parseFloat("1.5abc") trả về 1.5 (lặng lẽ bỏ qua rác) – KHÔNG dùng để validate.
  • Number("1.5") trả về NaN nếu không hợp lệ – có thể dùng nhưng không kiểm tra format chặt.

Ví dụ hoàn chỉnh với form


<input type="text" id="price" placeholder="Giá (VD: 1.500,00)">
<button onclick="validatePrice()">Kiểm tra</button>
<p id="msg"></p>

<script>
function validatePrice() {
  const input = document.getElementById('price').value.trim();
  // Normalize: bỏ dấu phân cách nghìn, đổi dấu phẩy thành chấm
  const normalized = input.replace(/\./g, '').replace(',', '.');
  
  if (/^[-+]?\d+(\.\d+)?$/.test(normalized)) {
    document.getElementById('msg').textContent = 
      `Hợp lệ: ${parseFloat(normalized).toLocaleString('vi-VN')} VNĐ`;
  } else {
    document.getElementById('msg').textContent = 'Sai định dạng số thập phân!';
  }
}
</script>