เอามาแจกอีกแล้ว Onlymycode กับช่วงเทคนิคง่าย ๆ ที่ได้ใช้บ่อย วันนี้ ขอเสนอ Function สำหรับตรวจสอบเลขบัตรประชาชน
ตัวอย่างการใช้งาน javascript ตรวจสอบเลขบัตร
ตัวอย่างการใช้งาน
เริ่มที่ เรียกใช้งาน 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>
<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>
<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));
}
$('#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 หวัว่างโค้ดชุดนี้จะมีประโยชน์กับทุกคนนะครับ
