You may notice for some types like e-mail,
there's some basic validation. But, it doesn't really understand.
If you want to do better client side validation though,
HTML-5 supports that too. There's also a pattern attribute on
the input element, that you can use to validate on
the client side. The pattern element takes a regular expression,
as expressed by the java script regex syntax. Regex is
a topic in itself. So, if you're not familiar with
it, you'll have to look it up. For example, let's
presume I want to only allow U.S. numbers with area
code prefixes. So, an 11 digit number. I can put in a regular expression for
this, and now when I try to input a telephone number and then submit, it
pops up an error message that says I have to match the requested format. That
error message, by the way, is the element's
title, so you can customize it too. And
now, I get my custom error message. Normally
of course, I'm not going to want such a
simplistic pattern. I'll probably going to want something more,
like this string which says, I want a 3
digit number possibly preceded by brackets, and then optionally
a space or a period or a dash, and
then another 3 digits, and then the same space
or period or dash, and then another 4 digits.
Now, this gives some options, for how I enter telephone
numbers, but I can just say, and it'll accept that.
Se dará cuenta que para ciertos tipos
como para el e-mail
hay una validación básica.
Pero no se entiende bien.
Sin embargo, si quiere hacer una mejor
validación del lado del cliente,
HTML5 también lo respalda.
También hay un atributo de patrón
en el elemento de entrada, que puede
utilizar para validar del lado del cliente.
El patrón toma una expresión regular,
como queda expresado por la sintaxis
del java script regex.
Regex es un tema en si mismo. Así que
si no le es familiar, deberá buscarlo.
Por ejemplo, imaginemos que
solo quiero permitir
números de EEUU con sus
respectivos prefijos.
Así, un número de 11 dígitos, puedo
añadirlo en una expresión regular,
así cuando intento añadir
un teléfono y lo envío,
me salta un mensaje de error que dice
que debo adaptarlo en el formato requerido.
Este mensaje de error,
es un elemento de título,
así que también puede personalizarlo.
Y ahora me sale el mensaje de
error personalizado.
Normalmente, no voy a querer
un patrón tan simple.
Querré algo más, como esta cadena
que dice que quiero un número de 3 dígitos
posiblemente precedido de
corchetes y después
opcionalmente un espacio,
un punto o un guión
y otros 3 números,
y después el mismo espacio,
punto o guión, y después otros 4 números.
Ahora, me da algunas opciones cuando
incluyo números de teléfono,
pero puedo simplemente decirlo
y lo aceptará.
メールアドレスの入力などには
基本的な検証方法があります
ただしあまり理解されません
HTML5はクライアント側での検証を
サポートしてくれます
input要素にはpattern属性もあり
クライアント側での検証に活用できます
pattern要素はJavaScript
regex、シンタックスで書かれた
正規表現を受け入れます
正規表現については
各自でしっかり把握しておきましょう
例えば市外局番を含めた
米国の電話番号だけを許可したい場合
番号は11桁になります
ここに正規表現で11と入れます
電話番号を入力すると
要求されたフォーマットと一致していないという
エラーメッセージが出ます
エラーメッセージは要素の
タイトルなので変えることができます
エラーメッセージをカスタマイズしました
一般的にはこの設定ではシンプルすぎます
いろいろ加えてこのようにするでしょう
3桁の番号でカッコがつく可能性があり
次にスペース、ピリオド、ダッシュが任意で入り
さらに3桁の数字の後
同じようにスペース、ピリオド、ダッシュが入り
その後にさらに4桁の数字
こうすると入力の仕方にオプションを与えることができ
このように電話番号を入れると認められます
Você deve ter notado que
para alguns tipos como email,
há uma validação básica.
Porém, não funciona muito bem.
Entretanto, se quiser conseguir
uma melhor validação do lado do cliente,
o HTML-5 suporta também.
Há também um atributo padrão no
elemento de entrada
que pode ser usado para validar
no lado do cliente. O elemento padrão
leva uma expressão comum (regex),
como expresso pela sintaxe
regex javascript. A regex é
um tópico em si.
Se não a conhece,
dê uma olhada. Por exemplo, vamos
supor que eu permita apenas
os telefones dos EUA com prefixo
de código de área. Ao digitar o número 11,
posso colocar uma expressão regular,
ao tentar colocar um telefone e enviar,
aparece uma mensagem de erro que diz
que o formato requerido deve coincidir.
Esta mensagem de erro é o elemento
"title", que pode ser personalizado também.
Agora, tenho minha
mensagem de erro personalizada.
É claro que não vou querer um padrão
simplista. Provavelmente,
queira algo a mais,
como este "string" que diz,
quero um dígito 3
talvez precedido por colchetes e
opcionalmente
um espaço, ou um ponto ou um hífen, e
mais 3 dígitos, e espaço,
ponto ou hífen e mais 4 dígitos.
Agora existem algumas opções
de como entrar com
o telefone, mas posso apenas dizer
e ele aceitará.