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.
|
1 2 3 4 5 6 7 |
<form> <h2>Phone Number Validation</h2> <label for="phonenum">Phone Number (format: xxxx-xxx-xxx):</label><br/> <input id="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{3}$" required > <input type="submit" value="Submit"> </form> |
Hoặc có thể sử dụng regex sau:
|
1 |
<input type="tel" name="phone" placeholder="+8400000000" pattern="^\+?(?:[0-9]??).{5,14}[0-9]$" required /> |
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:
|
1 |
<input name="phone" placeholder="(845)555-1212" class="form-control" type="text"> |
Thêm một chút Javascript là được:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
$(document).ready(function() { $('#contact_form').bootstrapValidator({ // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { phone: { validators: { notEmpty: { message: 'Please supply your phone number' }, phone: { country: 'US', message: 'Please supply a vaild phone number with area code' } } }, }) .on('success.form.bv', function(e) { $('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ... $('#contact_form').data('bootstrapValidator').resetForm(); // Prevent form submission e.preventDefault(); // Get the form instance var $form = $(e.target); // Get the BootstrapValidator instance var bv = $form.data('bootstrapValidator'); // Use Ajax to submit form data $.post($form.attr('action'), $form.serialize(), function(result) { console.log(result); }, 'json'); }); }); |
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.
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(document).ready(function(){ $('.date').mask('11/11/1111'); $('.time').mask('00:00:00'); $('.date_time').mask('00/00/0000 00:00:00'); $('.cep').mask('00000-000'); $('.phone').mask('0000-0000'); $('.phone_with_ddd').mask('(00) 0000-0000'); $('.phone_us').mask('(000) 000-0000'); $('.mixed').mask('AAA 000-S0S'); $('.cpf').mask('000.000.000-00', {reverse: true}); $('.money').mask('000.000.000.000.000,00', {reverse: true}); }); |
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.
