Seleccione Insertar > Spry > Contraseña de validación de Spry.
Última actualización el
Nota:
Los widgets de Spry se han sustituido por widgets jQuery en Dreamweaver CC y versiones posteriores. Aunque todavía pueden modificarse los widgets de Spry existentes en la página, no se pueden agregar nuevos widgets de Spry.
Acerca del widget de contraseña de validación
El widget de contraseña de validación de Spry es un campo de texto de contraseña que puede utilizar para aplicar reglas de contraseña (por ejemplo, el número y tipo de caracteres). El widget proporciona mensajes de advertencia o error en función de lo que haya introducido el usuario.
Nota:
Deberá estar familiarizado con los widgets de validación de Spry para trabajar con el widget de contraseña. Si no está familiarizado con ellos, consulte Trabajo con el widget de campo de texto de validación de Spry o cualquiera de las otras descripciones de widgets de validación antes de continuar. En esta descripción no se exponen todos los conceptos básicos de los widgets de validación.
En el siguiente ejemplo se muestra un widget de contraseña de validación en varios estados:
A. Widget de contraseña, estado de número mínimo de caracteres B. Widget de contraseña, estado de número máximo de caracteres C. Widget de contraseña, estado obligatorio
El widget de contraseña de validación incluye una serie de estados (por ejemplo, válido, obligatorio, número mínimo de caracteres, etc.). Puede modificar las propiedades de estos estados editando el correspondiente archivo CSS (SpryValidationPassword.css), en función de los resultados de validación deseados. Un widget de contraseña de validación puede hacer validaciones en varios puntos; por ejemplo, cuando el visitante del sitio hace clic fuera del campo de texto, cuando escribe o cuando intenta enviar el formulario.
Estado inicial
Cuando la página se carga en el navegador o cuando el usuario reinicia el formulario.
Estado de foco
Cuando el usuario sitúa el punto de inserción en el widget.
Estado válido
Cuando el usuario introduce información correctamente y se puede enviar el formulario.
Estado de longitud no válida
Cuando el usuario introduce texto que no cumple los criterios de longitud para el campo de texto de contraseña. (Por ejemplo, si ha especificado que una contraseña deba contener al menos dos letras mayúsculas y la contraseña introducida no contiene ninguna letra mayúscula o solo una).
Estado obligatorio
Cuando el usuario no ha introducido texto obligatorio en el campo de texto.
Estado de número mínimo de caracteres
Cuando el usuario introduce un número de caracteres inferior al mínimo exigido para el campo de texto de contraseña.
Estado de número máximo de caracteres
Cuando el usuario introduce un número de caracteres superior al máximo permitido para el campo de texto de contraseña.
Para obtener una descripción completa del funcionamiento de los widgets de contraseña de validación, así como información adicional sobre la estructura del widget, consulte www.adobe.com/go/learn_dw_sprypassword_es.
Inserción y edición del widget de contraseña de validación
Inserción del widget de contraseña de validación
-
-
Complete el cuadro de diálogo Atributos de accesibilidad de la etiqueta de entrada y haga clic en Aceptar.
Nota:
También puede insertar un widget de contraseña de validación a través de la categoría Spry del panel Insertar.
Cambio del estado obligatorio de un widget de contraseña de validación
De forma predeterminada, todos los widgets de contraseña de validación que inserte con Dreamweaver requieren la introducción de texto por parte del usuario una vez publicados en la Web. Sin embargo, puede hacer opcional la obligación de introducir texto de contraseña en los campos por parte del usuario.
-
Seleccione un widget de contraseña de validación en la ventana de documento haciendo clic en su ficha azul.
-
En el inspector de propiedades (Ventana > Propiedades), active o desactive la opción Obligatorio, según desee.
Visualización de los estados de widget en la vista de Diseño
-
Seleccione un widget de contraseña de validación en la ventana de documento haciendo clic en su ficha azul.
-
En el inspector de propiedades (Ventana > Propiedades), seleccione el estado que desea ver en el menú emergente Estados de vista previa. Por ejemplo, si desea ver el widget en su estado válido, seleccione Válido.
Especificación del momento en que debe producirse la validación
Puede definir el punto en el que debe producirse la validación: cuando el visitante del sitio hace clic fuera del widget, mientras escribe o cuando intenta enviar el formulario.
-
Seleccione un widget de contraseña de validación en la ventana de documento haciendo clic en su ficha azul.
-
En el inspector de propiedades (Ventana > Propiedades), seleccione la opción que indica cuándo desea que se produzca la validación. Puede seleccionar todas las opciones o solo Enviar.
Desenfocar
Realiza la validación cuando el usuario hace clic fuera del campo de texto de contraseña.
Cambiar
Realiza la validación cuando el usuario cambia texto dentro del campo de texto de contraseña.
Enviar
Realiza la validación cuando el usuario intenta enviar el formulario. La opción de envío está seleccionada de forma predeterminada y no se puede anular.
Configuración de la longitud de contraseña
Longitud de contraseña hace referencia al grado de cumplimiento por parte de determinadas combinaciones de caracteres de los requisitos para un campo de texto de contraseña. Por ejemplo, si ha creado un formulario en el que los usuarios seleccionan una contraseña, puede que desee obligar a los usuarios a incluir un determinado número de letras mayúsculas en la contraseña, un determinado número de caracteres especiales, etc.
Nota:
De manera predeterminada, no se establece ninguna de las opciones disponibles para el widget de contraseña.
Haga clic en la ficha azul del widget de contraseña de validación para seleccionarla.
Establezca las opciones que desee en el inspector de propiedades (Ventana > Propiedades). Los números que introduzca en los campos de opciones serán los números exigidos en la validación del widget. Por ejemplo, si introduce 8 en el cuadro Mín. car., el widget no realizará la validación a no ser que el usuario haya introducido al menos ocho caracteres en el campo de texto de contraseña.
Mín./Máx. car.
Especifica el número mínimo y máximo de caracteres exigido para que la contraseña sea válida.
Mín./Máx. letras
Especifica el número mínimo y máximo de letras (a, b, c...) exigido para que la contraseña sea válida.
Mín./Máx. números
Especifica el número mínimo y máximo de números (1, 2, 3...) exigido para que la contraseña sea válida.
Mín./Máx. mayúsculas
Especifica el número mínimo y máximo de letras mayúsculas (A, B, C...) exigido para que la contraseña sea válida.
Mín./Máx. car. especiales
Especifica el número mínimo y máximo de caracteres especiales (!, @, #, etc.) exigido para que la contraseña sea válida.
Si alguna de las opciones anteriores se deja en blanco, el widget no puede validarse frente a ese criterio. Por ejemplo, si deja las opciones Mín./Máx. números en blanco, el widget no busca números en la cadena de contraseña.
Personalización del widget de contraseña de validación
Aunque el inspector de propiedades permite realizar cambios simples a un widget de contraseña de validación, no admite tareas de estilo personalizadas. Puede modificar las reglas CSS de un widget de contraseña de validación y crear un widget con el estilo que desee. Para ver una lista detallada de tareas de estilo, consulte www.adobe.com/go/learn_dw_sprypassword_custom_es.
Todas las reglas CSS de los siguientes temas se refieren a las reglas predeterminadas que se encuentran en el archivo SpryValidationPassword.css. Dreamweaver guarda el archivo SpryValidationPassword.css en la carpeta SpryAssets de su sitio cuando crea un widget de contraseña de validación de Spry. Resulta útil consultar este archivo porque contiene información comentada sobre los distintos tipos de estilos que se pueden aplicar al widget.
Nota:
Aunque es fácil editar las reglas para el widget de contraseña de validación directamente en el archivo CSS, también puede utilizar el panel Estilos CSS para editar el código CSS del widget. El panel Estilos CSS resulta útil para ubicar las clases CSS asignadas a partes distintas del widget, en especial si utiliza el modo Actual del panel.
Aplicación de estilo a un widget de contraseña de validación (instrucciones generales)
-
Abra el archivo SpryValidationPassword.css.
-
Localice la regla CSS correspondiente a la parte del widget que desea cambiar. Por ejemplo, para cambiar el color de fondo del estado obligatorio del widget de contraseña, edite la regla input.passwordRequiredState en el archivo SpryValidationPassword.css.
-
Realice los cambios deseados en el código CSS y guarde el archivo.
El archivo SpryValidationPassword.css contiene comentarios completos que explican el código y el objetivo de determinadas reglas. Para más información, consulte los comentarios en el archivo.
Aplicación de estilo al texto del mensaje de error del widget de contraseña de validación
De forma predeterminada, los mensajes de error del widget de contraseña de validación aparecen en rojo con un borde sólido de 1 píxel alrededor del texto.
-
Para modificar el estilo del texto de los mensajes de error de un widget de contraseña de validación, utilice la tabla siguiente para ubicar la regla CSS correspondiente y, a continuación, modifique las propiedades predeterminadas o añada sus propiedades y valores de estilo de texto.
Texto que se modifica
Regla CSS correspondiente
Propiedades que hay que modificar
Texto del mensaje de error
.passwordRequiredState .passwordRequiredMsg, .passwordMinCharsState .passwordMinCharsMsg, .passwordMaxCharsState .passwordMaxCharsMsg, .passwordInvalidStrengthState .passwordInvalidStrengthMsg, .passwordCustomState .passwordCustomMsg color: #CC3333; border: 1px solid #CC3333;
Cambio de los colores de fondo del widget de contraseña de validación
-
Para cambiar el color de fondo de un widget de contraseña de validación, utilice la siguiente tabla para localizar la regla CSS correspondiente y, a continuación, modifique los valores de color de fondo predeterminado.
Color que se va a cambiar
Regla CSS correspondiente
Propiedad que se va a modificar
Color de fondo de un widget en estado válido
.passwordValidState input, input.passwordValidState background-color: #B8F5B1;
Color de fondo de un widget en estado no válido
input.passwordRequiredState, .passwordRequiredState input, input.passwordInvalidStrengthState, .passwordInvalidStrengthState input, input.passwordMinCharsState, .passwordMinCharsState input, input.passwordCustomState, .passwordCustomState input, input.passwordMaxCharsState, .passwordMaxCharsState input background-color: #FF9F9F;
Color del fondo con widget seleccionado
.passwordFocusState input, input.passwordFocusState background-color: #FFFFCC;
Inicia sesión en tu cuenta