Refactor
:my
=>
'code'
Codes
Refactorings
Popular
Best
Submit
Spam
Account
Logout
Login
JavaScript doesn't seem to be activated, expect things to be ugly and sloppy!
More Jobs
Recent
Cheap ruby block templating
Bindings on caller
Initial script execution very slow and skewing results
suppress ERB newlines
Keeping the database clean
Arrays, loops, strings...
Similar virtual attributes and their getters/setter
Check type is XML Serializable
Serena Collage slideshow
Shortest regular expression for matching a subdomain.
Popular
Caching Methods
How to find max, min of three numbers?
Similar virtual attributes and their getters/setter
Shortest regular expression for matching a subdomain.
Arrays, loops, strings...
Cheap ruby block templating
Check type is XML Serializable
Bindings on caller
Apache log file sorting
Tab-Switching in jQuery
Pastable version of
Simple form validator with RegEx
<div style="overflow:auto;border:solid 1px #ccc;background:#000;color:#F8F8F8"> <div class="section"> <span style="margin:0;padding:4px 6px;font-size:12px;float:right;">Base function</span> <pre style="float:left;margin:0 10px;border-right:0;color:#666;">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38</pre> <pre class="sunburst"><span style="color:#AEAEAE;font-style:italic;"><span style="color:#AEAEAE;font-style:italic;">//</span>function that loops through the elements</span> <span style="color:#99CF50;">function</span> <span style="color:#89BDFF;">__validateForm</span>(<span style="color:#3E87E3;">theform</span>){ numEle<span style="color:#E28964;">=</span>theform.<span style="color:#CF6A4C;">elements</span>.<span style="color:#CF6A4C;">length</span>; <span style="color:#E28964;">for</span>(i<span style="color:#E28964;">=</span><span style="color:#3387CC;">0</span>;i<span style="color:#E28964;"><</span>numEle;i<span style="color:#E28964;">++</span>){ elem<span style="color:#E28964;">=</span>theform.<span style="color:#CF6A4C;">elements</span>[i]; <span style="color:#E28964;">if</span>(elem.<span style="color:#CF6A4C;">alt</span>){ parts<span style="color:#E28964;">=</span>elem.<span style="color:#CF6A4C;">alt</span>.<span style="color:#DAD085;">split</span>(<span style="color:#65B042;"><span style="color:#65B042;">"</span>::<span style="color:#65B042;">"</span></span>); regex<span style="color:#E28964;">=</span><span style="color:#E28964;">new</span> <span style="text-decoration:underline;">RegExp</span>(parts[<span style="color:#3387CC;">0</span>],<span style="color:#65B042;"><span style="color:#65B042;">'</span>i<span style="color:#65B042;">'</span></span>); <span style="color:#E28964;">if</span>(<span style="color:#E28964;">!</span>regex.<span style="color:#DAD085;">test</span>(elem.<span style="color:#CF6A4C;">value</span>)){ <span style="color:#DAD085;">alert</span>(parts[<span style="color:#3387CC;">1</span>]); <span style="color:#E28964;">return</span> <span style="color:#3387CC;">false</span>; } } } <span style="color:#E28964;">return</span> <span style="color:#3387CC;">true</span>; } <span style="color:#AEAEAE;font-style:italic;"><span style="color:#AEAEAE;font-style:italic;">//</span>init function to bind the validation to the onsubmit</span> <span style="color:#AEAEAE;font-style:italic;"><span style="color:#AEAEAE;font-style:italic;">//</span>can take an argument, that is a function for extra validation</span> <span style="color:#99CF50;">function</span> <span style="color:#89BDFF;">validateForm</span>(){ <span style="color:#99CF50;">var</span> vaditional; <span style="color:#E28964;">if</span>(<span style="color:#E28964;">!</span>arguments.<span style="color:#CF6A4C;">length</span>){ <span style="color:#89BDFF;">f</span>=<span style="color:#99CF50;">function</span>(){ <span style="color:#E28964;">return</span> __validateForm(<span style="color:#3E87E3;">this</span>); } }<span style="color:#E28964;">else</span>{ vaditional<span style="color:#E28964;">=</span>arguments[<span style="color:#3387CC;">0</span>]; <span style="color:#89BDFF;">f</span>=<span style="color:#99CF50;">function</span>(){ ret<span style="color:#E28964;">=</span>__validaForm(<span style="color:#3E87E3;">this</span>); <span style="color:#E28964;">if</span>(ret) <span style="color:#E28964;">return</span> vaditional(<span style="color:#3E87E3;">this</span>); <span style="color:#E28964;">return</span> <span style="color:#3387CC;">false</span>; } } <span style="color:#E28964;">return</span> f; } </pre> </div> </div> <div style="overflow:auto;border:solid 1px #ccc;background:#000;color:#F8F8F8"> <div class="section"> <span style="margin:0;padding:4px 6px;font-size:12px;float:right;">case of use 1</span> <pre style="float:left;margin:0 10px;border-right:0;color:#666;">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21</pre> <pre class="sunburst"><span style="color:#89BDFF;"><span style="color:#89BDFF;"><</span><span style="color:#89BDFF;">html</span><span style="color:#89BDFF;">></span></span> <span style="background-color:#222;"><span style="background-color:#222;"><</span><span style="color:#E0C589;">script</span><span style="background-color:#222;">></span></span> <span style="background-color:#222;"><span style="background-color:#222;"><span style="color:#99CF50;">function</span> <span style="color:#89BDFF;">init</span><span style="background-color:#222;">(</span><span style="background-color:#222;">)</span></span><span style="background-color:#222;">{</span></span> <span style="background-color:#222;"> <span style="color:#9B859D;">document</span><span style="background-color:#222;">.</span><span style="color:#CF6A4C;">forms</span><span style="background-color:#222;">.</span>registro<span style="background-color:#222;">.</span>onsubmit<span style="color:#E28964;">=</span>validateForm<span style="background-color:#222;">(</span><span style="background-color:#222;">)</span><span style="background-color:#222;">;</span></span> <span style="background-color:#222;"><span style="background-color:#222;">}</span></span> <span style="background-color:#222;"><span style="color:#9B859D;">window</span><span style="background-color:#222;">.</span>onload<span style="color:#E28964;">=</span>init<span style="background-color:#222;">;</span></span> <span style="background-color:#222;"><span style="background-color:#222;"></</span><span style="color:#E0C589;">script</span><span style="background-color:#222;">></span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;"><</span><span style="color:#89BDFF;">body</span><span style="color:#89BDFF;">></span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;"><</span><span style="color:#89BDFF;">form</span> <span style="color:#89BDFF;">name</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>registro<span style="color:#65B042;">"</span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;">id</span><span style="color:#89BDFF;">=</span><span style="color:#65B042;"><span style="color:#65B042;">"</span><span style="color:#65B042;">registro</span><span style="color:#65B042;">"</span></span></span> <span style="color:#89BDFF;">action</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>procesa_login.html<span style="color:#65B042;">"</span></span> <span style="color:#89BDFF;">method</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>post<span style="color:#65B042;">"</span></span><span style="color:#89BDFF;">></span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;"><</span><span style="color:#89BDFF;">fieldset</span><span style="color:#89BDFF;">></span></span> <span style="color:#E0C589;"><span style="color:#E0C589;"><</span><span style="color:#E0C589;">legend</span><span style="color:#E0C589;">></span></span>Login<span style="color:#E0C589;"><span style="color:#E0C589;"></</span><span style="color:#E0C589;">legend</span><span style="color:#E0C589;">></span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;"><</span><span style="color:#89BDFF;">p</span><span style="color:#89BDFF;">></span></span>Username:<span style="color:#89BDFF;"><span style="color:#89BDFF;"></</span><span style="color:#89BDFF;">p</span><span style="color:#89BDFF;">></span></span> <span style="color:#E0C589;"><span style="color:#E0C589;"><</span><span style="color:#E0C589;">input</span> <span style="color:#E0C589;">type</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>text<span style="color:#65B042;">"</span></span> <span style="color:#E0C589;">name</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>usuario<span style="color:#65B042;">"</span></span> <span style="color:#E0C589;">alt</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>^[a-z0-9_-]<span style="color:#DAEFA3;">{4,12}</span>$::Specifie a username between 4 and 12 alfanumeric character. No whit space allowed<span style="color:#65B042;">"</span></span> /<span style="color:#E0C589;">></span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;"><</span><span style="color:#89BDFF;">p</span><span style="color:#89BDFF;">></span></span>Password:<span style="color:#89BDFF;"><span style="color:#89BDFF;"></</span><span style="color:#89BDFF;">p</span><span style="color:#89BDFF;">></span></span> <span style="color:#E0C589;"><span style="color:#E0C589;"><</span><span style="color:#E0C589;">input</span> <span style="color:#E0C589;">type</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>password<span style="color:#65B042;">"</span></span> <span style="color:#E0C589;">name</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>password<span style="color:#65B042;">"</span></span> <span style="color:#E0C589;">alt</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>^.<span style="color:#DAEFA3;">{4,12}</span>$::Introduce a password between 4 and 12 characters<span style="color:#65B042;">"</span></span> /<span style="color:#E0C589;">></span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;"></</span><span style="color:#89BDFF;">fieldset</span><span style="color:#89BDFF;">></span></span> <span style="color:#E0C589;"><span style="color:#E0C589;"><</span><span style="color:#E0C589;">input</span> <span style="color:#E0C589;">type</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>submit<span style="color:#65B042;">"</span></span> <span style="color:#E0C589;">name</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>submit<span style="color:#65B042;">"</span></span> <span style="color:#E0C589;">value</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>Enviar<span style="color:#65B042;">"</span></span> /<span style="color:#E0C589;">></span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;"></</span><span style="color:#89BDFF;">form</span><span style="color:#89BDFF;">></span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;"></</span><span style="color:#89BDFF;">body</span><span style="color:#89BDFF;">></span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;"></</span><span style="color:#89BDFF;">html</span><span style="color:#89BDFF;">></span></span> </pre> </div> </div> <div style="overflow:auto;border:solid 1px #ccc;background:#000;color:#F8F8F8"> <div class="section"> <span style="margin:0;padding:4px 6px;font-size:12px;float:right;">case of use 2</span> <pre style="float:left;margin:0 10px;border-right:0;color:#666;">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32</pre> <pre class="sunburst"><span style="color:#89BDFF;"><span style="color:#89BDFF;"><</span><span style="color:#89BDFF;">html</span><span style="color:#89BDFF;">></span></span> <span style="background-color:#222;"><span style="background-color:#222;"><</span><span style="color:#E0C589;">script</span><span style="background-color:#222;">></span></span> <span style="background-color:#222;"><span style="color:#AEAEAE;font-style:italic;"><span style="color:#AEAEAE;font-style:italic;">//</span>in this case we use a function to compare the two passwords fields</span></span> <span style="background-color:#222;"><span style="background-color:#222;"><span style="color:#99CF50;">function</span> <span style="color:#89BDFF;">comparePasswords</span><span style="background-color:#222;">(</span><span style="color:#3E87E3;">theform</span><span style="background-color:#222;">)</span></span><span style="background-color:#222;">{</span></span> <span style="background-color:#222;"> <span style="color:#E28964;">if</span><span style="background-color:#222;">(</span>theform<span style="background-color:#222;">.</span>password<span style="background-color:#222;">.</span><span style="color:#CF6A4C;">value</span><span style="color:#E28964;">!</span><span style="color:#E28964;">=</span>theform<span style="background-color:#222;">.</span>repassword<span style="background-color:#222;">.</span><span style="color:#CF6A4C;">value</span><span style="background-color:#222;">)</span><span style="background-color:#222;">{</span></span> <span style="background-color:#222;"> <span style="color:#DAD085;">alert</span><span style="background-color:#222;">(</span><span style="color:#65B042;"><span style="color:#65B042;">'</span>The two passwords are not equel<span style="color:#65B042;">'</span></span><span style="background-color:#222;">)</span><span style="background-color:#222;">;</span></span> <span style="background-color:#222;"> <span style="color:#E28964;">return</span> <span style="color:#3387CC;">false</span><span style="background-color:#222;">;</span></span> <span style="background-color:#222;"> <span style="background-color:#222;">}</span></span> <span style="background-color:#222;"> <span style="color:#E28964;">return</span> <span style="color:#3387CC;">true</span><span style="background-color:#222;">;</span></span> <span style="background-color:#222;"><span style="background-color:#222;">}</span></span> <span style="background-color:#222;"></span> <span style="background-color:#222;"><span style="background-color:#222;"><span style="color:#99CF50;">function</span> <span style="color:#89BDFF;">init</span><span style="background-color:#222;">(</span><span style="background-color:#222;">)</span></span><span style="background-color:#222;">{</span></span> <span style="background-color:#222;"> <span style="color:#AEAEAE;font-style:italic;"><span style="color:#AEAEAE;font-style:italic;">//</span>we atach the comparePasswords to the validateForm</span></span> <span style="background-color:#222;"> <span style="color:#9B859D;">document</span><span style="background-color:#222;">.</span><span style="color:#CF6A4C;">forms</span><span style="background-color:#222;">.</span>registro<span style="background-color:#222;">.</span>onsubmit<span style="color:#E28964;">=</span>validateForm<span style="background-color:#222;">(</span>comparePasswords<span style="background-color:#222;">)</span><span style="background-color:#222;">;</span></span> <span style="background-color:#222;"><span style="background-color:#222;">}</span></span> <span style="background-color:#222;"><span style="color:#9B859D;">window</span><span style="background-color:#222;">.</span>onload<span style="color:#E28964;">=</span>init<span style="background-color:#222;">;</span></span> <span style="background-color:#222;"><span style="background-color:#222;"></</span><span style="color:#E0C589;">script</span><span style="background-color:#222;">></span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;"><</span><span style="color:#89BDFF;">body</span><span style="color:#89BDFF;">></span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;"><</span><span style="color:#89BDFF;">form</span> <span style="color:#89BDFF;">name</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>registro<span style="color:#65B042;">"</span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;">id</span><span style="color:#89BDFF;">=</span><span style="color:#65B042;"><span style="color:#65B042;">"</span><span style="color:#65B042;">registro</span><span style="color:#65B042;">"</span></span></span> <span style="color:#89BDFF;">action</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>procesa_login.html<span style="color:#65B042;">"</span></span> <span style="color:#89BDFF;">method</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>post<span style="color:#65B042;">"</span></span><span style="color:#89BDFF;">></span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;"><</span><span style="color:#89BDFF;">fieldset</span><span style="color:#89BDFF;">></span></span> <span style="color:#E0C589;"><span style="color:#E0C589;"><</span><span style="color:#E0C589;">legend</span><span style="color:#E0C589;">></span></span>Login<span style="color:#E0C589;"><span style="color:#E0C589;"></</span><span style="color:#E0C589;">legend</span><span style="color:#E0C589;">></span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;"><</span><span style="color:#89BDFF;">p</span><span style="color:#89BDFF;">></span></span>Username:<span style="color:#89BDFF;"><span style="color:#89BDFF;"></</span><span style="color:#89BDFF;">p</span><span style="color:#89BDFF;">></span></span> <span style="color:#E0C589;"><span style="color:#E0C589;"><</span><span style="color:#E0C589;">input</span> <span style="color:#E0C589;">type</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>text<span style="color:#65B042;">"</span></span> <span style="color:#E0C589;">name</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>usuario<span style="color:#65B042;">"</span></span> <span style="color:#E0C589;">alt</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>^[a-z0-9_-]<span style="color:#DAEFA3;">{4,12}</span>$::Specifie a username between 4 and 12 alfanumeric character. No whit space allowed<span style="color:#65B042;">"</span></span> /<span style="color:#E0C589;">></span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;"><</span><span style="color:#89BDFF;">p</span><span style="color:#89BDFF;">></span></span>Password:<span style="color:#89BDFF;"><span style="color:#89BDFF;"></</span><span style="color:#89BDFF;">p</span><span style="color:#89BDFF;">></span></span> <span style="color:#E0C589;"><span style="color:#E0C589;"><</span><span style="color:#E0C589;">input</span> <span style="color:#E0C589;">type</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>password<span style="color:#65B042;">"</span></span> <span style="color:#E0C589;">name</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>password<span style="color:#65B042;">"</span></span> <span style="color:#E0C589;">alt</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>^.<span style="color:#DAEFA3;">{4,12}</span>$::Introduce a password between 4 and 12 characters<span style="color:#65B042;">"</span></span> /<span style="color:#E0C589;">></span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;"><</span><span style="color:#89BDFF;">p</span><span style="color:#89BDFF;">></span></span>Reenter Password:<span style="color:#89BDFF;"><span style="color:#89BDFF;"></</span><span style="color:#89BDFF;">p</span><span style="color:#89BDFF;">></span></span> <span style="color:#E0C589;"><span style="color:#E0C589;"><</span><span style="color:#E0C589;">input</span> <span style="color:#E0C589;">type</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>password<span style="color:#65B042;">"</span></span> <span style="color:#E0C589;">name</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>repassword<span style="color:#65B042;">"</span></span> /<span style="color:#E0C589;">></span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;"></</span><span style="color:#89BDFF;">fieldset</span><span style="color:#89BDFF;">></span></span> <span style="color:#E0C589;"><span style="color:#E0C589;"><</span><span style="color:#E0C589;">input</span> <span style="color:#E0C589;">type</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>submit<span style="color:#65B042;">"</span></span> <span style="color:#E0C589;">name</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>submit<span style="color:#65B042;">"</span></span> <span style="color:#E0C589;">value</span>=<span style="color:#65B042;"><span style="color:#65B042;">"</span>Enviar<span style="color:#65B042;">"</span></span> /<span style="color:#E0C589;">></span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;"></</span><span style="color:#89BDFF;">form</span><span style="color:#89BDFF;">></span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;"></</span><span style="color:#89BDFF;">body</span><span style="color:#89BDFF;">></span></span> <span style="color:#89BDFF;"><span style="color:#89BDFF;"></</span><span style="color:#89BDFF;">html</span><span style="color:#89BDFF;">></span></span> </pre> </div> </div> <a href="http://refactormycode.com/codes/149-simple-form-validator-with-regex" style="color:#fff" title="As seen on RefactorMyCode.com"><img alt="Small_logo" src="http://refactormycode.com/images/small_logo.gif" style="border:0" /></a>