Editors Picks

Εμφάνιση αναρτήσεων με ετικέτα jquery. Εμφάνιση όλων των αναρτήσεων
Εμφάνιση αναρτήσεων με ετικέτα jquery. Εμφάνιση όλων των αναρτήσεων

Κυριακή 4 Σεπτεμβρίου 2011

Μικρή εισαγωγή στα regular expressions

- ΜΠΟΡΕΙ ΝΑ ΦΑΙΝΕΤΑΙ ΔΥΣΚΟΛΟ ΑΛΛΑ ΣΤΟ ΤΕΛΟΣ ΓΙΝΕΤΑΙ ΜΑΝΙΑ -

Με τα regular expressions μπορούμε να αναγνωρίζουμε ακολουθίες χαρακτήρων. Η ανθρώπινη νοημοσύνη μας δίνει την δυνατότητα να καταλαβαίνουμε ενότητες γραμμάτων και αριθμών. Για έναν υπολογιστή όμως αυτό είναι πολύ δύσκολο γιατί στην δικιά του αντίληψη όλα είναι bits και bytes.

Τα regular expressions λειτουργούνε σαν τα φίλτρα των file managers. Σε έναν file manager γράφουμε για παράδειγμα *.php για να βρούμε όλα τα αρχεία που τελειώνουν σε .php . Τα regular expressions είναι μια πολύ προχωρημένη έκδοση τέτοιων φίλτρων.

Στα regular expressions της γλώσσας Perl (στην οποία βασίζεται και η PHP) χρησιμοποιούμε χαρακτήρες για να δηλώσουμε την αρχή και το τέλος ενός μοτίβου (pattern)। Μας βολεύει να χρησιμοποιήσουμε έναν χαρακτήρα που δεν επαναλαμβάνεται από το pattern μας. Συνήθως χρησιμοποιείται το slash.


Παράδειγμα 1: Βρες το "abc" οπουδήποτε σε ένα string
κώδικας:
/abc/

Σύμβολο: $
Το $ στο τέλος του pattern συμβολίζει ένα string που κλείνει με το pattern μας.

Παράδειγμα 3: Βρες το "abc" στο τέλος του string
κώδικας:
/abc$/

Σύμβολο: .
Η τελεία συμβολίζει έναν οποιοδήποτε χαρακτήρα.

Παράδειγμα 4: Βρες το "ab", μετά έναν χαρακτήρα και μετά το "c"
κώδικας:
/ab.c/

Σύμβολο: *
Ο αστερίσκος συμβολίζει ένα pattern που επαναλαμβάνεται απο 0 έως άπειρες φορές.

Παράδειγμα 5: Βρες το "a", μετά κανένα ή όσα "b" θέλεις και μετά το "c"
κώδικας:
/ab*c/

Σύμβολο: ?
Ο λατινικό ερωτηματικό συμβολίζει ένα pattern που επαναλαμβάνεται απο 0 έως μία φορές.

Παράδειγμα 6: Βρες το "a", μετά κανένα ή ένα "b" και μετά το "c"
κώδικας:
/ab?c/

Σύμβολο: +
Ο συν συμβολίζει ένα pattern που επαναλαμβάνεται απο μία έως άπειρες φορές.

Παράδειγμα 7: Βρες το "a", μετά ένα ή περισσότερα "b" και μετά το "c"
κώδικας:
/ab+c/

Σύμβολα: { }
Τα άγκιστρα ανοίγουν μία παρένθεση για να βάλουμε ένα εύρος επανάληψης.

Παράδειγμα 8: Βρες το "a", μετά από 2 έως 7 φορές το "b" και μετά το "c"
κώδικας:
/ab{2,7}c/

Το εύρος μπορεί να είναι ανοιχτό, για παράδειγμα {2,} σημαίνει από 2 έως άπειρο. Τα ποιο πάνω σύμβολα * ? + μπορεί να γραφτούν και σαν {0,} {0,1} {1,} αντίστοιχα.

Σύμβολα: [ ]
Οι αγκύλες δηλώνουν μία ομάδα χαρακτήρων.

Παράδειγμα 9: Βρες το "a", μετά έναν από τους χαρακτήρες "d", "e", "f" και μετά το "c"
κώδικας:
/a[def]c/

Για ευκολία μπορούμε να χρησιμοποιούμε την παύλα για να ορίζουμε ομάδες αριθμών ή γραμμάτων. Για παράδειγμα το [a-z] είναι το ίδιο με το να γράψουμε όλα τα μικρά γράμματα του λατινικού αλφαβήτου. Επίσης μπορούμε να κάνουμε συνδυασμούς: [a-zA-Z0-9]. Αυτό όμως σημαίνει οτι η παύλα έχει ιδιαίτερη σημασία μέσα σε αγκύλες. Γι αυτό αν θέλουμε στην ομάδα να συμπεριλάβουμε και την παύλα πρέπει να την βάλουμε είτε στην αρχή είτε στο τέλος: [a-zA-Z0-9-]

Επίσης μέσα στις αγκύλες μπορούμε να πούμε ποιους χαρακτήρες ΔΕΝ θέλουμε. Αυτό το καταφέρνουμε αν για πρώτο χαρακτήρα βάλουμε το ^.

Παράδειγμα 10: Βρες το "a", μετά έναν χαρακτήρα που να μην είναι ο "d", "e", "f" και μετά το "c"
κώδικας:
/a[^def]c/

Σύμβολα: ( )
Οι παρενθέσεις ομαδοποιούν αποτελέσματα που θέλουμε να χρησιμοποιήσουμε. Επίσης ανάλογα με την PHP εντολή μπορούμε να ελέγχουμε το περιεχόμενο ενός pattern.

Παράδειγμα 11: Βρες το "a" μετά κανένα ή όσα "ps" θες και μετά ένα "c"
κώδικας:
/a(ps)*c/

Όμως τι γίνεται αν θέλουμε να χρησιμοποιήσουμε έναν από αυτούς τους ειδικούς χαρακτήρες; Απλά βάζουμε ένα back slash πριν τους γράψουμε.

Παράδειγμα 12: Βρες το "ab*c[123]z"
κώδικας:
/ab\*c\[123\]z/

Υπάρχουν κι άλλοι ειδικοί χαρακτήρες τους οποίους μπορείτε να βρείτε στο PHP Manual αν ψάξετε για "Pattern syntax". Για παράδειγμα το \w συμβολίζει οποιονδήποτε χαρακτήρα γράμμα και το \W οποιονδήποτε μη γράμμα.


Τέλος, υπάρχουν χαρακτήρες που ελέγχουν τον τρόπο χρήσης του pattern από την PHP και μπαίνουν στο τέλος του pattern. Αυτούς τους ονομάζουμε pattern modifiers. Ο πιο χρήσιμος είναι ο i και συμβολίζει οτι το pattern μας δεν είναι case sensitive.

Παράδειγμα 13: Βρες το "abc" είτε είναι γραμμένο με μικρά είτε με κεφαλαία γράμματα
κώδικας:
/abc/i

Μπορείτε να κάνετε άπειρους συνδυασμούς με αυτά τα σύμβολα. Αξίζει να τα μάθετε γιατί χρησιμεύουν πολύ σε δύσκολες στιγμές.

Παράδειγμα 14: Βρες ένα email.
κώδικας:
/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*$/i

Η PHP μας δίνει δύο ομάδες από functions για regular expressions. Τις ereg* και τις preg*. Από αυτές τις δύο στα manual αναφέρεται οτι οι preg* πρέπει να προτιμούνται γιατί είναι ποιο γρήγορες.

Διαβάστε το
http://gr.php.net/manual/en/ref.pcre.php
για περισσότερα για τις αναλύσεις των functions με τα οποία μπορείτε να βρίσκετε ένα ή πολλαπλά ευρήματα από patterns, να κάνετε αλλαγές (replacements) στα strings σας, ή να σπάτε (split) ένα string σε κομμάτια।

Πηγή: http://www.freestuff.gr/forums/viewtopic.php?t=25478

regular expressions for jquery validation



// Αρχίζει απο το ^ και τελειώνει στο $
return this.optional(element) / ^[A-Za-z0-9!@#$%^&*()_]{6,16}$ /i.test(value);



/// Επιτρέπει απο 6 εως 16 χαρακτήρες
$.validator.addMethod("katanalosi",function(value,element){
return this.optional(element) /^[A-Za-z0-9!@#$%^&*()_]{6,16}$/i.test(value);
},"Passwords are 6-16 characters");


/// Ελέγχει σωστό email
$.validator.addMethod("email", function(value, element) {
return this.optional(element) /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);
}, "Please enter a valid email address.");


/// Δεν επιτρέπονται σύμβολα
$.validator.addMethod("katanalosi", function(value, element) {
return this.optional(element) /^[A-Za-z\d]+$/i.test(value);
}, "Δεν επιτρέπονται σύμβολα.");



/// Ιστοσελίδα με όλα τα Regular για δοκιμή
http://gskinner.com/RegExr/?2ua2e

Σάββατο 18 Ιουνίου 2011

240 plugins jquery


Form Validation
jQuery ValidationAuto Help.Simple jQuery form validationjQuery XAV - form validationsjQuery AlphaNumericMasked InputTypeWatch PluginText limiter for form fieldsAjax Username Check with jQuery
File upload
Ajax File UploadjQUploaderMultiple File Upload pluginjQuery File StyleStyling an input type fileProgress Bar Plugin
Form - Select Box stuff
jQuery ComboboxjQuery controlled dependent (or Cascadign) Select List.Multiple SelectsSelect box manipulationSelect Combo PluginjQuery - LinkedSelectAuto-populate multiple select boxesChoose Plugin (Select Replacement)
Form Basics, Input Fields, Checkboxes etc.
jQuery Form Plugin.jQuery-Form.jLook Nice Forms.jNice.Ping PluginToggle Form TextToggleValjQuery Field PluginjQuery Form’n Field plugin.jQuery Checkbox manipulationjTaggingjQuery labelcheck.Overlabel3 state radio buttonsShiftCheckbox jQuery PluginWatermark InputjQuery Checkbox (checkboxes with imags)jQuery SpinButton ControljQuery Ajax Form BuilderjQuery Focus FieldsjQuery Time Entry
Time, Date and Color Picker
jQuery UI DatepickerjQuery date picker pluginjQuery Time PickerTime PickerClickPickTimePicker.Farbtastic jQuery Color Picker PluginColor Picker by intelliance.fr
Rating Plugins
jQuery Star Rating PluginjQuery Star RaterContent rater with asp.net, ajax and jQuery.Half-Star Rating Plugin
Search Plugins
jQuery SuggestjQuery AutocompletejQuery Autocomplete ModjQuery Autocomplete by AjaxDaddyjQuery Autocomplete Plugin with HTML formatting.jQuery AutocompleterAutoCompleter (Tutorial with PHP&MySQL)quick Search jQuery Plugin
Inline Edit & Editors
jTagEditor.WYMeditor.jQuery jFrameJeditable - edit in place plugin for jQueryjQuery editable.jQuery Disable Text Select PluginEdit in Place with Ajax using jQuery.jQuery Plugin - Another In-Place EditorTableEditortEditable - in place table editing for jQuery.
Audio, Video, Flash, SVG, etc
jMedia - accessible multi-media embeddingJBEdit - Ajax online Video EditorjQuery MP3 Plugin.jQuery Media Plugin.jQuery Flash PluginEmbed QuickTimeSVG Integration.
Photos/Images/Galleries
ThickBox.jQuery lightBox pluginjQuery Image StripjQuery slideViewerjQuery jqGalScroll 2.0jQuery - jqGalViewIIjQuery - jqGalViewIIIjQuery Photo SliderjQuery Thumbs - easily create thumbnailsjQuery jQIR Image ReplacementjCarousel LitejQPanViewjCarouselInterface ImageboxImage Gallery using jQuery, Interface & Reflactions.simple jQuery GalleryjQuery Gallery ModuleEO Gallery.jQuery ScrollShowjQuery Cycle PluginjQuery FlickrjQuery Lazy Load Images PluginZoomi - Zoomable ThumbnailsjQuery Crop - crop any image on the fly.Image Reflection
Google Map
jQuery Plugin googlemapsjMaps jQuery Maps FrameworkjQmapsjQuery & Google MapsjQuery Maps Interface forr Google and Yahoo mapsjQuery J Maps - by Tane Piper
Games
Tetris with jQueryjQuery Chess.Mad Libs Word GamejQuery Puzzle.jQuery Solar System (not a game but awesome jQuery Stuff).
Tables, Grids etc.
UI/TablesorterjQuery ingrid.jQuery Grid Plugin.Table Filter - awesome!TableEditorjQuery Tree TablesExpandable “Detail” Table RowsSortable Table ColdFusion Costum Tag with jQuery UI.jQuery BubbleTableSorter.Scrollable HTML TablejQuery column Manager PluginjQuery tableHover PluginjQuery columnHover PluginjQuery Grid.TableSorter plugin for jQuerytEditable - in place table editing for jQuery.jQuery charToTable PluginjQuery Grid Column SizingjQuery Grid Row Sizing
Charts, Presentation etc.
jQuery Wizard Plugin jQuery Chart PluginBar Chart.
Border, Corners, Background
jQuery Corner.jQuery Curvy CornerNifty jQuery CornerTransparent CornersjQuery Corner GalleryGradient Plugin
Text and Links
jQuery Spoiler pluginText HighlightingDisable Text Select PluginjQuery NewstickerAuto line-height PluginTextgrad - a text gradient pluginLinkLook - a link thumbnail previewpager jQuery PluginshortKeys jQuery PluginjQuery BiggerlinkjQuery Ajax Link Checker
Tooltips
jQuery Plugin - TooltipjTip - The jQuery Tool TipclueTipBetterTip.Flash Tooltips using jQueryToolTip
Menus, Navigations
jQuery Tabs Plugin - awesome! [demo nested tabs]another jQuery nested Tab Set example (based on jQuery Tabs Plugin)jQuery idTabs.jdMenu - Hierarchical Menu Plugin for jQueryjQuery SuckerFish StylejQuery Plugin TreeviewtreeView Basic.FastFind MenuSliding MenuLava Lamp jQuery Menu.jQuery iconDockjVariations Control PanelContextMenu pluginclickMenu.CSS Dock MenujQuery Pop-up Menu TutorialSliding Menu
Accordions, Slide and Toggle stuff
jQuery Plugin AccordionjQuery Accordion Plugin Horizontal Wayhaccordion - a simple horizontal accordion plugin for jQuery.Horizontal Accordion by portalzine.de.HoverAccordionAccordion Example from fmarcia.infojQuery Accordion ExamplejQuery Demo - Expandable Sidebar MenuSliding Panels for jQueryjQuery ToggleElementsCoda Slider.jCarouselAccesible News Slider PluginShowing and Hiding code ExamplesjQuery Easing PluginjQuery PortletsAutoScrollInnerfade.
Drag and Drop
UI/Draggables.EasyDrag jQuery PluginjQuery PortletsjqDnR - drag, drop resizeDrag Demos.
XML XSL JSON Feeds
XSLT PluginjQuery Ajax call and result XML parsing.xmlObjectifier - Converts XML DOM to JSONjQuery XSL Transform.jQuery Taconite - multiple Dom updatesRSS/ATOM Feed Parser PluginjQuery Google Feed Plugin
Browserstuff
Wresize - IE Resize event Fix Plugin.jQuery ifixpng.jQuery pngFix.Link Scrubber - removes the dotted line onfocus from links.jQuery Perciformes - the entire suckerfish familly under one roofBackground IframeQinIE - for proper display of Q tags in IEjQuery Accessibility PluginjQuery MouseWheel Plugin
Alert, Prompt, Confirm Windows
jQuery Impromptu.jQuery Confirm PluginjqModal.SimpleModal
CSS
jQuery Style SwitcherJSS - Javascript StyleSheetsjQuery Rule - creation/manipulation of CSS RulesjPrintArea.
DOM, Ajax and other jQuery plugins
FlyDOM.jQuery Dimenion PluginjQuery LogginMetadata - extract metadata from classes, attributes, elementsSuper-tiny Client-Side Include Javascript jQuery Plugin.Undo Made Easy with AjaxJHeartbeat - periodically poll the serverLazy Load PluginLive QueryjQuery Timers.jQuery Share it - display social bookmarking iconsjQuery serverCookieJarjQuery autoSavejQuery PufferjQuery iFrame PluginCookie Plugin for jQueryjQuery Spy - awesome pluginEffect Delay TrickjQuick - a quick tag creator for jQueryMetaobjectselementReady