I need to be able to write letters, spaces and numbers in the same input , using VeeValidate to validate, only take into account one of the two validations, that is, I apply the validations alpha_spaces and alpha_num but only take into account one depending on what is written in the input.
An example to help me understand better:
Vue.use(VeeValidate, {locale: 'es'});
var app = new Vue({
el: "#root",
data: {
datos: {},
},
mounted: function(){
},
methods: {
Validar: function(){
app.$validator.validateAll("formulario").then((result) => {
if (result) {
swal( {title:"Éxito!", text:"Validación correcta!", icon:"success", button:"Aceptar", closeOnClickOutside:false});
}else {
swal( {title:"Información!", text:"Verifique los campos nuevamente!", icon:"info", button:"Aceptar", closeOnClickOutside:false});
}
});
},
}
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/locale/es.js"></script>
<div class="container" id="root">
<br><br>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Test"
data-vv-scope="formulario" data-vv-name="test" v-validate="'required|alpha_spaces|alpha_num'" v-model="datos.campo_uno">
<span class="input-group-btn">
<a class="btn btn-default" v-on:click="Validar();">Aceptar <span class="glyphicon glyphicon-ok"></span></a>
</span>
</div><!-- /input-group -->
<p class="font-red" v-show="errors.has('formulario.test')">
<span class="glyphicon glyphicon-alert"></span> <i class="fa fa-warning font-red"></i> {{ errors.first('formulario.test') }}
</p>
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div><!-- /.container -->