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