Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Ajax-Jquery-Javascript > [Share some code] validate phone number Viet nam
[Share some code] validate phone number Viet nam
Nguyễn Trung Hiếu
Share Code Web Company 2018

[Share some code] validate phone number Viet nam

Trong quá trình thiết kế web, không ít lần các bạn gặp phải tình huống cần xử lý số điện thoại trong trường nhập Input. Bài viết này sẽ chia sẻ cho các bạn một vài code validate phone number ở Việt Nam.

Xử dụng regex ngay trong thẻ input

Hiện tại HTML5 đã cho phép chúng ta sử dụng thẻ input với kiểu type=”tel” để cho phép người dùng nhập giá trị số điện thoại. Do đó chúng ta chỉ cần thêm thuộc tính pattern để validate số điện thoại.

Hoặc có thể sử dụng regex sau:

Sử dụng Bootstrap 3 with Validation

Nếu các bạn sử dụng Bootstrap 3 để thiết kế, ta cũng có thể sử dụng ngay khả năng Validation của nó đơn giản như sau:

Thêm một chút Javascript là được:

Sử dụng Jquery Mask Plugin

Đây là một plugin cho jQuery giúp tạo ra các mặt nạ cho các phần tử, trường nhập input trong form HTML5.

Download jQuery Mask Plugin

Nếu cần validation phone number hoặc bất cứ thứ gì, bạn chỉ việc thêm đoạn code sau:

Ngoài ra, ưu điểm của jQuery Mask Plugin còn có:

  • Lightweight (~2kb minified, ~1kb gziped).
  • Built-in support for dynamically added elements.
  • Masks on any HTML element (no need to server-side mask anymore!)!
  • HTML notation support (data-mask, data-mask-recursive, data-mask-clearifnotmatch).
  • String/Numeric/Alpha/Mixed masks.
  • Reverse mask support for masks on numeric fields.
  • Sanitization.
  • Optional digits.
  • Recursive Digits.
  • Fallback Digits.
  • Advanced mask initialization.
  • Advanced Callbacks.
  • On-the-fly mask change.
  • Mask removal.
  • Full customization.
  • Compatibility with React/UMD/Zepto.js/Angular.JS.
  • HTML5 placeholder support.
  • Clear the field if it not matches support.

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 5.702 hits
%d bloggers like this: