แจก!!! javascript function สำหรับตรวจเลขบัตรประชาชน แบบ Real time อย่างง่าย

เอามาแจกอีกแล้ว Onlymycode กับช่วงเทคนิคง่าย ๆ ที่ได้ใช้บ่อย วันนี้ ขอเสนอ Function สำหรับตรวจสอบเลขบัตรประชาชน

ตัวอย่างการใช้งาน javascript ตรวจสอบเลขบัตร

See the Pen เช็คเลขบัตรประชาชน by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

---

ตัวอย่างการใช้งาน

เริ่มที่ เรียกใช้งาน Stylesheet และ Javascript ใน Tag <header>....</header>

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

ส่วนนี้คือตัวอย่าง Code ในฝั่งของ HTML

<div class="container1">
    <div class="row">
        <h1>ตัวอย่าง Script ตรวจเลขบัตร</h1><br/>
        <div class='col-lg-12'>
          <label>กรอกเลขบัตร</label>
          <input type="text" id="idcard" class="form-control" maxlength="13">
          <span class="error"></span>
        </div>
    </div>
</div>

และตัวอย่าง Code ในฝั่งของ Javascript / Code สีฟ้า ใช้สำหรับตรวจสอบ Form key และ Code สีส้ม คือ Function สำหรับตรวจสอบเลขบัตรประชาชนครับ

$(document).ready(function(){
  $('#idcard').on('keyup',function(){
    if($.trim($(this).val()) != '' && $(this).val().length == 13){
      id = $(this).val().replace(/-/g,"");
      var result = Script_checkID(id);
      if(result === false){
        $('span.error').removeClass('true').text('เลขบัตรผิด');
      }else{
        $('span.error').addClass('true').text('เลขบัตรถูกต้อง');
      }
    }else{
      $('span.error').removeClass('true').text('');
    }
  })
});

function Script_checkID(id){
    if(! IsNumeric(id)) return false;
    if(id.substring(0,1)== 0) return false;
    if(id.length != 13) return false;
    for(i=0, sum=0; i < 12; i++)
        sum += parseFloat(id.charAt(i))*(13-i);
    if((11-sum%11)%10!=parseFloat(id.charAt(12))) return false;
    return true;
}
function IsNumeric(input){
    var RE = /^-?(0|INF|(0[1-7][0-7]*)|(0x[0-9a-fA-F]+)|((0|[1-9][0-9]*|(?=[\.,]))([\.,][0-9]+)?([eE]-?\d+)?))$/;
    return (RE.test(input));
}

ตัวอย่าง Code ด้านบน การตรวจสอบเลขบัตรจะให้วิธีจับ Event แบบ on keyup คือ ตรวจสอบทันทีเมื่อมีการพิมพ์ที่ Form  หวัว่างโค้ดชุดนี้จะมีประโยชน์กับทุกคนนะครับ