Para detalhes

Antes da profunda discussão da verificação do formulário, vamos pensar no verdadeiro significado da verificação da forma do formulário. No que diz respeito ao seu núcleo, a verificação do formulário é um sistema que detecta dados de controle inválido para usuários finais e marcam esses erros. Em outras palavras, a verificação do formulário é realizar uma série de inspeções antes de enviar o servidor e notificar os usuários para corrigir seus erros.

Mas qual é a verificação da forma real?

É uma otimização.

A razão pela qual a verificação do formulário é uma otimização é porque não é suficiente para garantir que os dados do formulário enviados ao servidor somente através do mecanismo de verificação do formulário seja correto e eficaz. Por outro lado, a verificação do formulário de design é fazer com que os aplicativos da Web lançem um erro mais rápido. Em outras palavras, é melhor usar o mecanismo de processamento construído do navegador para informar a página da web do usuário contendo um valor de controle de formulário inválido. No passado, os dados mudaram na Internet apenas para permitir que o servidor notifique o usuário de que ele havia inserido os dados errados. Se o navegador for completamente capaz de ser capturado antes de deixar o cliente, devemos usar essa vantagem.

No entanto, a verificação do formulário do navegador não é suficiente para lidar com todos os erros.

Dito isto, o HTML5 ainda apresenta oito métodos para verificar a correção dos dados do controle do formulário. Vamos dar uma olhada nele em ordem, mas vamos apresentar o objeto Ualuestate para obter feedback para verificar o status.

Em um navegador que suporta a verificação do formulário HTML5, você pode acessar o objeto ValityState através do controle do formulário:

 var value = document.myform.myinput.validity;

Essa linha de código obteve um objeto ValityState chamado MyInput. O objeto contém a referência a todos os oito status de verificação e os resultados finais da verificação.

O método de chamada é o seguinte:

 Valcheck.valid

Após a execução, obteremos um valor booleano que indica se o controle de formulário passou por todas as restrições de verificação. Você pode tratar as características do valor como o resultado da verificação final: se todas as oito restrições forem aprovadas, as características do valor serão verdadeiras, caso contrário, desde que haja uma restrição que falhar, o logotipo do valor é todo S.

Como mencionado anteriormente, existem oito possíveis restrições de verificação em qualquer elemento de forma. Cada condição possui um nome característico correspondente no objeto ValityState, que pode ser acessado de maneira apropriada. Vamos analisar um a um para ver como eles estão associados ao controle de formulários e como verificá -los com base no objeto ValityState:

Objetivo: Verifique se o valor no controle do formulário foi preenchido.

Uso: no controle do formulário, defina os recursos necessários como verdadeiros.

Exemplo:

 <Tipo de entrada = Nome do texto = MyText necessário>

Instruções detalhadas: se o controle do formulário definir o recurso necessário, o controle sempre será inválido antes que o usuário preencha ou preencha o valor pela chamada de código. Por exemplo, a caixa de entrada de texto vazia não pode passar a verificação necessária, a menos que digite qualquer texto nela. Quando o valor de entrada está vazio, o Valuemissing retorna true.

Objetivo: garantir a correspondência dos valores de controle e os tipos esperados (como Numbe, email, URL etc.).

Uso: especifique o valor característico do tipo do controle do formulário.

Exemplo:

 <Tipo de entrada = Nome do email = MyEmail>

Instruções detalhadas: O tipo de controle de formulário especial não é usado apenas para personalizar o teclado do telefone celular. O símbolo no endereço de email, ou o valor de entrada do controle do tipo numérico não é números eficazes, o navegador marcará esse controle para indicar que o tipo não é correspondido. Não importa quais erros, o TypeMismatch retornará ao TRUE.

Objetivo: Verifique se a entrada é válida de acordo com as regras de formato definidas no controle do formulário.

Uso: defina os recursos do padrão no controle do formulário e o poço fornece regras correspondentes apropriadas.

Exemplo:

 <Tipo de entrada = Nome do texto = CreditCardNumber Pattern = [0-9] {16} Target = '_lank'> Mecanismo de verificação de expressão regular. Quando os recursos do padrão são definidos como o controle, desde que o valor do controle de entrada não atenda às regras do modo, o PatternMismatch retornará o valor verdadeiro. A partir de dois aspectos do orientador de usuários e referências técnicas, você deve definir as características do título no controle do formulário que contém as características do padrão para explicar as regras.
 4. Toolong
 Objetivo: Evite o valor de entrada que contém muitos caracteres.
 Uso: defina as características do comprimento máximo no controle do formulário.
 Exemplo:
 <Tipo de entrada = Nome do texto = LimitedDText maxLength = 140>
 Descrição detalhada: se o comprimento do valor de entrada exceder o maxLength, o recurso Toolong retornará true. Embora o controle do formulário seja geralmente limitado ao comprimento máximo quando o usuário é inserido, em alguns casos, como as configurações do programa, ele ainda excederá o valor máximo.
 5. RangeUnderflow
 Objetivo: limite o valor mínimo do controle numérico.
 Uso: defina o recurso Min para o controle do formulário e forneça o valor mínimo permitido.
 Exemplo:
 <Tipo de entrada = Nome do intervalo = AGECHECK min = 18>
 Instruções detalhadas: No controle do formulário que precisa ser verificado, é provável que o valor seja temporariamente menor que o limite inferior das configurações. Neste momento, o recurso RangeUnderflow do ValityState retornará ao TRUE.
 6. FLIDREFLOW
 Objetivo: limite o valor máximo do controle numérico.
 Uso: defina as características máximas para o controle do formulário e forneça o valor máximo.
 Exemplo:
 <Tipo de entrada = Nome do intervalo = KidageCheck max = 12>
 Descrição detalhada: semelhante ao RangeUnderflow, se o valor de um controle de formulário for maior que o máximo, as características retornarão true.
 7. Misma de madrasta
 Objetivo: Verifique se o valor de entrada atende ao Min, Max e STEP.
 Uso: Defina as características da etapa para o controle do formulário, especifique o aumento do valor.
 Exemplo:
 <Tipo de entrada = Nome do intervalo = confidencelevel min = 0 max = 100 etapa = 5>
 Descrição detalhada: Essa restrição é usada para garantir que o valor atenda aos requisitos de Min, Max e etapa. Em outras palavras, o valor atual deve ser a soma do múltiplo do valor mínimo e do valor do recurso de etapa. Por exemplo, de 0 a 100, o valor do recurso de etapa é 5; neste momento, não haverá 17, caso contrário, a madrasta retornará o valor verdadeiro.
 8. CustomError
 Objetivo: Entrega O código do aplicativo define e calcule erros claramente.
 Uso: Call SetCustomvalidity (Mensagem) para colocar as peças de controle do formulário no estado do CustomError.
 Exemplo:
 PasswordConfirmativeField.SetCustomvalidity (os valores da senha não correspondem.);
 Instruções detalhadas: Quando o mecanismo de verificação do navegador não é aplicável, as informações de erro de verificação personalizadas precisam ser exibidas. Quando o valor de entrada não atende às regras semânticas, o código do aplicativo deve definir essas mensagens de verificação personalizadas.
 O caso típico de mensagem de verificação personalizada é verificar se os valores no controle de controle são consistentes. Por exemplo, senhas e senhas confirmam que os valores dos dois perdedores não são correspondentes. Enquanto a mensagem de verificação for personalizada, o controle estará em um estado inválido e o CustomError retornará true. Para remover o erro, basta chamar o setCustomVality () no controle.
 Bem, o acima são os 8 métodos básicos verificados apenas pela tabela no HTML5. Eu também espero que todos apoiem o vevb wulin.com.