 |
แจก HTML5 pattern ครับ เผื่อใครยังไม่รู้ ถ้ารู้แล้วก็เข้ามาเสริมเพิ่มเติมได้ครับ เพื่อลดเวลาการทำงานของเราครับ |
| |
 |
|
|
 |
 |
|
ถ้าหากใครรู้แล้วผ่านเลยนะครับ
ปัจจุบันเทคโนโลยี ล้ำหน้าไปมากค่อนข้างเยอะ เราเป็นคนทำเว็บก็ต้องตามมันให้ทันครับ
ปรกติเวลาเราทำแบบฟอร์ม เพื่อส่งค่าไปยังที่ต่างๆ เช่น อีเมล์ หรือ จะเข้าดาต้าเบส มันค่อนข้างยุ่งยากมากๆเวลาต้องเช็ค 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
|
 |
 |
 |
 |
| Date :
2014-10-08 17:34:24 |
By :
Dragons_first |
View :
21111 |
Reply :
13 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
โปรแกรมเมอร์เกา่ๆ แบบผมยังรู้ไม่หมดกับของใหม่เลยครับ
ตอนนี้มีงานใหม่ๆมาถ้าไม่เร่ง ก็จะเปิด document ดู feature ใหม่ๆ นำมาใช้อยู่เรื่อยๆ
+ ให้ครับ
|
| |
|
|
| |
| Date :
2014-10-08 17:39:36 |
By :
Chaidhanan |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
สามารถที่จะกำหนดข้อความที่แสดงเตือนได้มั๊ยคับ
|
| |
|
|
| |
| Date :
2014-10-08 18:45:18 |
By :
Krungsri |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
<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 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
| |
|
|
| |
| Date :
2014-10-08 19:54:07 |
By :
Krungsri |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
 จัดไปครับ
|
| |
|
|
| |
| Date :
2014-10-09 08:47:22 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
แจ่มมากครับ สามารถศึกษาเพิ่มเติมได้ที่ไหนครับขอบคุณครับ
|
| |
|
|
| |
| Date :
2014-10-09 13:31:29 |
By :
ขอบคุณ |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
เยี่ยมไปเลยครับ
ติดอย่างเดียวคือ Browser Safari ดันไม่รองรับตัว pattern ซะนี่ TT
|
| |
|
|
| |
| Date :
2016-01-05 00:27:33 |
By :
yong0011 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ช่วยอธิบายตรงนี้หน่อยคับ ไม่เข้าใจ
กำหนดตัวอักษร = ^[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 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
+1 มีประโยชน์มากครับ สำหรับผู้ที่ยังไม่รู้
|
| |
|
|
| |
| Date :
2018-09-20 15:04:10 |
By :
Manussawin |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ถ้ากำหนดให้ใส่แค่คำว่า male,female ประมาณนี้หล่ะครับ พิมพ์ได้แค่ 2 อย่างนี้
|
| |
|
|
| |
| Date :
2019-12-05 14:53:24 |
By :
mick |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
