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

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

วิธีเขียนโค้ด ตรวจสอบรูปแบบ Email 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 ตรวจสอบ Email pattern

<div class="container1">
    <div class="row">
        <h1>Script validate Email pattern</h1><br/>
        <div class='col-12'>
          <label><b>Email:</b></label> <span id="result" class="error"></span>
          <input type="email" id="email" class="form-control">
        </div>
    </div>
</div>

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

<script type="text/javascript">
        $(document).ready(function(){
                const validateEmail = (email) => {
                        return email.match(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
                };
                const validate = () => {
                        const $result = $('#result');
                        const email = $('#email').val();
                        $result.text('');
                        if (validateEmail(email)) {
                                $result.html(email + ' <b>is valid :)</b>');
                                $result.addClass('true');
                        } else {
                                $result.html(email + " <b>is not valid :(</b>");
                                $result.removeClass('true');
                        }
                        return false;
                };
                $('#email').on('input', validate);
        });
</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

ดูเพลิน Admin - 11 ม.ค. 66
ทำ Search Table การ Filter ซ่อน/แสดง row เมื่อกรอก Textbox

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

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

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

ดูเพลิน Admin - 26 ม.ค. 66
วิธีทำ Textbox Autocomplete จากฐานข้อมูล ด้วย jQuery Ajax

วิธีทำ Textbox Autocomplete จากฐานข้อมูล ด้วย jQuery Ajax

ดูเพลิน Admin - 16 ม.ค. 66
Code script ตรวจสอบรูปแบบ URL pattern แบบ Real-time

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

ดูเพลิน Admin - 28 ธ.ค. 65

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

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