[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.

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

<form>

<h2>Phone Number Validation</h2>

<label for="phonenum">Phone Number (format: xxxx-xxx-xxx):</label><br/>

</form>

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

<input type="tel" name="phone" placeholder="+8400000000" pattern="^\+?(?:[0-9]??).{5,14}[0-9]$" required />

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:

 <input name="phone" placeholder="(845)555-1212" class="form-control" type="text">

1	<input name="phone" placeholder="(845)555-1212" class="form-control" type="text">

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

$(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');
        });
});

$(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.

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:

$(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});
});

$(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.

[Share some code] validate phone number Viet nam

Xử dụng regex ngay trong thẻ input

Sử dụng Bootstrap 3 with Validation

Sử dụng Jquery Mask Plugin

Like this:

Có liên quan

Nguyễn Trung Hiếu

Xử dụng regex ngay trong thẻ input

Sử dụng Bootstrap 3 with Validation

Sử dụng Jquery Mask Plugin

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu