html » all-IT

Jun 01

Regulärer Ausdruck für eine gültige Email Adresse

die wenigsten unter uns Webentwicklern werden es wissen. Aber dies:

(?:(?:\r\n)?[ \t])*(?:(?:(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t]
)+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:
\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(
?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ 
\t]))*"(?:(?:\r\n)?[ \t])*))*@(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\0
31]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\
](?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+
(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:
(?:\r\n)?[ \t])*))*|(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z
|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)
?[ \t])*)*\<(?:(?:\r\n)?[ \t])*(?:@(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\
r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[
 \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)
?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t]
)*))*(?:,@(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[
 \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*
)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t]
)+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*))*)
*:(?:(?:\r\n)?[ \t])*)?(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+
|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r
\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:
\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t
]))*"(?:(?:\r\n)?[ \t])*))*@(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031
]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](
?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?
:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?
:\r\n)?[ \t])*))*\>(?:(?:\r\n)?[ \t])*)|(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?
:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?
[ \t]))*"(?:(?:\r\n)?[ \t])*)*:(?:(?:\r\n)?[ \t])*(?:(?:(?:[^()<>@,;:\\".\[\] 
\000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|
\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>
@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"
(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*))*@(?:(?:\r\n)?[ \t]
)*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\
".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?
:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[
\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*))*|(?:[^()<>@,;:\\".\[\] \000-
\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(
?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*)*\<(?:(?:\r\n)?[ \t])*(?:@(?:[^()<>@,;
:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([
^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\"
.\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\
]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*))*(?:,@(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\
[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\
r\\]|\\.)*\](?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] 
\000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]
|\\.)*\](?:(?:\r\n)?[ \t])*))*)*:(?:(?:\r\n)?[ \t])*)?(?:[^()<>@,;:\\".\[\] \0
00-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\
.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,
;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|"(?
:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*))*@(?:(?:\r\n)?[ \t])*
(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".
\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t])*(?:[
^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\]
]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*))*\>(?:(?:\r\n)?[ \t])*)(?:,\s*(
?:(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\
".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*)(?:\.(?:(
?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[
\["()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t
])*))*@(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t
])+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*)(?
:\.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|
\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*))*|(?:
[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".\[\
]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*)*\<(?:(?:\r\n)
?[ \t])*(?:@(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["
()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)
?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>
@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*))*(?:,@(?:(?:\r\n)?[
 \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,
;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*)(?:\.(?:(?:\r\n)?[ \t]
)*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\
".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*))*)*:(?:(?:\r\n)?[ \t])*)?
(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\["()<>@,;:\\".
\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])*)(?:\.(?:(?:
\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z|(?=[\[
"()<>@,;:\\".\[\]]))|"(?:[^\"\r\\]|\\.|(?:(?:\r\n)?[ \t]))*"(?:(?:\r\n)?[ \t])
*))*@(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])
+|\Z|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*)(?:\
.(?:(?:\r\n)?[ \t])*(?:[^()<>@,;:\\".\[\] \000-\031]+(?:(?:(?:\r\n)?[ \t])+|\Z
|(?=[\["()<>@,;:\\".\[\]]))|\[([^\[\]\r\\]|\\.)*\](?:(?:\r\n)?[ \t])*))*\>(?:(
?:\r\n)?[ \t])*))*)?;\s*)

ist der reguläre Ausdruck für eine gültige Mail Adresse nach RFC822.

… und wer das nicht nutzt, ist kein Mann.

Christian Heilmann
JAX 2011 – Keynote
HTML5 – das Web und der Browser als Platform

Links:
Präsentation zur Keynote von Christian Heilmann

geschrieben von gklinkmann \\ tags: html, Web

Oct 19

Formulare validieren mit HTML 5

Web No Comments »

Die Validierung von Formularelementen ist in HTML 5 Formularen bereits integriert. Es gibt unterschiedliche Feldtypen (für z.B. email und url) und Attribute, die die Eingabe von Werten in Formularfeldern einschränken.
Es wäre ein Segen für jeden Webentwickler, wenn ja wenn jeder Browser diese HTML 5 Funktionalität bereits jetzt unterstützen würde. Besonders das Sorgenkind Internet Explorer patzt an dieser Stelle, aber auch mein Lieblingsbrowser Opera muss momentan dazu noch überredet werden.

Fehlende HTML 5 Funktionalitäten werden momentan mit Javascript nachgerüstet (s.a. modernizr). So ist es auch beim jquery Plugin html5form, dass bei der Formularvalidierung nachhilft.

Die Einbindung ist so einfach, dass es auch mit einer Zeile Code möglich wäre. An dieser Stelle aber schon ein erweitertes Beispiel, das zusätzlich die Fehlerausgabe in Deutsch und in einem eigenen Bereich aktiviert:

<script src="<?= base_url() ?>js/jquery-1.4.2.min.js"></script>
<script src="<?= base_url() ?>js/jquery.html5form-min.js"></script>
<script>
   $('#userForm').html5form({
      messages : 'de', // Options 'en', 'es', 'it', 'de'
      responseDiv : '#response'
      colorOn:'#6b6764',
      colorOff:'#0d85a5'
   })
</script>

Verwendet man in einem Formularelement dann z.B. das Attribut required und es erfolgt keine Eintrag in dieses Feld, dann sieht die Fehlermeldung so aus

Getestet wurde html5form für die Browser:

Internet Explorer:
IE6 – IE7 – IE8 – IE9 beta
Mozilla Firefox:
3.0 – 3.5 – 3.6 – 4.0 beta6
Google Chrome:
4.0 – 5.0 – 6.0
Apple Safari:
4.0 – 5.0
Opera:
10

Bei den WebKit basierten Browsern Chrome und Safari, die die Formular Validierung in HTML 5 bereits unterstützen, wird dieses Plugin nicht aktiviert. Zu Testzwecken kann man aber auch das erzwingen.

via:
HTML5 Validierung mit jQuery

geschrieben von gklinkmann \\ tags: Browser, html, JavaScript

Oct 13

HTML 5 Vorlage

Web No Comments »

Einen leeres HTML Gerüst:

<html>
  <head>
  </head>
  <body>
  </body>
</html>

sollte jeder Webentwickler ohne Nachzuschauen schreiben können. Doch wie sieht es mit korrektem XHTML (inklusive Namespace) aus? Doch eher schlecht, oder?
HTML 5 vereinfacht zumindest die Namespace Angabe. Doch zu einer modernen Web 2.0 Anwendung gehört auch die Einbettung von CSS Stylesheets und Javascript Frameworks (wie z.B. jquery).

Im täglichen Einsatz hat sich bei einem selbst sicherlich eine bestimmte Struktur etabliert. Wie man es machen könnte, zeigen Paul Irish und Divya Manian auf ihrer Website html5boilerplate.com.

Die Vorlage, die auch gleich die notwendigen Javascript Bibliotheken für die HTML 5 Kompatibilität der aktuellen Browser, Profiling, CSS und Javascript Foo enthält:

Modernizr: MIT/BSD license
jQuery: MIT/GPL license
DD_belatedPNG: MIT license
YUI Profiling: BSD license
HTML5Doctor CSS reset: Creative Commons 3.0 BY
CSS Reset Reloaded: Public Domain

steht auf GitHub zum Download bereit.

geschrieben von gklinkmann \\ tags: html, tutorial, web2.0

Sep 26

weekly links [KW 38]

Allgemein, weekly links No Comments »

Der Sommer ist definitiv vorbei. Wenn die Tage kürzer werden hat man mehr Zeit zum Lesen und so will ich meine Kategorie “weekly links” wieder aufleben lassen. Den letzten Artikel dieser Art gab es in der 18. Woche. Es ist schon erstaunlich, wie schnell doch 20 Wochen vergehen.

OpenShot Video Editor: OpenShot Video Editor ist, wie der Name schon sagt, ein freier Video Editor für Linux.
HeadLightSoft – DeTune: Normaler Weise kann man nur Musik von iTunes zum iPod bringen. DeTune ermöglicht auch den Weg in die andere Richtung.
Google Apps für deine Domain: Wer bereits Google Mail und den Google Kalender nutzt und dies mit seiner eigenen Domain verbinden möchte, sollte sich einmal Google Apps für deine Domain anschauen. Dieser Artikel hilft bei der Einrichtung.
jQuery Html5form En, Matias Mancini: Die Validierung von Formularen ist des Webworkers tägliche Arbeit. Dieses jQuery Plugin rüstet die in HTML5 eingebettete Validierung für alle Browser nach.

geschrieben von gklinkmann \\ tags: apple, google, html, JavaScript, Linux

Apr 14

HTML5 – Teste Deinen Browser

Web 6 Comments »

HTML5 ist momentan in aller Munde. Unter html5test.com kann man feststellen, wie gut der eigene Browser HTML5 unterstützt. Zu vergeben sind 160 Punkte aus den Bereichen:

Doctype
Canvas
Video
Audio
Geolocation
Storage
Offline Web Applications
Workers
Section elements
Grouping content elements
Text-level semantic element
Forms und
User interaction

Unter Windows liefern sich Opera 10.51 (102 Punkte) und Firefox 3.6.3 (101 Punkte) ein Kopf an Kopf Rennen. Vom Internet Explorer will ich gar nicht reden. Er liegt mit mit 11 Punkten, weit abgeschlagen, hinten. Ein Grund mehr ihn nicht mehr zu benutzen. Um fair zu sein, muss man allerdings erwähnen, dass er noch in der Version 6.0.2 auf meinem Rechner vor sich hin vegetiert.

Unter MacOs sieht es ein wenig anders aus. Zum Glück gibt es dort keinen Internet Explorer, allerdings ist die Opera Version 10.5 dort immer noch im Beta Status, so dass Opera 10.10, Firefox 3.6.3 und Safari 4.0.4 gegeneinander antreten.
Der Sieger heißt hier Safari mit 113 Punkte, gefolgt von Mozilla der mit 101 Punkten die gleiche Punktzahl wie unter Windows erreicht und Opera mit 38 Punkten, die durch die ältere Version begründet sind.

Habt Ihr einen Browser mit mehr Punkten?

geschrieben von gklinkmann \\ tags: Browser, html, Web

all-IT

Regulärer Ausdruck für eine gültige Email Adresse

Formulare validieren mit HTML 5

HTML 5 Vorlage

weekly links [KW 38]

HTML5 – Teste Deinen Browser

Kategorien

Tags

Tag Cloud

Grails Tutorial

Meta

Translator

Links