Definir validação de comprimento em HTML

1. Use o atributo pattern para definir a validação de comprimento em HTML
2. Use o atributo minlength para definir a validação de comprimento mínimo em HTML

O artigo apresentará dois métodos para definir a validação de comprimento em formulários HTML. Além disso, discutiremos a validação de comprimento mínimo e máximo.

Use o atributo pattern para definir a validação de comprimento em HTML

O atributo pattern define uma expressão regular na tag input em HTML. Ele verificará o valor de entrada no formulário e realizará a validação.

Podemos especificar a expressão regular como o valor do atributo pattern. Podemos usar o atributo pattern com os tipos de entrada, como texto, e-mail, senha, tel, URL, data e pesquisa.

Também podemos usar o atributo title na tag input para entender a regra de validação. Podemos especificar o padrão regex para o comprimento mínimo e máximo.

Por exemplo, crie um formulário e escreva uma tag input com a senha type dentro dele.

Em seguida, use o atributo pattern para escrever o padrão regex .{8,}. Em seguida, escreva o texto mínimo de oito caracteres necessários no atributo title.

Finalmente, escreva o atributo required na tag e crie um botão de envio.

Aqui, criamos uma regex em que o comprimento mínimo da entrada é oito. Quando tentamos enviar o formulário com menos de oito caracteres, o formulário não será enviado.

A mensagem no atributo title será exibida em tal condição. O . no regex denota quaisquer caracteres, exceto a nova linha. Podemos adicionar outro número após a vírgula para definir o comprimento máximo.

O atributo required evitará que o formulário seja enviado quando nenhum valor for fornecido. Assim, podemos definir a validação de comprimento em HTML usando o atributo pattern.

Código de exemplo:

<form action="#">
    Password<input type="password" pattern=".{8,}" title="minimum eight characters needed" required>
    <input type="submit">
</form>

Use o atributo minlength para definir a validação de comprimento mínimo em HTML

HTML fornece um atributo chamado minlength para definir a validação de comprimento mínimo no campo input. Ele funciona em todos os tipos de entrada, assim como o atributo pattern.

Por exemplo, crie um formulário e, em seguida, um campo de entrada para uma senha. Em seguida, escreva o atributo minlength na tag input, defina o valor do atributo como 8 e, por fim, crie um botão de envio.

Aqui, a validação do comprimento funciona da mesma forma que no primeiro método. Quando inserimos um valor de menos de oito caracteres, o formulário não será enviado.

Também podemos usar a propriedade maxlength para definir o comprimento máximo. Assim, podemos usar o atributo minlength para definir a validação de comprimento mínimo em HTML.

Código de exemplo:

<form action="#">
    Password
    <input type="password" minlength="8">
    <input type="submit">
</form>