Observação:

Os widgets do Spry foram substituídos pelos widgets do jQuery no Dreamweaver CC e posterior. Embora ainda possa modificar os widgets do Spry existentes na página, você não pode adicionar novos.

Sobre o widget Senha de validação

O widget Senha de validação do Spry é um campo de texto de senha que pode ser usado para forçar regras de senha (por exemplo, número e tipo de caracteres). O widget fornece mensagens de aviso ou de erro com base na entrada do usuário.

Observação:

Familiarize-se com os widgets de validação do Spry antes de trabalhar com o widget Senha. Se você não estiver familiarizado com eles, consulte Trabalho com o widget Campo de texto de validação do Spry ou qualquer uma das outras visões gerais do widget de validação antes de continuar. Esta visão geral não apresenta todos os conceitos básicos do widget de validação.

Este exemplo mostra um widget Senha de validação em vários estados:

Um widget Senha de validação em vários estados
Um widget Senha de validação em vários estados

A. Widget Senha, estado do número mínimo de caracteres B. Widget Senha, estado do número máximo de caracteres C. Widget Senha, estado obrigatório 

O widget Senha de validação inclui inúmeros estados (por exemplo, válido, obrigatório, número mínimo de caracteres e assim por diante). Você pode alterar as propriedades desses estados editando o arquivo CSS correspondente (SpryValidationPassword.css), de acordo com os resultados de validação desejados. Um widget Senha de validação pode validar em vários pontos; por exemplo, quando o visitante do site clica fora do campo de texto, digita ou tenta enviar o formulário.

Estado inicial

Quando a página é carregada no navegador ou quando o usuário redefine o formulário.

Estado de foco

Quando o usuário coloca o ponto de inserção no widget.

Estado válido

Quando o usuário insere informações corretamente e o formulário pode ser enviado.

Estado de força inválida

Quando o usuário insere um texto que não corresponde aos critérios de força do campo de texto de senha. Por exemplo, se você tiver especificado que a senha deve conter pelo menos duas letras maiúsculas e a senha inserida não tiver nenhuma ou tiver apenas uma letra maiúscula.

Estado obrigatório

Quando o usuário não insere texto obrigatório no campo de texto.

Estado Número mínimo de caracteres

Quando o usuário insere um número de caracteres inferior ao obrigatório no campo de texto de senha.

Estado Número máximo de caracteres

Quando o usuário insere um número de caracteres superior ao permitido no campo de texto de senha.

Para obter uma explicação abrangente sobre como os widgets Senha de validação funcionam, bem como informações adicionais sobre a estrutura do widget, consulte www.adobe.com/go/learn_dw_sprypassword_br.

Inserir e editar o widget Senha de validação

Inserir o widget Senha de validação

  1. Selecione Inserir > Spry > Senha de validação do Spry.
  2. Preencha a caixa de diálogo Atributos de acesso a tag input e clique em OK.

Observação:

Para inserir um widget Senha de validação, você também pode usar a categoria Spry no painel Inserir.

Alterar o status obrigatório de um widget Senha de validação

Por padrão, todos os widgets Senha de validação inseridos com o Dreamweaver requerem entrada do usuário quando publicados em uma página da Web. Contudo, você determinar que o preenchimento dos campos de texto de senha pelo usuário seja opcional.

  1. Selecione um widget Senha de validação na janela Documento, clicando em sua aba azul.
  2. No Inspetor de propriedades (Janela > Propriedades), marque ou desmarque a opção Obrigatório de acordo com a sua preferência.

Exibir estados do widget na Visualização de design

  1. Selecione um widget Senha de validação na janela Documento, clicando em sua aba azul.
  2. No Inspetor de propriedades (Janela > Propriedades), selecione o estado que você deseja ver no menu pop-up Estados de visualização. Por exemplo, se você quiser ver o widget em seu estado válido, selecione Válido.

Especificar quando a validação ocorre

Você pode definir o ponto em que ocorre a validação: quando o visitante do site clica fora do widget, enquanto ele digita ou quando ele tenta enviar o formulário.

  1. Selecione um widget Senha de validação na janela Documento, clicando em sua aba azul.
  2. No Inspetor de propriedades (Janela > Propriedades), selecione a opção que indica quando a validação deve ocorrer. Você pode selecionar todas as opções ou somente Enviar.

    Desfocar

    Valida sempre que o usuário clica fora do campo de texto de senha.

    Alterar

    Valida quando o usuário altera o texto do campo de texto de senha.

    Enviar

    Valida quando o usuário tenta enviar o formulário. A opção Enviar é selecionada por padrão e a seleção não pode ser cancelada.

Definir força da senha

A força da senha refere-se ao grau de correspondência entre as combinações de determinados caracteres e os requisitos de um campo de texto de senha. Por exemplo, se você tiver criado um formulário no qual os usuários selecionam uma senha, poderá forçá-los a incluir um determinado número de letras maiúsculas na senha, um determinado número de caracteres especiais e assim por diante.

Observação:

Por padrão, nenhuma das opções disponíveis é definida para o widget Senha.

  1. Clique na aba azul do widget Senha de validação para selecioná-lo.

  2. Defina opções no Inspetor de propriedades (Janela > Propriedades), conforme desejar. Os números inseridos nos campos de opção são os números obrigatórios para a validação do widget. Por exemplo, se você inserir 8 na caixa Mínimo de caracteres, o widget não será validado, a não ser que o usuário insira pelo menos oito caracteres no campo de texto de senha.

Mínimo/Máximo de caracteres

Especifica o número mínimo e máximo de caracteres obrigatórios para que a senha seja válida.

Mínimo/Máximo de letras

Especifica o número mínimo e máximo de letras (a, b, c e assim por diante) obrigatórias para que a senha seja válida.

Mínimo/Máximo de números

Especifica o número mínimo e máximo de números (1, 2, 3 e assim por diante) obrigatórios para que a senha seja válida.

Mínimo/Máximo de letras maiúsculas

Especifica o número mínimo e máximo de letras maiúsculas (A, B, C e assim por diante) obrigatórias para que a senha seja válida.

Mínimo/Máximo de caracteres especiais

Especifica o número mínimo e máximo de caracteres especiais (!, @, # e assim por diante) obrigatórios para que a senha seja válida.

Deixar qualquer uma das opções acima em branco faz com que o widget não seja validado em relação ao critério em questão. Por exemplo, se você deixar a opção Mínimo/máximo de números em branco, o widget não procurará números na string da senha.

Personalizar o widget Senha de validação

Embora o Inspetor de propriedades permita que você faça edições simples em um widget Senha de validação, ele não aceita tarefas de estilização personalizadas. Você pode alterar o CSS do widget Senha de validação para criar um widget que tenha o estilo de sua preferência. Para obter uma lista mais avançada de tarefas de estilização, consulte www.adobe.com/go/learn_dw_sprypassword_custom_br.

Todas as regras de CSS nos tópicos a seguir se referem às regras padrão localizadas no arquivo SpryValidationPassword.css. O Dreamweaver salva o arquivo SpryValidationPassword.css na pasta SpryAssets do seu site sempre que você cria um widget Senha de validação do Spry. A consulta a este arquivo pode ser útil, pois ele contém informações comentadas sobre vários estilos que se aplicam ao widget.

Observação:

Embora você possa facilmente editar regras para o widget Senha de validação diretamente no arquivo CSS relacionado, você também pode usar o painel Estilos CSS para editar o CSS do widget. Esse painel é útil para localizar as classes de CSS atribuídas a diversos trechos do widget, especialmente se você usar o modo Atual do painel.

Estilo do widget Senha de validação (instruções gerais)

  1. Abra o arquivo SpryValidationPassword.css.

  2. Localize a regra CSS para a parte do widget a ser alterada. Por exemplo, para alterar a cor de fundo do estado obrigatório do widget Senha, edite a regra input.passwordRequiredState no arquivo SpryValidationPassword.css.

  3. Faça alterações no CSS e salve o arquivo.

O arquivo SpryValidationPassword.css contém comentários extensos, a explicação do código e a finalidade de determinadas regras. Para obter mais informações, consulte os comentários no arquivo.

Estilo do texto das mensagens de erro do widget Senha de validação

Por padrão, as mensagens de erro do widget Senha de validação aparecem em vermelho com uma borda sólida de 1 pixel em torno do texto.

  1. Para alterar o estilo do texto de um widget Senha de validação, use a seguinte tabela para localizar a regra de CSS apropriada e, em seguida, alterar as propriedades padrão ou adicionar suas propriedades e valores de estilo de texto.

    Texto a ser alterado

    Regra de CSS relevante

    Propriedades relevantes a alterar

    Texto da mensagem de erro

    .passwordRequiredState .passwordRequiredMsg, .passwordMinCharsState .passwordMinCharsMsg, .passwordMaxCharsState .passwordMaxCharsMsg, .passwordInvalidStrengthState .passwordInvalidStrengthMsg, .passwordCustomState .passwordCustomMsg

    color: #CC3333; border: 1px solid #CC3333;

Alterar as cores de fundo do widget Senha de validação

  1. Para alterar as cores de fundo do widget Senha de validação em vários estados, use esta tabela para localizar a regra de CSS apropriada e alterar os valores da cor de fundo padrão.

    Cor a alterar

    Regra de CSS relevante

    Propriedade relevante a alterar

    Cor de fundo do widget em estado válido

    .passwordValidState input, input.passwordValidState

    background-color: #B8F5B1;

    Cor de fundo do widget em estado inválido

    input.passwordRequiredState, .passwordRequiredState input, input.passwordInvalidStrengthState, .passwordInvalidStrengthState input, input.passwordMinCharsState, .passwordMinCharsState input, input.passwordCustomState, .passwordCustomState input, input.passwordMaxCharsState, .passwordMaxCharsState input

    background-color: #FF9F9F;

    Cor de fundo quando o widget está em foco

    .passwordFocusState input, input.passwordFocusState

    background-color: #FFFFCC;

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online