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

วันนี้เรานำเสนอวิธีตรวจสอบ 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>

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

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

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

หมวดหมู่เกี่ยวกับ Coding

เนื้อหาที่คล้ายกัน...

ทำ Search Table การ Filter ซ่อน/แสดง row เมื่อกรอก Textbox

ทำ Search Table การ Filter ซ่อน/แสดง row เมื่อกรอก Textbox

ดูเพลิน Admin - 23 ม.ค. 66
แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

ดูเพลิน Admin - 23 ธ.ค. 65
เทคนิค วิธีการ Set Delay ให้กับ Function Javascript

เทคนิค วิธีการ Set Delay ให้กับ Function Javascript

ดูเพลิน Admin - 26 ม.ค. 66
Bootstrap datepicker thai วิธีทำ datepicker php ภาษาไทย

Bootstrap datepicker thai วิธีทำ datepicker php ภาษาไทย

ดูเพลิน Admin - 21 ธ.ค. 65
Bootstrap CSS ตารางสวย ๆ พร้อมวิธีเปลี่ยนสีตารางด้วย jQuery

Bootstrap CSS ตารางสวย ๆ พร้อมวิธีเปลี่ยนสีตารางด้วย jQuery

ดูเพลิน Admin - 26 ธ.ค. 65
Code script เช็คเลขบัตรประชาชน แบบ Real-time

Code script เช็คเลขบัตรประชาชน แบบ Real-time

ดูเพลิน Admin - 21 ธ.ค. 65
Code script ตรวจสอบรูปแบบ Email pattern แบบ Real-time

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

ดูเพลิน Admin - 28 ธ.ค. 65
Javascript เปิด/ปิด ซ่อน/แสดง Element โดยใช้ jQuery แบบต่างๆ

Javascript เปิด/ปิด ซ่อน/แสดง Element โดยใช้ jQuery แบบต่างๆ

ดูเพลิน Admin - 11 ม.ค. 66

เรื่องราวเอื่น ๆ ในหมวดเทคนิคการเขียนโค้ด...

let value = 147/32; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.59 Result = 5let value = 147/33; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.454 Result = 4