Làm cách nào để hạn chế trường nhập thành số trong JavaScript?

Ngoài các thuộc tính thường được hỗ trợ bởi tất cả các loại

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

Các giá trị của thuộc tính danh sách là

<label for="ticketNum">Number of tickets you would like to buy:label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

Giá trị tối đa để chấp nhận cho đầu vào này. Nếu giá trị nhập vào phần tử vượt quá giá trị này, thì phần tử không xác thực được ràng buộc. Nếu giá trị của thuộc tính

<label for="ticketNum">Number of tickets you would like to buy:label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

Giá trị này phải lớn hơn hoặc bằng giá trị của thuộc tính

<input type="number" placeholder="Multiple of 10" />

Giá trị tối thiểu để chấp nhận cho đầu vào này. Nếu giá trị của phần tử nhỏ hơn giá trị này, thì phần tử không xác thực được ràng buộc. Nếu một giá trị được chỉ định cho

<input type="number" placeholder="Multiple of 10" />

Giá trị này phải nhỏ hơn hoặc bằng giá trị của thuộc tính

<label for="ticketNum">Number of tickets you would like to buy:label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

Thuộc tính

<input type="number" placeholder="Multiple of 10" />

Nếu nội dung của điều khiển có một hướng (LTR hoặc RTL) nhưng cần hiển thị trình giữ chỗ theo hướng ngược lại, bạn có thể sử dụng các ký tự định dạng thuật toán hai chiều Unicode để ghi đè hướng trong trình giữ chỗ;

Ghi chú. Tránh sử dụng thuộc tính

<input type="number" placeholder="Multiple of 10" />

Thuộc tính Boolean, nếu có, nghĩa là người dùng không thể chỉnh sửa trường này. Tuy nhiên,

<label for="ticketNum">Number of tickets you would like to buy:label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<input type="number" placeholder="multiple of 10" step="10" />

<label for="ticketNum">Number of tickets you would like to buy:label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

Ghi chú. Vì trường chỉ đọc không thể có giá trị, nên

<input type="number" placeholder="multiple of 10" step="10" />

<input type="number" placeholder="multiple of 10" step="10" />

Thuộc tính

<input type="number" placeholder="multiple of 10" step="10" />

<input type="number" placeholder="multiple of 10" step="10" />

Giá trị chuỗi là

<input type="number" placeholder="multiple of 10" step="10" />

Ghi chú. Khi dữ liệu do người dùng nhập không tuân theo cấu hình từng bước, tác nhân người dùng có thể làm tròn đến giá trị hợp lệ gần nhất, ưu tiên các số theo hướng dương khi có hai tùy chọn gần bằng nhau

Giá trị bước mặc định cho đầu vào

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />

Loại đầu vào

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

Các yếu tố

<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />

<label for="ticketNum">Number of tickets you would like to buy:label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<input type="text" inputmode="numeric" pattern="\d*" />

Cảnh báo. Về mặt logic, bạn sẽ không thể nhập các ký tự bên trong một đầu vào số không phải là số. Một số trình duyệt cho phép các ký tự không hợp lệ, một số khác thì không;

Ghi chú. Người dùng có thể sửa lại HTML của bạn ở hậu trường, vì vậy trang web của bạn không được sử dụng xác thực phía máy khách đơn giản cho bất kỳ mục đích bảo mật nào. Bạn phải xác minh ở phía máy chủ bất kỳ giao dịch nào trong đó giá trị được cung cấp có thể có ý nghĩa bảo mật dưới bất kỳ hình thức nào

Trình duyệt dành cho thiết bị di động hỗ trợ thêm cho trải nghiệm người dùng bằng cách hiển thị một bàn phím đặc biệt phù hợp hơn để nhập số khi người dùng cố gắng nhập một giá trị

Ở dạng cơ bản nhất, một đầu vào số có thể được triển khai như thế này

________số 8_______

Nhập số được coi là hợp lệ khi trống và khi nhập một số duy nhất, nhưng nếu không thì không hợp lệ. Nếu thuộc tính được sử dụng, đầu vào không còn được coi là hợp lệ khi trống

Ghi chú. Bất kỳ số nào cũng là một giá trị có thể chấp nhận được, miễn là nó là một (nghĩa là không phải NaN hoặc Infinity)

Đôi khi, thật hữu ích khi đưa ra gợi ý trong ngữ cảnh về dạng dữ liệu đầu vào sẽ có. Điều này có thể đặc biệt quan trọng nếu thiết kế trang không cung cấp nhãn mô tả cho mỗi

<input type="text" inputmode="numeric" pattern="\d*" />

<label for="ticketNum">Number of tickets you would like to buy:label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<label for="ticketNum">Number of tickets you would like to buy:label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />

Ở đây, chúng tôi có đầu vào

<input type="text" inputmode="numeric" pattern="\d*" />

<input
  type="number"
  placeholder="x10"
  step="10"
  min="0"
  max="100"
  id="number" />

<input type="number" placeholder="Multiple of 10" />

Theo mặc định, các nút lên và xuống được cung cấp để bạn bước số lên và xuống sẽ bước giá trị lên và xuống 1. Bạn có thể thay đổi điều này bằng cách cung cấp một thuộc tính, thuộc tính này nhận giá trị của nó là một số chỉ định số bước. Ví dụ trên của chúng tôi chứa một trình giữ chỗ nói rằng giá trị phải là bội số của 10, vì vậy sẽ hợp lý khi thêm giá trị

<input type="number" placeholder="multiple of 10" step="10" />

<input
  type="number"
  placeholder="x10"
  step="10"
  min="0"
  max="100"
  id="number" />

<input type="number" placeholder="multiple of 10" step="10" />

Trong ví dụ này, bạn sẽ thấy rằng các mũi tên bước lên và xuống sẽ tăng và giảm giá trị 10 lần mỗi lần chứ không phải 1. Bạn vẫn có thể nhập thủ công một số không phải là bội số của 10, nhưng số đó sẽ bị coi là không hợp lệ

Bạn có thể sử dụng các thuộc tính và để chỉ định giá trị tối thiểu và tối đa mà trường có thể có. Ví dụ: hãy cho ví dụ của chúng ta tối thiểu là

<input
  type="number"
  placeholder="x10"
  step="10"
  min="0"
  max="100"
  id="number" />

<input
  type="number"
  placeholder="x10"
  step="10"
  min="0"
  max="100"
  id="number" />

<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />

Trong phiên bản cập nhật này, bạn sẽ thấy rằng các nút bước lên và xuống sẽ không cho phép bạn xuống dưới 0 hoặc trên 100. Bạn vẫn có thể nhập số ngoài các giới hạn này theo cách thủ công, nhưng số đó sẽ bị coi là không hợp lệ

Một vấn đề với đầu vào số là kích thước bước của chúng là 1 theo mặc định. Nếu bạn cố gắng nhập một số có phần thập phân (chẳng hạn như "1. 0"), nó sẽ bị coi là không hợp lệ. Nếu bạn muốn nhập một giá trị yêu cầu số thập phân, bạn cần phản ánh điều này trong giá trị

<input type="number" placeholder="multiple of 10" step="10" />

<input
  type="number"
  placeholder="x10"
  step="10"
  min="0"
  max="100"
  id="number" />

<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />

Xem ví dụ này cho phép bất kỳ giá trị nào giữa

#number {
  width: 3em;
}

#number {
  width: 3em;
}

Các phần tử

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

Ví dụ: để điều chỉnh độ rộng của đầu vào chỉ rộng bằng mức cần thiết để nhập một số có ba chữ số, chúng ta có thể thay đổi HTML của mình để bao gồm một và để rút ngắn trình giữ chỗ vì trường sẽ quá hẹp đối với văn bản mà chúng ta

<input
  type="number"
  placeholder="x10"
  step="10"
  min="0"
  max="100"
  id="number" />

Sau đó, chúng tôi thêm một số CSS để thu hẹp chiều rộng của phần tử bằng bộ chọn

<label for="ticketNum">Number of tickets you would like to buy:label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

#number {
  width: 3em;
}

#number {
  width: 3em;
}

Kết quả trông như thế này

Bạn có thể cung cấp một danh sách các tùy chọn mặc định mà người dùng có thể chọn bằng cách chỉ định thuộc tính, thuộc tính chứa giá trị của nó là

<label for="ticketNum">Number of tickets you would like to buy:label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" />
<span class="validity">span>

<datalist id="defaultNumbers">
  <option value="10045678">option>
  <option value="103421">option>
  <option value="11111111">option>
  <option value="12345678">option>
  <option value="12999922">option>
datalist>

<label for="ticketNum">Number of tickets you would like to buy:label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" />
<span class="validity">span>

<datalist id="defaultNumbers">
  <option value="10045678">option>
  <option value="103421">option>
  <option value="11111111">option>
  <option value="12345678">option>
  <option value="12999922">option>
datalist>

<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" />
<span class="validity">span>

<datalist id="defaultNumbers">
  <option value="10045678">option>
  <option value="103421">option>
  <option value="11111111">option>
  <option value="12345678">option>
  <option value="12999922">option>
datalist>

Chúng tôi đã đề cập đến một số tính năng xác thực của đầu vào

<input type="text" inputmode="numeric" pattern="\d*" />

• Các phần tử

  <input type="number" placeholder="1.0" step="0.01" min="0" max="10" />
  

  1 tự động vô hiệu hóa bất kỳ mục nhập nào không phải là số (hoặc trống, trừ khi chỉ định rõ _____18_______4)
• Bạn có thể sử dụng thuộc tính để làm cho mục nhập trống không hợp lệ. (Nói cách khác, đầu vào phải được điền vào. )
• Bạn có thể sử dụng thuộc tính để ràng buộc các giá trị hợp lệ với một tập hợp các bước nhất định (e. g. , bội số của 10)
• Bạn có thể sử dụng các thuộc tính và để hạn chế các giá trị hợp lệ ở giới hạn trên và dưới

Ví dụ sau thể hiện tất cả các tính năng trên, cũng như sử dụng một số CSS để hiển thị các biểu tượng hợp lệ và không hợp lệ, tùy thuộc vào giá trị của

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

Hãy thử gửi biểu mẫu với các giá trị không hợp lệ khác được nhập — e. g. , không có giá trị;

CSS áp dụng cho ví dụ này như sau

<input type="text" inputmode="numeric" pattern="\d*" />

Ở đây, chúng tôi sử dụng các lớp giả

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

Chúng tôi đặt nó trên một phần tử

<input type="text" inputmode="numeric" pattern="\d*" />

Cảnh báo. Xác thực biểu mẫu HTML không thay thế cho các tập lệnh phía máy chủ đảm bảo rằng dữ liệu đã nhập ở định dạng phù hợp

Quá dễ dàng để ai đó thực hiện các điều chỉnh đối với HTML cho phép họ bỏ qua xác thực hoặc xóa hoàn toàn. Cũng có thể ai đó bỏ qua HTML của bạn và gửi dữ liệu trực tiếp đến máy chủ của bạn

Nếu mã phía máy chủ của bạn không xác thực được dữ liệu mà nó nhận được, thảm họa có thể xảy ra khi dữ liệu được định dạng không đúng (hoặc dữ liệu quá lớn, không đúng loại, v.v.)

Các phần tử

<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />

Cơ sở lý luận cho điều này là đầu vào số sẽ không hợp lệ nếu chúng chứa bất kỳ thứ gì ngoại trừ số và bạn có thể hạn chế số lượng chữ số hợp lệ tối thiểu và tối đa bằng cách sử dụng thuộc tính và (như đã giải thích ở trên)

Chúng tôi đã đề cập đến thực tế là theo mặc định, số gia tăng là

<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />

Trong ví dụ sau đây là một biểu mẫu để nhập chiều cao của người dùng. Nó mặc định chấp nhận chiều cao tính bằng mét, nhưng bạn có thể nhấp vào nút có liên quan để thay đổi biểu mẫu để chấp nhận feet và inch thay thế. Đầu vào cho chiều cao tính bằng mét chấp nhận số thập phân đến hai vị trí

HTML trông như thế này

<input type="text" inputmode="numeric" pattern="\d*" />

Bạn sẽ thấy rằng chúng tôi đang sử dụng nhiều thuộc tính mà chúng tôi đã xem xét trong bài viết trước đó. Vì chúng tôi muốn chấp nhận giá trị mét tính bằng centimet, nên chúng tôi đã đặt giá trị

<input type="number" placeholder="multiple of 10" step="10" />

<input type="text" inputmode="numeric" pattern="\d*" />

Ban đầu, chúng tôi đã ẩn đầu vào feet và inch bằng cách sử dụng

<input type="text" inputmode="numeric" pattern="\d*" />

Bây giờ, vào CSS. Điều này trông rất giống với kiểu xác thực mà chúng ta đã thấy trước đây;

<input type="text" inputmode="numeric" pattern="\d*" />

Và cuối cùng, JavaScript

<input type="text" inputmode="numeric" pattern="\d*" />

Sau khi khai báo một vài biến, một trình lắng nghe sự kiện được thêm vào

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

(Lưu ý rằng chúng tôi không chuyển đổi qua lại giữa mét và feet/inch ở đây, điều mà một ứng dụng web thực tế có thể sẽ làm. )

Ghi chú. Khi người dùng nhấp vào nút, (các) thuộc tính

<input type="number" placeholder="multiple of 10" step="10" />

<label for="ticketNum">Number of tickets you would like to buy:label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

Nếu bạn không làm điều này, bạn phải điền cả feet/inch và mét để gửi biểu mẫu

Vai trò ẩn của phần tử

<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />

Ngoài ra, hãy cân nhắc sử dụng thuộc tính

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="text" inputmode="numeric" pattern="\d*" />