Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > PHP > PHP Forum > แจก HTML5 pattern ครับ เผื่อใครยังไม่รู้ ถ้ารู้แล้วก็เข้ามาเสริมเพิ่มเติมได้ครับ เพื่อลดเวลาการทำงานของเราครับ



 

แจก HTML5 pattern ครับ เผื่อใครยังไม่รู้ ถ้ารู้แล้วก็เข้ามาเสริมเพิ่มเติมได้ครับ เพื่อลดเวลาการทำงานของเราครับ

 



Topic : 111805



โพสกระทู้ ( 3,748 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์
Facebook



ถ้าหากใครรู้แล้วผ่านเลยนะครับ

ปัจจุบันเทคโนโลยี ล้ำหน้าไปมากค่อนข้างเยอะ เราเป็นคนทำเว็บก็ต้องตามมันให้ทันครับ
ปรกติเวลาเราทำแบบฟอร์ม เพื่อส่งค่าไปยังที่ต่างๆ เช่น อีเมล์ หรือ จะเข้าดาต้าเบส มันค่อนข้างยุ่งยากมากๆเวลาต้องเช็ค datatype แต่ล่ะช่อง กำหนดฟิลด์ให้ได้ตามแบบที่ต้องการ บางคนอาจจะเขียน javascript , jquery หรือ php ขึ้นมาเพื่อเช็คค่าต่างๆมากมาย

แต่ปัจจุบันนั้น html5 มาพร้อมกับพาราเซตาม่อล ไม่ต้องเขียนดักให้ปวดหัวเราสามารถใส่ได้ทันทีเลยครับ

ยกตัวอย่างเช่น เราจะเขียนช่องสำหรับกรอกข้อมูล
แบบธรรมดา
Code (PHP)
<input name="name" type="text" />


เราสามารถกำหนดข้อความ หรือเช็คช่องต่างๆได้แทบทั้งสิ้น
แบบ html5
Code (PHP)
<input name="text" type="name" class="input_field" placeholder="name" required /> /// เช็คช่องอินพุทธรรมดา
<input name="email" type="email" class="input_field" placeholder="[email protected]" required /> /// เช็คช่องที่เป็นอีเมล


โดย:
placeholder = คำอธิบายในการกรอกข้อความ
required = ช่องสำหรับตรวจสอบไม่ให้เป็นค่าว่าง
type = email,tel,fax,url,image,date ลฯล ที่เหลือค้าหาเอาเองครับเยอะ
pattern = กำหนดชนิดข้อมูลให้เป็นไปตามเงื่อนไขที่เรากำหนด

ยกตัวอย่างเช่น
กำหนดตัวเลข = ([1-9])+(?:-?\d){4,}
กำหนดตัวอักษร = ^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$ // [a-zA-Z][a-zA-Z0-9-_\.] ตัวอักษรชุดแรกคือรูปแบบตัวอักษร ส่วนชุดหลังคือ จำนวนที่กรอกขั้นต่ำ-สูงสุด 1,20}$
กำหนดชนิด รหัสผ่าน = ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$
กำหนดรูปแบบตัวเลขเครดิตการ์ด (Amex Credit Card) = [0-9]{4} *[0-9]{6} *[0-9]{5}
กำหนดรูปแบบตัวเลขเครดิตการ์ดแบบปรกติ = [0-9]{13,16}
กำหนดรูปแบบเบอร์โทรศัพท์ = \d{3}[\-]\d{3}[\-]\d{4} (080-555-5555) ของไทยใช้ได้เลย รูปแบบ 3-3-4
เช็ควันที่ = (0[1-9]|1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4} /// DD MM YYYY
ถ้าจะเช็คอีเมล์ก็ใส่ input type="email" ได้เลย
การทำช่องกำหนดจำนวน แบบกดเลือกขึ้น-ลง คล้ายๆ select option
แค่กำหนด input="number"
กำหนดรูปแบบ มากสุด-น้อยสุดโดยใช้ min-max
step ขึ้น-ลงทีละ 5,10,15 หรือแล้วแต่เราจะกำหนด
<input type= "number" name= "five_steps" max= "30" min= "0" step= "5" value= "10" />

การทำกร๊าฟแท่งแบบแนวนอนโดยใช้แท็ก meter มิตเตอร์นั่นเอง
O%<meter value= "0"></meter> <br />

25%<meter value= ".25"></meter> <br />

40%<meter value= ".4"></meter> <br />

50%<meter value= ".5"></meter> <br />

75%<meter value= ".75"></meter> <br />

ทั้งนี้ทั้งนั้น ท่านเจ้าของเครื่องก็ต้องอัพบราวเซอร์ให้ล่าสุดด้วยนะครับ ถึงจะทำงานได้

แก้ไขลืมใส่ที่มาให้
http://www.pageresource.com/html5/input-validation-tutorial/
http://html5pattern.com/
http://www.w3schools.com/tags/att_input_pattern.asp



Tag : PHP, HTML/CSS









ประวัติการแก้ไข
2014-10-09 10:53:12
2014-10-09 13:48:14
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2014-10-08 17:34:24 By : Dragons_first View : 20220 Reply : 13
 

 

No. 1



โพสกระทู้ ( 9,545 )
บทความ ( 2 )



สถานะออฟไลน์


โปรแกรมเมอร์เกา่ๆ แบบผมยังรู้ไม่หมดกับของใหม่เลยครับ
ตอนนี้มีงานใหม่ๆมาถ้าไม่เร่ง ก็จะเปิด document ดู feature ใหม่ๆ นำมาใช้อยู่เรื่อยๆ

+ ให้ครับ






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-08 17:39:36 By : Chaidhanan
 


 

No. 2



โพสกระทู้ ( 1,521 )
บทความ ( 2 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์
Facebook

สามารถที่จะกำหนดข้อความที่แสดงเตือนได้มั๊ยคับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-08 18:45:18 By : Krungsri
 

 

No. 3



โพสกระทู้ ( 9,545 )
บทความ ( 2 )



สถานะออฟไลน์


<input type="email" required data-errormessage-value-missing="Please input something">

หรือ

<input id="UserID" type="text" required oninvalid="this.setCustomValidity('User ID is not empty')">
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-08 19:27:42 By : Chaidhanan
 


 

No. 4



โพสกระทู้ ( 1,521 )
บทความ ( 2 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์
Facebook


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-08 19:54:07 By : Krungsri
 


 

No. 5



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

จัดไปครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-09 08:47:22 By : mr.win
 


 

No. 6

Guest


แจ่มมากครับ สามารถศึกษาเพิ่มเติมได้ที่ไหนครับขอบคุณครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-09 13:31:29 By : ขอบคุณ
 


 

No. 7



โพสกระทู้ ( 24 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

เยี่ยมไปเลยครับ

ติดอย่างเดียวคือ Browser Safari ดันไม่รองรับตัว pattern ซะนี่ TT
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-01-05 00:27:33 By : yong0011
 


 

No. 8



โพสกระทู้ ( 421 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตัวนี้ผมได้ลองเอาไปใช้งานได้จริงนะครับ
เงื่อนไข
รับหมายเลขบัตรประจำตัวประชาชน
ให้กรอกไม่น้อยกว่า 13 ตัวเลข ->minlength="13"
และไม่ให้กรอกเกิน 13 ตัวเลข ->maxlength="13"
และกรอกได้เฉพราะ ตัวเลข ->pattern="[0-9]" (ให้รับเฉพราะเลข 0 ถึง เลข 9)
สามารถกำหนดข้อความแจ้งเตือนได้โด้ยใช้คำส่ง title ครับขอบคุณครับ ->title="กรุณากรอกตัวเลข"
Code
<input type="text" name="num_card" value="" placeholder="กรอกหมายเลขบัตรประจำตัวประชาชน" minlength="13" maxlength="13"pattern="[0-9]" title="กรุณากรอกตัวเลข">



ประวัติการแก้ไข
2017-12-13 11:55:22
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-12-13 11:50:50 By : nobetaking
 


 

No. 9

Guest


ช่วยอธิบายตรงนี้หน่อยคับ ไม่เข้าใจ

กำหนดตัวอักษร = ^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$ // [a-zA-Z][a-zA-Z0-9-_\.] ตัวอักษรชุดแรกคือรูปแบบตัวอักษร ส่วนชุดหลังคือ จำนวนที่กรอกขั้นต่ำ-สูงสุด 1,20}$
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-20 13:43:28 By : Mr.Perfunn
 


 

No. 10

Guest


ตอบความคิดเห็นที่ : 9 เขียนโดย : Mr.Perfunn เมื่อวันที่ 2018-09-20 13:43:28
รายละเอียดของการตอบ ::
... ใส่ความคิดเห็นตรงนี้....... ได้ละๆ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-20 14:52:08 By : Mr.Perfunn
 


 

No. 11



โพสกระทู้ ( 2,249 )
บทความ ( 5 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook Hi5 Blogger

+1 มีประโยชน์มากครับ สำหรับผู้ที่ยังไม่รู้
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-20 15:04:10 By : Manussawin
 


 

No. 12

Guest


ถ้ากำหนดให้ใส่แค่คำว่า male,female ประมาณนี้หล่ะครับ พิมพ์ได้แค่ 2 อย่างนี้
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-12-05 14:53:24 By : mick
 


 

No. 13



โพสกระทู้ ( 4,706 )
บทความ ( 8 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 12 เขียนโดย : mick เมื่อวันที่ 2019-12-05 14:53:24
รายละเอียดของการตอบ ::
pattern="male|female"

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-12-05 21:29:17 By : mr.v
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : แจก HTML5 pattern ครับ เผื่อใครยังไม่รู้ ถ้ารู้แล้วก็เข้ามาเสริมเพิ่มเติมได้ครับ เพื่อลดเวลาการทำงานของเราครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่