Code script ตรวจสอบรูปแบบ URL pattern แบบ Real-time

Spread the love

วันนี้เรานำเสนอวิธีตรวจสอบ URL pattern อย่างง่าย โดย Script จะสามารถตรวจสอบความถูกต้องของรูปแบบ URL ได้ แต่อย่างไรก็ตามเทคนิคนี้เป็นเพียงการตรวจสอบ Pattern ของ URL เท่านั้น ไม่สามารถตรวจสอบได้ว่าเป็น URL จริงหรือไม่ แต่ Script สำหรับตรวจสอบเบื้องต้น มีไว้ก็ดีกว่าใช่ไหมละ วันนี้ดูเพลินเลยได้นำเทคนิคการเขียน Script ตรวจสอบ URL pattern มาฝากเพื่อน ๆ กัน

See the Pen Javascript validate URL Real-time by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

วิธีเขียนโค้ด ตรวจสอบรูปแบบ URL pattern แบบ Real-time

1. Copy code ด้านล่างนี้ไปวางไว้ในส่วน <head> .... </head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.4.min.js' crossorigin="anonymous"></script>

2. ตัวอย่าง HTML Code ของ Input Script ตรวจสอบ URL pattern

<div class="container1">
    <div class="row">
        <h1>Script validate URL format</h1><br/>
        <div class='col-12'>
          <label><b>URL:</b></label> <span class="error"></span>
          <input type="text" id="url" class="form-control">
        </div>
    </div>
</div>

3. Javascript สำหรับเรียกใช้งาน Script ตรวจสอบรูปแบบ URL pattern

<script type="text/javascript">
        $(document).ready(function(){
                $('#url').on('keyup',function(){
                        if($.trim($(this).val()) != '' && $(this).val().length > 5){
                                let result = check_URL_regex($(this).val());
                                if(result === false){
                                        $('span.error').removeClass('true').text('URL format invalid');
                                }else{
                                        $('span.error').addClass('true').text('URL format valid');
                                }
                        }else{
                                 $('span.error').removeClass('true').text('');
                        }
                })
        });
        function check_URL_regex(url){
                let regexp2 = new RegExp('^((ft|htt)ps?:\\/\\/)?'+
                '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+
                '((\\d{1,3}\\.){3}\\d{1,3}))'+
                '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+
                '(\\?[;&a-z\\d%_.~+=-]*)?'+
                '(\\#[-a-z\\d_]*)?$','i');
                if (regexp2.test(url)) {
                        return true;
                }else{
                        return false;
                }
        }
</script>

บทความอื่น ๆ ที่เกี่ยวข้องกับ Javascript/jQuery

เป็นยังไงกันบ้างคะสำหรับบทความ Code script ตรวจสอบรูปแบบ URL pattern แบบ Real-time ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย

เทคนิคอื่นๆ เกี่ยวกับการเขียนโค้ด คลิก

อย่าลืมไปติดตาม Facebook fanpage ของเรา >> Click <<