แนวทางตรวจข้อมูลเฉพาะภาษาไทย ภาษาอังกฤษด้วย Regular Expression

เขียนเมื่อ 5 ปีก่อน โดย Ninenik Narkdee
ภาษาอังกฤษอย่างเดียว ภาษาไทยอย่างเดียว regular expression

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ภาษาอังกฤษอย่างเดียว ภาษาไทยอย่างเดียว regular expression

ดูแล้ว 43,365 ครั้ง


เนื้อหานี้ จะเป็นแนวทางทบทวนการรับค่าข้อมูลด้วยเงื่อนไขที่ต้องการ โดยจะจำลองการตรวจสอบ
ข้อมูลทั้งการใช้งานการตรวจสอบผ่าน Form validation ของ HTML 5 และ JavaScript และผ่าน PHP
โดยจะยกตัวอย่างไล่ตามลำดับ แต่สิ่งหลัก คือเราจะทำการตรวจสอบข้อมูลว่า เป็นภาษาไทย
หรือ ภาษาอังกฤษ และการประยุกต์ใช้งาน
 
สำหรับรูปแบบการตรวจสอบข้อมูล เราจะใช้รูปแบบการตรวจสอบผ่านการใช้งาน Regular Expression
ซึ่งสามารถดูแนวทางได้ที่บทความ ตามลิ้งค์ด้านล่าง
 

การตรวจสอบข้อมูลผ่าน Form Validation

    ในที่นี้จะขอใช้งาน bootstrap 4 ประกอบการจัดรูปแบบและการอธิบาย เราจะสร้างฟอร์มอย่างง่าย ที่มี input
text สองอัน ให้ผู้ใช้ กรอกข้อมูลที่เป็นชื่อ-นามสกุล ภาษาไทย และ ชื่อ-นามสกุลภาษาอังกฤษ และปุ่มส่งข้อมูล
ก่อนไปสู่รายละเอียดของฟอร์ม มาดูรูปแบบ regular expression ที่จะใช้งานกันก่อน 
 
รูปแบบการตรวจสอบข้อมูลภาษาอังกฤษเท่านั้น
 
    ^[a-zA-Z]+$
 
   [a-zA-Z] หมายถึง ต้องเป็นตัวอักษรภาษาอังกฤษ จะเป็นตัวพิมพ์เล็ก หรือตัวพิมพ์ใหญ่ก็ได้
   + หมายถึง ต้องมีอย่างน้อย 1 ตัวอักษร นั่นก็คือต้องกรอกข้อมูล
   ^ หมายถึง ขึ้นต้นด้วย ค่าที่กำหนด
    $ หมายถึง ลงท้ายด้วย ค่าที่กำหนด
 
คำอธิบายรวม หมายถึง ขึ้นต้นหรือลงท้ายด้วยตัวอักษรภาษาอังกฤษ ตัวพิมพ์เล็กหรือตัวพิมพ์ใหญ่ก็ได้
โดยต้องกรอกข้อมูลอย่างน้อย 1 ตัวอักษรขึ้นไป
 
อย่างไรก็ตาม รูปแบบข้างต้นยังไม่ถูกต้องเสียทีเดียว สำหรับการตรวจสอบข้อมูลชื่อภาษาอังกฤษ สิ่งที่เราต้องเพิ่ม
คือ ต้องมีช่องว่าง ซึ่งในที่นี้เราจะใช้ \s ในการตรวจสอบช่องว่าง จะได้รูปแบบสำหรับเงื่อนไขใหม่เป็นดังนี้
 
    ^[a-zA-Z\s]+$
 
    \s หมายถึง ช่องว่างทุกตัว
 
 

รูปแบบการตรวจสอบข้อมูลภาษาไทยเท่านั้น

    สำหรับรูปแบบการตรวจสอบข้อมูลภาษาไทย จะมี 2 รูปแบบ แบบแรก คือเรากำหนดตัวอักษร ภาษาไทยทุกตัว
ที่เราต้องการตรวจสอบ เข้าไปใน [] ดังนี้
 
    ^[กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษสหฬอฮฯะัาำิีึืฺุูเแโใไๅๆ็่้๊๋์]+$
 
    จะเห็นว่ารูปแบบนี้ ถึงแม้จะใช้งานได้ แต่ยังเป็นวิธีที่ยังไม่ดีพอ เราสามารถใช้วิธีกำหนดแบบช่วงตัวอักษรเเช่น
เดียวกับภาษาอังกฤษ เช่น a-z ซึ่งภาษาไทย เราจะใช้ช่วงของตัวอักษรภาษาไทยทั้งหมดผ่าน unicode สามารถดู
ได้ที่ลิ้งค์ด้านล่าง
 



 
 
    จากรุปภาพด้านบน เราสามารถกำหนดช่วงของ ตัวอักษรภาษาไทย จากตัวแรกคือ ก และตัวสุดท้าย ๛
เราจะได้รูปแบบที่สองเป็นดังนี้
 
    ^[ก-๛]+$
 
    รูปแบบข้างต้น ยังไม่ใช้รูปแบบที่ถูกต้อง เนื่องจากว่า ชื่อ นามสกุล จะไม่มีตัวเลขที่เป็นตัวเลขไทย รวมทั้ง
ระหว่างชื่อ กับนามสกุลจะต้องมีช่องว่าง เราจึงเพิ่มการตรวจสอบใหม่ โดยให้ตัวสุดท้ายเป็น ๏ และตรวจสอบช่องว่าง
ด้วย จะได้รูปแบบใหม่เป็นดังนี้
 
    ^[ก-๏\s]+$
 
ตอนนี้เราได้รูปแบบสำหรับตรวจสอบชื่อ นามสกุลทั้งภาษาไทย และภาษาอังกฤษ แล้ว คือ
 
    ^[a-zA-Z\s]+$  // สำหรับชื่อภาษาอังกฤษ
    ^[ก-๏\s]+$ // สำหรับชื่อ นามสกุลภาษาไทย
 
ต่อไปเป็นขั้นตอนของการประยุกต์ใช้งาน 

 

การใช้งานร่วมกับการตรวจสอบของ Bootstrap 4 และ Form Validation

สามารถดูตัวอย่างได้ที่ DEMO 1
 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <title>Document</title> 
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css" >
</head>
<body>
 
 <div class="container">
 <br>
<form id="myform1" name="form1" method="post" action="" novalidate>
<div class="form-group row">
    <label for="input_name" class="col-sm-3 col-form-label text-right">ชื่อ นามสกุล (TH)</label>
    <div class="col">
      <input type="text" class="form-control" name="input_name" id="input_name" 
      value="" pattern="^[ก-๏\s]+$"  required>
      <div class="invalid-feedback">
        กรุณากรอกชื่อ นามสกุล ภาษาไทย
      </div>      
    </div>
</div>
<div class="form-group row">
    <label for="input_name_en" class="col-sm-3 col-form-label text-right">ชื่อ นามสกุล (EN)</label>
    <div class="col">
      <input type="text" class="form-control" name="input_name_en" id="input_name_en" 
       value="" pattern="^[a-zA-Z\s]+$"  required>
      <div class="invalid-feedback">
        กรุณากรอกชื่อ นามสกุล ภาษาอังกฤษ
      </div>      
    </div>
</div>
<div class="form-group row">
    <div class="col-sm-3 offset-sm-3 text-right pt-3">
		 <button type="submit" name="btn_submit" id="btn_submit" value="1" class="btn btn-primary btn-block">ส่งข้อมูล</button>
	</div>
</div> 
</form> 
 
 </div>
 
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.1.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
     $("#myform1").on("submit",function(){
		 var form = $(this)[0];
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');		 
	 });
});
</script>
</body>
</html>
 
รูปแบบแรกเราใช้การตรวจสอบแบบกำหนดเอง จะเห็นได้จากเรากำหนด novalidate ให้กับ <form> 
เพื่อไม่ให้มีการแจ้งเตือนการตรวจสอบฟอร์มโดย browser แต่ยังรองรับการตรวจสอบและคืนค่าการตรวจสอบ
ฟอร์มจาก form validation ของ html5 ผ่านการกำหนด required และ pattern ให้กับฟิลด์ที่ต้องการ
 

การใช้งานร่วมกับ Form Validation และแจ้งเตือนผ่าน Browser

สามารถดูตัวอย่างได้ที่ DEMO 2
 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <title>Document</title> 
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css" >
</head>
<body>
 
 <div class="container">
 <br>
<form id="myform1" name="form1" method="post" action="" >
<div class="form-group row">
    <label for="input_name" class="col-sm-3 col-form-label text-right">ชื่อ นามสกุล (TH)</label>
    <div class="col">
      <input type="text" class="form-control" name="input_name" id="input_name" 
      value="" pattern="^[ก-๏\s]+$" title="กรุณากรอกชื่อ นามสกุล ภาษาไทย"  required>
    </div>
</div>
<div class="form-group row">
    <label for="input_name_en" class="col-sm-3 col-form-label text-right">ชื่อ นามสกุล (EN)</label>
    <div class="col">
      <input type="text" class="form-control" name="input_name_en" id="input_name_en" 
       value="" pattern="^[a-zA-Z\s]+$" title="กรุณากรอกชื่อ นามสกุล ภาษาอังกฤษ"  required> 
    </div>
</div>
<div class="form-group row">
    <div class="col-sm-3 offset-sm-3 text-right pt-3">
		 <button type="submit" name="btn_submit" id="btn_submit" value="1" class="btn btn-primary btn-block">ส่งข้อมูล</button>
	</div>
</div> 
</form> 
 
 </div>
 
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.1.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){

});
</script>
</body>
</html>
 
วิธีที่สองนี้ จะคล้ายๆ กับวิธีแรก คือใช้คุณสมบัติการตรวจสอบ form validation จาก html แต่วิธีนี้ เราใช้
การแจ้งเตือนที่ทำผ่าน browser จะไม่มีการกำหนด novalidate ให้กับ <form> เหมือนวิธีแรก ไม่มีการใช้งาน
javascript เพื่อตรวจสอบกรณี sumit ฟอร์ม 
    เราสามารถกำหนดข้อความแจ้งเพิ่มเติม ผ่านการกำหนดค่า title ดังตัวอย่างต่อไปนี้
 
 

 
 
 

การตรวจสอบข้อมูลผ่าน JavaScript

สามารถดูตัวอย่างได้ที่ DEMO 3
 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <title>Document</title> 
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css" >
</head>
<body>
 
 <div class="container">
 <br>
<form id="myform1" name="form1" method="post" action="" >
<div class="form-group row">
    <label for="input_name" class="col-sm-3 col-form-label text-right">ชื่อ นามสกุล (TH)</label>
    <div class="col">
      <input type="text" class="form-control" name="input_name" id="input_name" 
      value="" >
    </div>
</div>
<div class="form-group row">
    <label for="input_name_en" class="col-sm-3 col-form-label text-right">ชื่อ นามสกุล (EN)</label>
    <div class="col">
      <input type="text" class="form-control" name="input_name_en" id="input_name_en" 
       value="" > 
    </div>
</div>
<div class="form-group row">
    <div class="col-sm-3 offset-sm-3 text-right pt-3">
		 <button type="submit" name="btn_submit" id="btn_submit" value="1" class="btn btn-primary btn-block">ส่งข้อมูล</button>
	</div>
</div> 
</form> 
 
 </div>
 
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.1.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){

	$("#myform1").on("submit",function(){
		var pattern_thai = /^[ก-๏\s]+$/u;
		var pattern_eng = /^[a-zA-Z\s]+$/;
		var input_name_th = $("#input_name").val();
		var input_name_en = $("#input_name_en").val();
		if(!input_name_th.match(pattern_thai) || !input_name_en.match(pattern_eng)){
			alert("กรุณากรอกข้อมูลให้ถูกต้อง");
			return false;
		}
		// หรือเช็คทีละรายการ
/*		if(!input_name_th.match(pattern_thai)){
			alert("กรุณากรอกชื่อ นามสกลภาษาไทย ให้ถูกต้อง");
			return false;
		}
		if(!input_name_en.match(pattern_eng)){
			alert("กรุณากรอกชื่อ นามสกุลภาษาอังกฤษ ให้ถูกต้อง");
			return false;
		}			*/	
	});

});
</script>
</body>
</html>
 
วิธีการตรวจสอบด้วย javascript ในที่นี้เราประยุกต์ใช้ร่วมกับ jquery จะเห็นว่าในฟอร์ม เราไม่มีการกำหนด
การตรวจสอบใดๆ จาก form validation ไม่มีการกำหนด pattern ไม่มีการกำหนด required ให้กับ input
text ทั้งสอง แต่ใช้วิธีการตรวจสอบผ่าน javascript เมื่อเกิดการ submit ข้อมูล โดยเราได้ทำการตรวจสอบ
ค่าของข้อมูลในฟอร์ม ผ่านการอ้างอิง เราไม่ได้ไปยุ่ง อะไรกับส่วนของฟอร์ม รูปแบบวิธีนี้ เราสามารถกำหนด
เงื่อนไขการตรวจสอบใดๆ ก็ได้ตามต้องการ โดยถ้าไม่ผ่านเงื่อนไข ก็ให้ทำการ return false กลับมา
 

การตรวจสอบข้อมูลด้วย PHP

    ในที่นี้จะขอเพิ่มโค้ดตรวจสอบไว้ในไฟล์เดียวกัน 
 
ไฟล์ demo.php
 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <title>Document</title> 
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css" >
</head>
<body>
 
 <div class="container">
 <br>
 <?php
 if(isset($_POST['btn_submit'])){
	 $valid_form = false;
	 $status_response_error = "กรุณากรอกข้อมูลให้ถูกต้อง";
	 $data_input_name = (isset($_POST['input_name']) && $_POST['input_name']!="")?trim($_POST['input_name']):NULL;
	 $data_input_name_en = (isset($_POST['input_name_en']) && $_POST['input_name_en']!="")?trim($_POST['input_name_en']):NULL;
	 $pattern_thai = "/^[ก-๏\s]+$/u";
	 $pattern_eng = "/^[a-zA-Z\s]+$/";
	 
	 if(!is_null($data_input_name) && preg_match($pattern_thai,$data_input_name)){
		 if(!is_null($data_input_name_en) && preg_match($pattern_eng,$data_input_name_en)){
			 $valid_form = true;
		 }else{
		 	$status_response_error = "กรุณากรอกชื่อ นามสกุล ภาษาอังกฤษ";			 
		 }
	 }else{
		 $status_response_error = "กรุณากรอกชื่อ นามสกุล ภาษาไทย";
	 }
	 if($valid_form){
		echo '
			<div class="alert alert-success" role="alert">
			  ทำการบันทึกข้อมูลเรียบร้อย!
			</div>		 		
		';
	 }else{
		echo '
			<div class="alert alert-danger" role="alert">
			  '.$status_response_error.'!
			</div>		 		
		';
	 }
 }
 ?>
<form id="myform1" name="form1" method="post" action="" >
<div class="form-group row">
    <label for="input_name" class="col-sm-3 col-form-label text-right">ชื่อ นามสกุล (TH)</label>
    <div class="col">
      <input type="text" class="form-control" name="input_name" id="input_name" 
      value="" >
    </div>
</div>
<div class="form-group row">
    <label for="input_name_en" class="col-sm-3 col-form-label text-right">ชื่อ นามสกุล (EN)</label>
    <div class="col">
      <input type="text" class="form-control" name="input_name_en" id="input_name_en" 
       value="" > 
    </div>
</div>
<div class="form-group row">
    <div class="col-sm-3 offset-sm-3 text-right pt-3">
		 <button type="submit" name="btn_submit" id="btn_submit" value="1" class="btn btn-primary btn-block">ส่งข้อมูล</button>
	</div>
</div> 
</form> 
 
 </div>
 
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.1.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){


});
</script>
</body>
</html>
 
การตรวจสอบข้อมูลด้วย PHP หรือ Server side script ภาษาอื่นๆ เป็นวิธีที่ถูกต้องในการตรวจสอบ
ข้อมูลที่ส่งมาจากฟอร์ม ก่อนนำไปใช้งาน เราสามารถใช้งานรวมกันระหว่าง การตรวจสอบข้อมูลด้วย 
Form validation กับ PHP  หรือระหว่าง JavaScript กับ PHP 
 
หวังว่าเนื้อหานี้จะเป็นประโยชน์ในการประยุกต์ใช้งานต่อไปได้
 






กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ