JavaScript chỉ cho phép số regex

Nếu bạn muốn cho phép người dùng của mình chỉ nhập giá trị số vào trường nhập văn bản HTML, bạn có thể tạo một biểu thức chính quy và kiểm tra giá trị đầu vào đối với nó bằng cách sử dụng phương pháp test()

Hãy thử ví dụ sau áp dụng đường viền màu đỏ cho hộp nhập văn bản nếu giá trị được nhập không phải là số nguyên hoặc dấu phẩy, áp dụng đường viền màu xanh lục nếu không

jQuery Allow Only Numeric Input in HTML Text Input Field





    
    
Note: This HTML text input only allow numeric keystrokes and decimal ('.')

Lưu ý rằng sự kiện input kích hoạt trên đầu vào bàn phím, kéo chuột, tự động điền và thậm chí sao chép-dán. Tuy nhiên, nó sẽ không kích hoạt nếu bạn dán cùng một chuỗi hoặc chọn và nhập lại cùng một ký tự bên trong đầu vào

Nếu bạn chỉ muốn cho phép các ký tự số (0-9) trong kiểu nhập văn bản HTML, hãy sử dụng biểu thức chính quy /^\d*$/. Trong ví dụ trên nếu bạn cũng muốn cho phép các giá trị âm, bạn có thể sử dụng biểu thức chính quy /^-?\d*[.]?\d*$/

Nhận toàn quyền truy cập vào Sách dạy nấu ăn biểu thức chính quy, Ấn bản thứ 2 và hơn 60 nghìn đầu sách khác, với bản dùng thử miễn phí 10 ngày của O'Reilly

Ngoài ra còn có các sự kiện trực tuyến trực tiếp, nội dung tương tác, tài liệu chuẩn bị chứng nhận, v.v.

Một trong những cách tốt nhất để kiểm tra xem một chuỗi chỉ chứa các số trong JavaScript hay không là sử dụng phương thức RegExp.test()

// Syntax for the RegExp method
RegExp.test(string);

Phương thức RegExp.test() kiểm tra sự khớp giữa biểu thức chính quy (RegEx) và chuỗi đã chỉ định, sau đó trả về kết quả dưới dạng giá trị Boolean

// Test if a string contains only 0 through 9
function checkForNums (input) {
  let result = /^\d+$/.test(input);
  console.log(result);
}

checkForNums('12345'); // Returns "true"

checkForNums('12c45'); // Returns "false"
checkForNums(''); // Returns "false"
checkForNums('-123'); // Returns "false"
checkForNums('1.2'); // Returns "false"

Với đoạn mã trên, chúng tôi lưu trữ một chuỗi trong một biến có tên đầu vào và chuyển nó vào hàm checkForNums. Sau đó, chúng tôi kiểm tra các chữ số 0-9 dựa trên biểu thức chính quy /^\d+$/

Để chia nhỏ RegEx cho bạn

• Dấu gạch chéo (/) đầu tiên là mở RegEx và dấu gạch chéo cuối cùng (/) là đóng nó
• Ký hiệu dấu mũ (^) khớp với phần đầu của chuỗi cần kiểm tra và ký hiệu đô la ($) khớp với phần cuối của nó
• \d là viết tắt của chữ số, tất cả các ký tự từ 0 đến 9. Đó là một cách ngắn gọn hơn để nói

  // Test if a string contains only 0 through 9
  function checkForNums (input) {
    let result = /^\d+$/.test(input);
    console.log(result);
  }
  
  checkForNums('12345'); // Returns "true"
  
  checkForNums('12c45'); // Returns "false"
  checkForNums(''); // Returns "false"
  checkForNums('-123'); // Returns "false"
  checkForNums('1.2'); // Returns "false"

  0 và cả hai có thể được sử dụng thay thế cho nhau
• Dấu cộng (+) là một định lượng. Điều đó có nghĩa là bất kỳ chữ số nào trong số này phải xuất hiện ít nhất một lần trong chuỗi đang được kiểm tra

Kiểm tra chỉ cần thất bại một lần để chức năng thực hiện công việc (kiểm tra xem một chuỗi chỉ có số). Nếu không thành công một lần, chúng tôi biết rằng có một ký tự khác 0-9 trong chuỗi và do đó, chuỗi không chỉ chứa các số

Vỏ cạnh

Trả về "Sai" trên Chuỗi rỗng

Nếu bạn truyền một chuỗi rỗng vào hàm trên, nó sẽ trả về “false. ”

Điều này là do chúng tôi đang sử dụng ký hiệu dấu cộng (+) làm bộ định lượng trong biểu thức chính quy của mình và ký hiệu dấu cộng yêu cầu bất kỳ chữ số nào từ 0 đến 9 phải xuất hiện một hoặc nhiều lần

Trong trường hợp bài kiểm tra phải trả về “true” cho các chuỗi trống, bạn có thể cấu trúc lại RegEx để sử dụng bộ định lượng nhân (*) thay thế, viết tắt của 0 hoặc nhiều lần

// Test if a string has only numbers
function checkForNums (input) {
  let result = /^\d*$/.test(input);
  console.log(result);
}

checkForNums(''); // Returns "true"

Trả về "Sai" trên Số âm

Nếu bạn truyền một số âm vào hàm trên, nó sẽ trả về “false. ”

Điều này, rõ ràng, là không chính xác. Nhưng nó giúp giữ cho RegEx của bạn đẹp và ngắn nếu bạn hoàn toàn chắc chắn rằng chuỗi của mình chỉ có thể chứa các số dương

Bạn có thể giải quyết trường hợp cạnh này bằng cách mở rộng biểu thức chính quy của mình để tính đến các chuỗi chứa chữ số và/hoặc chữ số có dấu trừ (-)

// Test if a string has only numbers
function checkForNums (input) {
  let result = /^\d*$|^-\d*$/.test(input);
  console.log(result);
}

checkForNums('123'); // Returns "true"
checkForNums('-123'); // Returns "true"

Trả về "Sai" trên Số hữu tỷ

Nếu bạn truyền một số hữu tỉ vào hàm trên, nó sẽ trả về false

Một lần nữa, điều này là không chính xác, nhưng nó giúp giữ cho bài kiểm tra của bạn nhỏ gọn và hiệu quả nếu bạn có thể chắc chắn rằng không có số thực nào được chuyển vào dưới dạng chuỗi cho hàm của bạn

Bây giờ, nếu không phải như vậy, bạn có thể tăng thêm RegEx của mình để tính các số dương, số âm và số hữu tỷ dương hoặc âm

// Test if a string has only numbers
function checkForNums (input) {
  let result = /^-\d*$|^\d*$|^\d.*$|^-\d.*$/.test(input);
  console.log(result);
}

checkForNums('1.23'); // Returns "true"
checkForNums('-1.23'); // Returns "true"

với chuỗi. cuộc thi đấu()

Một cách khác để kiểm tra xem một chuỗi chỉ có các số trong JavaScript hay không là kiểm tra lại chuỗi đó theo một biểu thức chính quy, nhưng lần này sử dụng Chuỗi. phương thức khớp ()

function checkForNums (input) {
  result = input.match(/^\d+$/) != null;
  console.log(result);
}

checkForNums('123'); // Returns "true"
checkForNums('1bc'); // Returns "false"
checkForNums(''); // Returns "false"

RegEx trong hàm này không tính đến số âm hoặc số hữu tỷ. Bạn có thể điều chỉnh biểu thức chính quy bằng các điều chỉnh tương tự mà chúng tôi đã áp dụng cho chức năng khác ở trên

Tóm lại là

Đây là nó. Cho dù bạn cần triển khai xác thực biểu mẫu trên giao diện người dùng hay logic nghiệp vụ phụ trợ để ngăn ứng dụng của bạn bị hỏng, tôi hy vọng hướng dẫn này sẽ giúp ích cho bạn

Nếu bạn có bất kỳ câu hỏi nào, đã gặp các trường hợp cạnh khác hoặc muốn chia sẻ các giải pháp khác với những độc giả còn lại của bài đăng này, hãy nhớ để lại câu trả lời bên dưới

Làm cách nào để chỉ cho phép các số trong regex JavaScript?

Regex chỉ cho phép số là gì?

Làm cách nào để chỉ cho phép các số trong JavaScript?

Làm cách nào để chỉ chấp nhận số và chữ cái trong JavaScript regex?