Polímero - Entrada CC CVC dorada

<gold-cc-cvc-input> es un campo de entrada de una sola línea con estilo de Material Design para ingresar el código de verificación de una tarjeta de crédito.

Sintaxis

Este elemento tiene una etiqueta opcional, que es "CVC" de forma predeterminada, como se muestra en el siguiente fragmento de código.

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

También puede usar <gold-cc-input> junto con <gold-cc-cvc-input> vinculando la propiedad cardType.

<gold-cc-input card-type = "{{cardType}}"></gold-cc-input>
<gold-cc-cvc-input card-type = "[[cardType]]"></gold-cc-cvc-input>

Validación

La entrada acepta CVC de 3 dígitos para la mayoría de las tarjetas válidas, pero para American Express válido, el CVC se considera de 4 dígitos y de 3 dígitos en caso contrario.

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.

Estilismo

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

Ejemplo

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

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

El comando anterior instala el elemento gold-cc-cvc-input en la carpeta bower_components. Luego, importe el archivo gold-cc-cvc-input en su index.html usando el siguiente comando.

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

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

<!DOCTYPE html>
<html>
   <head>
      <title>Gold CC CVC 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-cvc-input/gold-cc-cvc-input.html">
   </head>

   <body>
      <h3>Pre-validated cvc</h3>
      <gold-cc-cvc-input
         label = "valid cvc"
         value = "586"
         auto-validate  
         style = "width:30%; display:inline-block;">
      </gold-cc-cvc-input><br/>

      <gold-cc-cvc-input
         label = "invalid cvc"
         value = "55"
         auto-validate  
         style = "width:30%; display:inline-block;">
      </gold-cc-cvc-input>	
	
      <h3>Displays custom error message</h3>
      <gold-cc-cvc-input 
         label = "Enter a cvc" 
         auto-validate 
         error-message = "Please enter a valid cvc" 
         style = "width:30%; display:inline-block;">
      </gold-cc-cvc-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