{"id":268,"date":"2015-12-29T22:11:30","date_gmt":"2015-12-30T01:11:30","guid":{"rendered":"https:\/\/arielnavarrete.wordpress.com\/?p=268"},"modified":"2017-06-15T01:42:48","modified_gmt":"2017-06-15T05:42:48","slug":"inputmask-jquery","status":"publish","type":"post","link":"https:\/\/arielnavarrete.cl\/blog\/2015\/12\/29\/inputmask-jquery\/","title":{"rendered":"Inputmask JQuery"},"content":{"rendered":"<p>Antes que todo, les deseo un muy feliz a\u00f1o nuevo, que obviamente sea mucho, pero mucho mejor que el que nos esta dejando,\u00a0 y sobre todo lo puedan pasar junto a sus seres queridos.<\/p>\n<p>Y bueno, volviendo a los que nos reune, sin lugar a dudas una cosa que nos ha tocado hacer es validar un rut, si bien existen varios Javascript que nos ayudan en esta tarea, en algunas ocaciones solo necesitamos validar la sintaxis, es decir, que tenga numeros y la letra K, o tambien podemos necesitar validar que no ingresen caracteres extra\u00f1os en nuestros input o textarea.<\/p>\n<p><!--more Seguir leyendo...--><\/p>\n<p>Una manera muy facil de hacerlo es con los <strong>inputmask<\/strong> de JQuery, no es mas que un tag que ocupa expresiones regulares, las cuales hacen que las cosas sean mucho mas simples con una sola linea, por ejemplo, si queremos validar la sintaxis de un Rut seria:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">$(&quot;#rut&quot;).inputmask('Regex', {regex: &quot;&#x5B;0-9-.Kk]{10}&quot;});<\/pre>\n<p>Donde lo mas relevante es:<\/p>\n<p><strong>[0-9-.Kk]<\/strong>\u00a0 Expresion regular que solo permite numeros, un guion y la letra K<\/p>\n<p><strong>{10}\u00a0\u00a0<\/strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Indica el largo maximo que desea permitir, en este caso 10 caracteres<\/p>\n<p>Ahora si necesitamos validar un input de escritura simple, podria ser:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">$(&quot;#txt&quot;).inputmask('Regex', {regex: &quot;&#x5B;a-zA-Z\u00f1\u00d1\u00e1-\u00fa\u00c1-\u00da\u00e4-\u00fc\u00c4-\u00dc '-]{10}&quot;});<\/pre>\n<p>Pero claro ! nos ha faltado ingresar numeros, pues no hay problema, los agregamos<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">$(&quot;#txt&quot;).inputmask('Regex', {regex: &quot;&#x5B;a-zA-Z\u00f1\u00d1\u00e1-\u00fa\u00c1-\u00da\u00e4-\u00fc\u00c4-\u00dc0-9 '-]{10}&quot;});<\/pre>\n<p>Mmmmm&#8230; \u00bfsigue sin convencer? pues claro, si era una escritura simple, algo un poco mas complejo podria ser este:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">$(&quot;#txt&quot;).inputmask('Regex', {regex: &quot;&#x5B;a-zA-Z\u00f1\u00d1\u00e1-\u00fa\u00c1-\u00da\u00e4-\u00fc\u00c4-\u00dc0-9 .,;-\\_\u00bf?\u00a1!()&lt;&gt;$%\\&quot;#\/]{10}&quot;});<\/pre>\n<p>Si te fijas en los primeros permitiamos ingresar una cremilla o comilla simple <strong>(&#8216;)<\/strong> y en nuestro ultimo solo la comilla doble <strong>(\u00ab)<\/strong> esto es porque no deberiamos permitir ingresar <strong>&#8216;<\/strong> junto con <strong>%<\/strong>, ya que con este simple junte nos pueden intentar inyectar codigo, ahora si tu aplicacion ya la validaste para eso, pues agregalo, que no pasa nada \ud83d\ude00<\/p>\n<p>Eso seria todo, simple y rapido, claramente puedes ocupar las expresiones regulares que desees eso lo dejo a tu imaginacion \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Antes que todo, les deseo un muy feliz a\u00f1o nuevo, que obviamente sea mucho, pero mucho mejor que el que nos esta dejando,\u00a0 y sobre todo lo puedan pasar junto a sus seres queridos. Y bueno, volviendo a los que nos reune, sin lugar a dudas una cosa que nos ha tocado hacer es validar [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-268","post","type-post","status-publish","format-standard","hentry","category-jquery"],"_links":{"self":[{"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/posts\/268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/comments?post=268"}],"version-history":[{"count":6,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/posts\/268\/revisions"}],"predecessor-version":[{"id":279,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/posts\/268\/revisions\/279"}],"wp:attachment":[{"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/media?parent=268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/categories?post=268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/tags?post=268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}