Skip to content

Instantly share code, notes, and snippets.

@parzibyte

parzibyte/index.html Secret

Last active September 3, 2019 14:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save parzibyte/d756a0ca64e7614baa5bcad6091463de to your computer and use it in GitHub Desktop.
Save parzibyte/d756a0ca64e7614baa5bcad6091463de to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html lang="es">
<!--
Demostrar la validación de VeeValidate
(plugin para Vue.js)
Plantilla inicial de Bootstrap 4
@author parzibyte
Visita: parzibyte.me/blog
-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Validación de formularios con VeeValidate">
<meta name="author" content="Parzibyte">
<title>Validación de formularios con VeeValidate</title>
<!-- Cargar el CSS de Boostrap-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<main role="main" class="container">
<div class="row" id="app">
<!-- Aquí pon las col-x necesarias, comienza tu contenido, etcétera -->
<div class="col-12">
<h1>Validación de formularios con VeeValidate</h1>
<a target="_blank" href="//parzibyte.me/blog">By Parzibyte</a>
<div class="form-group">
<input name="nombre" autocomplete="off" class="form-control" v-validate="'required'" v-model="usuario.nombre" type="text" placeholder="Nombre completo" />
<div class="invalid-feedback">
{{errors.first('nombre')}}
</div>
</div>
<div class="form-group">
<input name="edad" autocomplete="off" class="form-control" v-validate="'required|numeric|min_value:18'" v-model.number="usuario.edad" type="text" placeholder="Edad" />
<div class="invalid-feedback">
{{errors.first('edad')}}
</div>
</div>
<div class="form-group">
<input name="correo" autocomplete="off" class="form-control" v-validate="'required|email'" v-model.number="usuario.correo" type="email" placeholder="Correo electrónico" />
<div class="invalid-feedback">
{{errors.first('correo')}}
</div>
</div>
<div class="form-group">
<textarea class="form-control" v-validate="'required|prohibirPalabras:foo,bar,baz'" placeholder="Biografía" v-model="usuario.biografia" name="biografia" cols="20" rows="5"></textarea>
<div class="invalid-feedback">
{{errors.first('biografia')}}
</div>
</div>
<div v-show="errors.all().length" class="alert alert-danger">
<ul>
<li v-for="(error, i) in errors.all()">{{error}}</li>
</ul>
</div>
<button class="btn btn-success mb-5" @click="intentarEnviar">Enviar</button>
</div>
</div>
</main>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js">
</script>
<script src="https://unpkg.com/vee-validate@2.2.9/dist/vee-validate.js">
</script>
<script src="https://unpkg.com/vee-validate@2.2.9/dist/locale/es.js">
</script>
<script src="script.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment