จะทำการเช็ค นามสกุล File Browse ด้วย jQuery?

Tee++; — Fri, 21 Nov 2008 17:09:05 +0000

เอาล่ะๆ ไหนๆ จะเขียนทั้งที เขียนมันติดๆ กันไปเลย หลายๆเรื่องละกัน อันนี้เป็น Tip เล็กๆ ที่จะมาบอกกัน เป็นเื่รื่องของ การเช็คนามสกุลไฟล์ที่ผ่านเข้ามาใน input browse ว่าจะสามารถให้ผ่านไปได้หรือไม่ โดยเอา jQuery กับ Regular มาช่วยกันทำงานนี้ให้สำเร็จ

สมมุติว่าเราอยากจะให้ user browse ไฟล์เข้ามาได้แต่เรา ไม่ต้องการไฟล์ลักษณะ อื่นๆ เลยนอกจาก images อย่างเดียว ลองมาดูวิธีการเขียนของ jQuery กัน

ก่อนอื่นเราก็ต้องมี input ก่อน

แล้วก็ไปเขียนเช็คแบบนี้

$(‘$uploadme’).change(function() {
if ($(this).val()) {
var pattern = "png|jpe?g|gif";
if ($(this).val().match(new RegExp(".(" + pattern + ")$")) == null) {
alert( ‘not valid’); return;
} else { alert(‘valid’); }
}
});

จบแล้วล่ะครับ ง่ายดีใช่มั้ยล่ะ

Really Simple Validation

Tee++; — Fri, 21 Nov 2008 16:04:37 +0000

หลายๆคนคงเคยเขียน validation ผ่าน js ซึ่งตามปกติแล้ว เรามักจะเขียน Rule ที่ละตัวๆ แล้วก็เขียนมันซ้ำไปซ้ำมาอยู่นั่นล่ะ เรียกว่าเป็นงาน Routine ที่น่าเบื่อสุดๆ ไปเลย ไหนจะ E-mail, ตัวเลข, ค่าว่าง, ภาษา, custom และอีกมากมายตามแต่จะรังสรรค์กันมา

ถามหน่อยเหอะ “ไม่เบื่อเหรอ” ถ้าคำตอบว่า เบื่อ ลองมาดูการ validate ผ่าน jQuery plugin กันหน่อยเป็นไง ซึ่งตามที่ผมลองเล่นมา jQuery จะมี plugin ประเภทนี้ อยู่เพียบเลย แต่ผมให้แค่ 3 ตัว ก็คือ

bassistance.de
- ตัวนี้ดีมากครับ ครบเครื่อง validate ได้ทุกรูปบบ ใช้ in-line code ได้ด้วย แต่ config ยากนิดนึง ต้องใช้เวลาในการทำความเข้าใจ

Consulenza-web.com
- ตัวนี้ใช้ง่ายที่สุดใน 3 ตัว ไม่ต้องศึกษาอะไรเลย แต่ข้อเสียคือ มันเป็นการ validation แบบ Type Watch คือ มันจะไม่มีตัวอะไรปรากฏ ถ้าเราทำการพิมพ์ไม่ถูกตาม Rule

Really Simple Validation (RSV)
- ตัวนี้ค่อนข้างครบเครื่อง ใช้งานง่าย Custom Function ได้ แต่เสียดายที่มันมีการเขียนโคด แบบ in-line เราต้องระบุ Rule ให้ครบก่อน

*** รูปแบบการเขียน in-line คือระบุเข้าไปใน input ตรงๆ เช่น

เอาล่ะๆ แต่ตัวที่จะมาพูดถึงวันนี้ก็คือตัวที่ 3 นั่น เอง ที่มีชื่อว่า Really Simple Validation (RSV) ซึ่งตัวนี้จะเป็น validation plugin ที่มีความสารถครบ ที่สำคญยังสารถ custom rule ได้เองอีก นับว่าเป็น plugin ที่มีประโยชน์ทีเดียว และเพื่อไม่ให้เกิดการ Duplicate Content เอาเป็นว่าไปดู Demo ที่เวบมันเอาเองเลยละกัน 555
Demostration Page

ซึ่งการใช้งานจะเป็นรูปแบบที่เราจะต้องทำการ Define Rules และ Messages เตรียมไว้ให้ input ก่อน ตัวอย่างเช่น (copy มา)

$(document).ready(function() {
$("#demo_form1").RSV({
onCompleteHandler: myOnComplete,
rules: [
"required,first_name,Please enter your first name.",
"required,last_name,Please enter your last name.",
"required,email,Please enter your email address.",
"valid_email,email,Please enter a valid email address.",
"required,any_integer,Please enter your age.",
"digits_only,any_integer,The age field may only contain digits.",
"required,marital_status,Please enter your marital status."
]
});
});

ซึ่งโดย default จะเป็นการ Alert ธรรมดาๆ แต่ถ้าอยากให้มัน Display มาที่หน้าแทนการ alert ก็แค่เพิ่ม option ไปไม่กี่ตัวเช่น

displayType: “display-html”
errorFieldClass: “errorFieldDemo2″

จะเป็นระบุถึง DOM ตัวที่จะแสดง Error และยังสามารถกำหนด Class ให้มันได้อีกด้วย

โดยที่ตัวอย่าง Rules เราสามารถดูได้ที่หน้านี้
All Rules

รูปแบบก็คือ
rules.push(“required,user_name,This field is required.”);
1. Rule
2. Input Field Name
3. Message

การใช้งานก็ไม่ยากอะไร ยังไงถ้าสนใจก็ลองไป หาดาวน์โหลดมาใช้ได้จากลิ้งก์ที่ให้ไว้นะครับ

jQueryTips by Tee++; » validate

จะทำการเช็ค นามสกุล File Browse ด้วย jQuery?

Really Simple Validation