Polímero - Entrada CC dorada

<gold-cc-input> es un campo de texto de entrada con estilo de Material Design para ingresar un número de tarjeta de crédito. A medida que el usuario escribe un número, se agregará un espacio después de cada 4 dígitos.

Sintaxis

<gold-cc-input></gold-cc-input>

Este elemento tiene una etiqueta opcional, que es el "número de tarjeta" de forma predeterminada, como se muestra a continuación:

<gold-cc-input label = "CC"></gold-cc-input>

Validación

Usando la suma de comprobación de Luhn, el número de tarjeta de crédito ingresado se detecta si es válido o inválido junto con el tipo de tarjeta.

Para validar manualmente, puede utilizar validate()método que devuelve verdadero si es válido o falso, si no es válido. El uso deauto-validate y required Los atributos hacen que la entrada se valide automáticamente.

Una lista de tipos de tarjetas de crédito como amex, diners_club, discover, jcb, laser, maestro, mastercard, visa, visa_electron se proporcionan a través de la propiedad cardTypes.

estilismo

Para diseñar este elemento, consulte Polymer.PaperInputContainerpara obtener una lista de propiedades personalizadas.

La propiedad personalizada utilizada para diseñar este elemento es la siguiente:

----gold-cc-input-icon-container- Define el mixin para personalizar el contenedor de iconos. El valor predeterminado es {}.

Ejemplo

Para usar el elemento gold-cc-input, navegue a la carpeta de su proyecto en el símbolo del sistema y use el siguiente comando.

bower install PolymerElements/gold-cc-input --save

El comando anterior instala el elemento gold-cc-input en la carpeta bower_components. A continuación, importe el archivo gold-cc-input en su index.html usando el siguiente comando

<link rel = "import" href = "/bower_components/gold-cc-input/gold-cc-input.html">

El siguiente programa demuestra el uso del elemento gold-cc-input.

<!DOCTYPE html>
<html>
   <head>
      <title>Gold CC Input</title>
      <meta charset = "utf-8">
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "bower_components/gold-cc-input/gold-cc-input.html">
   </head>

   <body>
      <h3>Pre-validated credit card numbers</h3>
      <gold-cc-input 
         label = "Visa" 
         auto-validate 
         value = "4111111111111111" 
         style = "width:40%; display:inline-block;">
      </gold-cc-input><br/>
	
      <gold-cc-input 
         label = "Invalid Visa" 
         auto-validate 
         value = "4111 1111 1111 0021" 
         style = "width:40%; display:inline-block;">
      </gold-cc-input>
	
      <h3>Displayes error message for wrong number</h3>
      <gold-cc-input 
         label = "Enter a credit card number" 
         auto-validate 
         error-message = "Please enter a valid credit card number" 
         style = "width:40%; display:inline-block;">
      </gold-cc-input>
   </body>
</html>

Salida

Para ejecutar la aplicación, navegue hasta el directorio de su proyecto y ejecute el siguiente comando.

polymer serve

Ahora abra el navegador y navegue hasta http://127.0.0.1:8081/. Lo siguiente será la salida.

↰ Previous page