programming javascript

Chỉ nhập số regex javascript

Phần tử

3 kiểu

4 dùng để cho phép người dùng nhập và sửa số điện thoại. Không giống như

5 và

6, giá trị đầu vào không được tự động xác thực theo một định dạng cụ thể trước khi có thể gửi biểu mẫu, vì các định dạng cho số điện thoại rất khác nhau trên khắp thế giới

Thử nó

Mặc dù thực tế là các đầu vào loại

4 có chức năng giống hệt với các đầu vào

8 tiêu chuẩn, nhưng chúng vẫn phục vụ các mục đích hữu ích; . Việc sử dụng một loại đầu vào cụ thể cho các số điện thoại cũng giúp việc thêm xác thực tùy chỉnh và xử lý các số điện thoại trở nên thuận tiện hơn

Ghi chú. Các trình duyệt không hỗ trợ loại

4 trở lại là kiểu nhập văn bản tiêu chuẩn

Giá trịMột chuỗi đại diện cho một số điện thoại, hoặc các sự kiện rỗng

0 và

1Các thuộc tính chung được hỗ trợ

8 và

9Các thuộc tínhIDL_______73,

81,

82,

83 và

84Giao diện DOM

Phương pháp

86,

87,

Giá trị

Thuộc tính

84 của phần tử

3 chứa một chuỗi đại diện cho một số điện thoại hoặc là một chuỗi rỗng [

81]

thuộc tính bổ sung

Ngoài các thuộc tính hoạt động trên tất cả các phần tử

3 bất kể loại của chúng, đầu vào số điện thoại hỗ trợ các thuộc tính sau

danh sách

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

83 của một phần tử

84 nằm trong cùng một tài liệu.

84 cung cấp danh sách các giá trị được xác định trước để đề xuất cho người dùng cho đầu vào này. Bất kỳ giá trị nào trong danh sách không tương thích với

86 đều không được đưa vào các tùy chọn được đề xuất. Các giá trị được cung cấp là đề xuất, không phải yêu cầu. người dùng có thể chọn từ danh sách được xác định trước này hoặc cung cấp một giá trị khác

độ dài tối đa

Số ký tự tối đa [dưới dạng đơn vị mã UTF-16] mà người dùng có thể nhập vào trường số điện thoại. Đây phải là một giá trị số nguyên 0 hoặc cao hơn. Nếu không chỉ định

4 hoặc chỉ định một giá trị không hợp lệ, thì trường số điện thoại không có độ dài tối đa. Giá trị này cũng phải lớn hơn hoặc bằng giá trị của

Đầu vào sẽ không xác thực được ràng buộc nếu độ dài của văn bản được nhập vào trường này dài hơn

4 đơn vị mã UTF-16

Độ dài nhỏ nhất

Số ký tự tối thiểu [dưới dạng đơn vị mã UTF-16] mà người dùng có thể nhập vào trường số điện thoại. Đây phải là một giá trị số nguyên không âm nhỏ hơn hoặc bằng giá trị được chỉ định bởi

4. Nếu không có

5 nào được chỉ định hoặc giá trị không hợp lệ được chỉ định, đầu vào số điện thoại không có độ dài tối thiểu

Trường số điện thoại sẽ không xác thực được ràng buộc nếu độ dài của văn bản được nhập vào trường này nhỏ hơn

5 đơn vị mã UTF-16

mẫu

Thuộc tính

6, khi được chỉ định, là một biểu thức chính quy mà giá trị đầu vào

84 phải khớp để giá trị vượt qua xác thực ràng buộc. Nó phải là một biểu thức chính quy JavaScript hợp lệ, như được sử dụng bởi loại

25 và như được ghi lại trong hướng dẫn của chúng tôi về các biểu thức chính quy; . Không được chỉ định dấu gạch chéo lên xung quanh văn bản mẫu

Nếu mẫu đã chỉ định không được chỉ định hoặc không hợp lệ, thì không có biểu thức chính quy nào được áp dụng và thuộc tính này bị bỏ qua hoàn toàn

Ghi chú. Sử dụng thuộc tính

27 để chỉ định văn bản mà hầu hết các trình duyệt sẽ hiển thị dưới dạng chú giải công cụ để giải thích những yêu cầu để khớp với mẫu. Bạn cũng nên bao gồm văn bản giải thích khác gần đó

Xem Xác thực mẫu bên dưới để biết chi tiết và ví dụ

giữ chỗ

Thuộc tính

7 là một chuỗi cung cấp gợi ý ngắn gọn cho người dùng về loại thông tin được mong đợi trong trường. Nó phải là một từ hoặc cụm từ ngắn thể hiện loại dữ liệu dự kiến, chứ không phải là một thông báo giải thích. Văn bản không được bao gồm dấu xuống dòng hoặc xuống dòng

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ỗ;

Note: Avoid using the

7 attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See Labels and placeholders in : The Input [Form Input] element for more information.

chỉ đọc

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,

84 của nó vẫn có thể được thay đổi bằng mã JavaScript trực tiếp đặt thuộc tính

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

03 không có bất kỳ ảnh hưởng nào đối với đầu vào với thuộc tính

8 cũng được chỉ định

kích thước

Thuộc tính

9 là một giá trị số cho biết độ rộng của trường nhập phải là bao nhiêu ký tự. Giá trị phải là một số lớn hơn 0 và giá trị mặc định là 20. Vì độ rộng ký tự khác nhau, điều này có thể chính xác hoặc không chính xác và không nên dựa vào đó;

Điều này không đặt giới hạn về số lượng ký tự mà người dùng có thể nhập vào trường. Nó chỉ xác định khoảng bao nhiêu có thể được nhìn thấy tại một thời điểm. Để đặt giới hạn trên cho độ dài của dữ liệu đầu vào, hãy sử dụng thuộc tính

Thuộc tính không chuẩn

Các thuộc tính không chuẩn sau đây có sẵn cho các trường nhập số điện thoại. Theo nguyên tắc chung, bạn nên tránh sử dụng chúng trừ khi không thể giúp được

tự động sửa lỗi

Tiện ích mở rộng của Safari, thuộc tính

08 là một chuỗi cho biết có kích hoạt hiệu chỉnh tự động hay không trong khi người dùng đang chỉnh sửa trường này. giá trị được phép là

Cho phép tự động sửa lỗi chính tả, cũng như xử lý thay thế văn bản nếu có được định cấu hình

Vô hiệu hóa tự động sửa và thay thế văn bản

mozactionhint

Tiện ích mở rộng của Mozilla, cung cấp gợi ý về loại hành động nào sẽ được thực hiện nếu người dùng nhấn phím Enter hoặc Return trong khi chỉnh sửa trường

Thuộc tính này đã không được dùng nữa. thay vào đó hãy sử dụng thuộc tính toàn cầu

Sử dụng đầu vào điện thoại

Số điện thoại là loại dữ liệu thường được thu thập trên web. Ví dụ: khi tạo bất kỳ loại đăng ký hoặc trang web thương mại điện tử nào, bạn có thể sẽ cần yêu cầu người dùng cung cấp số điện thoại, cho dù mục đích kinh doanh hay mục đích liên hệ khẩn cấp. Do số điện thoại được nhập phổ biến như thế nào, thật không may là giải pháp "một kích thước phù hợp với tất cả" để xác thực số điện thoại là không thực tế

May mắn thay, bạn có thể xem xét các yêu cầu của trang web của riêng mình và tự triển khai mức xác thực phù hợp. Xem Xác thực, bên dưới, để biết chi tiết

bàn phím tùy chỉnh

Một trong những ưu điểm chính của

72 là nó khiến các trình duyệt di động hiển thị một bàn phím đặc biệt để nhập số điện thoại. Ví dụ: đây là giao diện của bàn phím trên một vài thiết bị

Firefox dành cho Android WebKit iOS [Safari/Chrome/Firefox]

Một đầu vào điện thoại đơn giản

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

Không có gì kỳ diệu xảy ra ở đây. Khi được gửi tới máy chủ, dữ liệu của đầu vào ở trên sẽ được biểu diễn dưới dạng, ví dụ:

Trình giữ chỗ

Đô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

3. Đây là nơi giữ chỗ đến. Trình giữ chỗ là một giá trị thể hiện biểu mẫu mà

84 phải thực hiện bằng cách trình bày một ví dụ về giá trị hợp lệ, được hiển thị bên trong hộp chỉnh sửa khi phần tử

84 là

81. Khi dữ liệu được nhập vào hộp, trình giữ chỗ sẽ biến mất;

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

4 với trình giữ chỗ

79. Lưu ý cách trình giữ chỗ biến mất và xuất hiện lại khi bạn thao tác với nội dung của trường chỉnh sửa

Kiểm soát kích thước đầu vào

Bạn không chỉ có thể kiểm soát độ dài vật lý của hộp nhập mà còn cả độ dài tối thiểu và tối đa được phép cho chính văn bản đầu vào

Kích thước phần tử đầu vào vật lý

Kích thước vật lý của hộp nhập liệu có thể được kiểm soát bằng thuộc tính

9. Với nó, bạn có thể chỉ định số lượng ký tự mà hộp nhập liệu có thể hiển thị tại một thời điểm. Ví dụ, trong ví dụ này, hộp soạn thảo

4 rộng 20 ký tự

Độ dài giá trị phần tử

9 tách biệt với giới hạn độ dài trên số điện thoại đã nhập. Bạn có thể chỉ định độ dài tối thiểu, tính bằng ký tự, cho số điện thoại đã nhập bằng thuộc tính

Ví dụ bên dưới tạo hộp nhập số điện thoại rộng 20 ký tự, yêu cầu nội dung không ngắn hơn 9 ký tự và không dài hơn 14 ký tự

Ghi chú. Các thuộc tính trên có ảnh hưởng đến Xác thực — đầu vào của ví dụ trên sẽ được tính là không hợp lệ nếu độ dài của giá trị nhỏ hơn 9 ký tự hoặc nhiều hơn 14 ký tự. Hầu hết các trình duyệt thậm chí sẽ không cho phép bạn nhập giá trị vượt quá độ dài tối đa

Cung cấp các tùy chọn mặc định

Cung cấp một mặc định duy nhất bằng thuộc tính giá trị

Như thường lệ, bạn có thể cung cấp giá trị mặc định cho hộp nhập liệu

4 bằng cách đặt thuộc tính

84 của nó

Cung cấp các giá trị được đề xuất

Tiến thêm một bước nữa, bạn có thể cung cấp danh sách các giá trị số điện thoại mặc định mà người dùng có thể chọn. Để làm điều này, hãy sử dụng thuộc tính

3. Điều này không giới hạn người dùng trong các tùy chọn đó, nhưng cho phép họ chọn các số điện thoại thường dùng nhanh hơn. Điều này cũng cung cấp gợi ý cho

2. Thuộc tính

3 chỉ định ID của phần tử

84, do đó phần tử này chứa một phần tử

71 cho mỗi giá trị được đề xuất;

Với phần tử

84 và các

71 của nó tại chỗ, trình duyệt sẽ cung cấp các giá trị được chỉ định làm giá trị tiềm năng cho số điện thoại; . Mặc dù trải nghiệm người dùng cụ thể có thể thay đổi từ trình duyệt này sang trình duyệt khác, nhưng thông thường, việc nhấp vào hộp chỉnh sửa sẽ hiển thị danh sách thả xuống gồm các số điện thoại được đề xuất. Sau đó, khi người dùng nhập, danh sách được điều chỉnh để chỉ hiển thị các giá trị phù hợp đã lọc. Mỗi ký tự đã nhập sẽ thu hẹp danh sách cho đến khi người dùng thực hiện lựa chọn hoặc nhập một giá trị tùy chỉnh

Đây là một ảnh chụp màn hình về những gì có thể trông giống như

Thẩm định

Như chúng tôi đã đề cập trước đây, rất khó để cung cấp giải pháp xác thực phía máy khách một kích cỡ phù hợp với tất cả các số điện thoại. Vậy chúng ta có thể làm gì?

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 dữ liệu đã nhập ở định dạng phù hợp trước khi được phép vào cơ sở dữ liệu. 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 hoàn toà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 nhập vào cơ sở dữ liệu của bạn

Làm số điện thoại bắt buộc

Bạn có thể làm cho đầu vào trống không hợp lệ và sẽ không được gửi tới máy chủ bằng thuộc tính

03. Ví dụ: hãy sử dụng HTML này

Và hãy bao gồm CSS sau để đánh dấu các mục hợp lệ bằng dấu kiểm và các mục không hợp lệ bằng dấu chéo

Đầu ra trông như thế này

xác thực mẫu

Nếu bạn muốn hạn chế hơn nữa các số đã nhập để chúng cũng phải tuân theo một mẫu cụ thể, bạn có thể sử dụng thuộc tính

6, thuộc tính này nhận giá trị của nó là một biểu thức chính quy mà các giá trị đã nhập phải khớp với nhau

Trong ví dụ này, chúng tôi sẽ sử dụng CSS giống như trước, nhưng HTML của chúng tôi được thay đổi thành như thế này

Lưu ý cách giá trị đã nhập được báo cáo là không hợp lệ trừ khi mẫu xxx-xxx-xxxx được khớp; . 800-MDN-ROCKS cũng vậy. Tuy nhiên, 865-555-6502 sẽ được chấp nhận. Mẫu cụ thể này rõ ràng chỉ hữu ích cho một số ngôn ngữ nhất định — trong một ứng dụng thực tế, bạn có thể phải thay đổi mẫu được sử dụng tùy thuộc vào ngôn ngữ của người dùng

ví dụ

Trong ví dụ này, chúng tôi trình bày một giao diện đơn giản với phần tử

78 cho phép người dùng chọn quốc gia họ đang ở và một tập hợp các phần tử

72 để cho phép họ nhập từng phần của số điện thoại;

Mỗi đầu vào có một thuộc tính

7 để hiển thị gợi ý cho người dùng sáng mắt về những gì cần nhập vào đó, một

6 để thực thi một số ký tự cụ thể cho phần mong muốn và một thuộc tính

03 để chứa một gợi ý để đọc to cho người dùng trình đọc màn hình

JavaScript tương đối đơn giản — nó chứa một trình xử lý sự kiện

04, khi giá trị

78 được thay đổi, sẽ cập nhật các phần tử

7 và

03 của phần tử

3 để phù hợp với định dạng số điện thoại ở quốc gia/lãnh thổ đó

Ví dụ trông như thế này

Đây là một ý tưởng thú vị, cho thấy một giải pháp tiềm năng cho vấn đề xử lý các số điện thoại quốc tế. Tất nhiên, bạn sẽ phải mở rộng ví dụ để cung cấp mẫu chính xác cho mọi quốc gia tiềm năng, điều này sẽ tốn rất nhiều công sức và vẫn sẽ không có gì đảm bảo chắc chắn rằng người dùng sẽ nhập số của họ một cách chính xác

Nó khiến bạn tự hỏi liệu có đáng để gặp rắc rối này ở phía máy khách hay không, khi bạn có thể cho phép người dùng nhập số của họ ở bất kỳ định dạng nào họ muốn ở phía máy khách, sau đó xác thực và vệ sinh nó trên máy chủ. Nhưng sự lựa chọn này là của bạn để thực hiện

Regex chỉ dành cho các số là gì?

Nếu bạn chỉ muốn nhận các chữ số bằng REGEXP, hãy sử dụng cụm từ thông dụng sau [ ^[0-9]*$] trong đó . Trường hợp 1 - Nếu bạn chỉ muốn những hàng có chính xác 10 chữ số và tất cả chỉ phải là chữ số, hãy sử dụng biểu thức chính quy bên dưới.

Làm cách nào để kiểm tra xem đầu vào chỉ chứa số JavaScript?

Để kiểm tra xem một chuỗi chỉ chứa số trong JavaScript hay không, gọi phương thức test[] trên biểu thức chính quy này. ^\d+$ . Phương thức test[] sẽ trả về true nếu chuỗi chỉ chứa số. Nếu không, nó sẽ trả về false.

Làm cách nào để chỉ lấy số từ chuỗi trong JavaScript?

Số từ một chuỗi trong javascript có thể được trích xuất thành một mảng số bằng cách sử dụng phương thức so khớp . Hàm này lấy một biểu thức chính quy làm đối số và trích xuất số từ chuỗi. Biểu thức chính quy để trích xuất một số là [/[\d+]/].

Làm cách nào để kiểm tra giá trị đầu vào có phải là số hay không trong JavaScript?

isnan[] isNaN[] trả về giá trị true nếu giá trị không phải là số. Con số. isNaN[] trả về true nếu một số không phải là số.

Thử nó

Giá trị

thuộc tính bổ sung

danh sách

độ dài tối đa

Độ dài nhỏ nhất

mẫu

giữ chỗ

chỉ đọc

kích thước

Thuộc tính không chuẩn

tự động sửa lỗi

mozactionhint

Sử dụng đầu vào điện thoại

bàn phím tùy chỉnh

Một đầu vào điện thoại đơn giản

Trình giữ chỗ

Kiểm soát kích thước đầu vào

Kích thước phần tử đầu vào vật lý

Độ dài giá trị phần tử

Cung cấp các tùy chọn mặc định

Cung cấp một mặc định duy nhất bằng thuộc tính giá trị

Cung cấp các giá trị được đề xuất

Thẩm định

Làm số điện thoại bắt buộc

xác thực mẫu

ví dụ

Regex chỉ dành cho các số là gì?

Làm cách nào để kiểm tra xem đầu vào chỉ chứa số JavaScript?

Làm cách nào để chỉ lấy số từ chuỗi trong JavaScript?

Làm cách nào để kiểm tra giá trị đầu vào có phải là số hay không trong JavaScript?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề