O HTML5 usa a restrição para verificar a API para verificar a instância do código dos dados de entrada do formulário

O HTML5 possui uma ótima otimização de formas, seja semântica, componentes pequenos ou verificação de formato de dados. Eu acho que você definitivamente usará a compatibilidade do navegador como uma desculpa para usar esses novos recursos, mas essa nunca deve ser a razão pela qual você estagna. realizado. Quando você realmente tenta usar os novos recursos desses formulários, prometo que você se apaixona por ele. Se o único defeito é, o estilo da caixa imediata é o padrão pelo navegador, você não pode alterá -lo, ok, se você acredita que o nível estético do designer do fabricante do navegador (acredito que o nível de design deles é maior do que a maioria Pessoas comuns do que a maioria das pessoas comuns, boas, se você não considera a compatibilidade do estilo), apenas se apresse e a escola!

HTML5 fornece muito suporte nativo para verificação de formato de dados, como ::

 <Tipo de entrada = 'email'/>

Ao clicar no botão de envio, se o formato inserido não atender ao email, ele fará com que não possa enviar e o navegador solicitará que você faça uma mensagem de erro.

Por exemplo, em Chrome:

1. Somente quando você o enviar, você acionará a verificação do navegador

2. Diferentes informações rápidas do navegador são diferentes

3. Quando a entrada múltipla não atende aos requisitos, apenas um erro será solicitado.

Não pense que, quando o tipo de entrada é igual a Tel, se você inserir o formato do número de telefone, você será bloqueado pelo navegador e solicitará a mensagem de erro ao enviar. teclado digital e não desempenha um papel na verificação de dados.

Você pode usar o atributo padrão para definir a verificação do formato personalizado para o navegador sem fornecer formato de dados de verificação nativa. O valor do atributo padrão é uma expressão regular (string):

 <Tipo de entrada = 'Tel' Pattern = '[0-9] {11}' if (this.value.length> 3) {// A condição de julgamento é completamente personalizada de entrada. Input.setCustomVality ('')}});

Cada entrada do teclado, o código determinará se o formato está correto e, em seguida, chamará o setCustomvalididade para definir o valor do valuemessage. Não pense que todo navegador de chaves solicitará o resultado se o resultado está correto.

Se você não pensou nisso, definitivamente perguntará, desde então, por que você precisa vincular eventos de teclado para entrada e precisa julgar cada entrada? Envie o incidente diretamente para o formulário.

Como usuário, é claro, depois de saber que entrei no formato errado, a caixa de texto fica vermelha (ou há outras dicas). E toda vez que entro em um personagem, se estiver certo, a caixa de texto retornará ao normal. Podemos usar a classe Pseudo -CSS para implementar esta função:

 Entrada: requerido {Background-Color: #ffe14d;} /* Esta pseudo-classe é julgada através da propriedade Valuemessage* / entrada: inválido {borda: 2px Solid Red;}.

A categoria pseudo -necessária acima fornece uma cor de fundo amarela para a entrada obrigatória, mas vazia, enquanto a classe pseudo -inválida abaixo adicionará um lado vermelho de 2px a toda a entrada não ampliada. Podemos adicionar a classe de entrada à nossa caixa de entrada agora.

As condições de julgamento dessas categorias de pseudo estão julgando se você pode enviar o formulário do formulário. -Toal estilo.

Outra desvantagem é que, quando uma entrada é definida como necessária, quando a inicialização, porque está vazia, a categoria de pseudo inválida funcionará nele.

Podemos adicionar o dispositivo de seleção dos pais .InValid Antes dessas categorias pseudo -pseudo. Você pode definir um evento de envio.

Form.adDeventListener ('Inválida', function () {this.className = 'Inválida'}, true) porque o Invaild é um incidente, não o evento do formulário, por isso definimos o terceiro parâmetro para usar o TRUE para usar a captura de eventos. Dessa forma, foi feito.

Bem, é hora de resumir o conhecimento que aprendemos e criar as melhores práticas:

 <! {Border: 2px Solid Red;} </style> </head> <body> <form id = form> <brety> email: <tipo de entrada = email ID necessário = email> </label> <brety> Idcard: < Entrada ID necessária = IDCARD> </LABEL> <TIPO DE INTERNAGEM = ENVIAR ID = ENVIAR> </FORMULAR> <SCRIPT> VAR email = document.getElementById ('email'); ); } Else {this.setCustomVality ('')}});

A captura de tela após a corrida é a seguinte:

O acima é todo o conteúdo deste artigo.