Os formulários são a maior parte do documento HTML para coletar dados e informações do usuário. Para obter informações corretas no formulário dos usuários, é necessário restringir os usuários de inserir informações inválidas. Os desenvolvedores são obrigados a adicionar algumas verificações de validação nos documentos HTML. Para esse fim, o usuário pode adicionar validação em diferentes objetos do formulário, como a validação do número de telefone através do “padrão”Atributo.

Esta postagem explicará como aplicar a validação do número de telefone HTML5 com o padrão.

Como aplicar a validação do número de telefone HTML5 com padrão?

Para adicionar validação do número de telefone com um padrão, siga as instruções fornecidas.

Etapa 1: Crie um contêiner "div"

Inicialmente, faça um contêiner "div" utilizando o "”Elemento e atribuir o“eu ia”Atributo.

Etapa 2: Adicionar títulos

Em seguida, adicione dois títulos usando o “

" e "

" Tag. O "

”A tag é usada para incorporar o título do nível um e“

”Especifica o título do nível dois.

Etapa 3: Crie formulário

Em seguida, crie um formulário usando o “”Tag junto com os seguintes elementos:

• Insira um “”Tag junto com a“para”Atributo para rotular o elemento. O atributo "for" relaciona o elemento específico com o rótulo.
• ““”O elemento é adicionado após o“”Tag, que se refere a um campo de entrada para inserir dados.
• O elemento "" é fornecido com atributos "Tipo" e "Pattern".
• O "tipo”O atributo determina o tipo específico de entrada definida. Utilize o “Tel”Valor para obter o número de telefone do usuário.
• O "padrão”Define o formato dos tipos de entrada declarados, incluindo email, data, texto, pesquisa, URL, tel e senha.
• Crie um botão usando "Type" como "botão"E" valor "como"Digitar”:

Linuxhint Ltd UK

Validação do número de telefone HTML5 com padrão

Formato do número de telefone: xxx-xxx-xxxx


Número de telefone:

Saída

Etapa 4: Elemento de estilo “div”

Para estilizar o “div”Elemento, primeiro acesse o elemento por id“#validação”E aplique as seguintes propriedades:

#validação
Alinhamento de texto: centro;
estilo de fronteira: cume;
margem: 50px;
cor de borda: RGB (85, 85, 245);
cor de fundo: RGB (243, 242, 160);

Aqui:

• ““alinhamento de texto”A propriedade é definida como“Centro”Para alinhar o texto no centro.
• ““estilo de borda”É usado para determinar o estilo de fronteira. Por exemplo, aplicamos o “cume" estilo de borda.
• ““margem”Aloca o espaço na parte externa do elemento.
• ““Cor da borda”Utilizado para especificar o limite colorido ao redor do elemento definido.
• ““cor de fundo”Especifica a cor de fundo do recipiente.

Saída

Demonstramos como aplicar a validação do número de telefone HTML5 com o padrão.

Conclusão

Para aplicar o padrão de validação do número de telefone HTML5, primeiro, crie um formulário utilizando o “”Tag e adicione“”Isso rotula o campo de entrada. Depois disso, adicione o “”Elemento junto com o“tipo" como "TelAtributos "e" Pattern ". O "padrão”O atributo especifica o padrão para a validação do número de telefone. Este post demonstrou o procedimento para adicionar a validação do número de telefone HTML5 com o padrão.