ASP.NET Core SPAServices Validation de formulaire côté client VUE2

Question

Je ne suis pas dans les solutions FE depuis un moment. Dans le cadre de mon éducation FE, je voudrais créer une simple application VUE2 SPA sur ASP.NET Core BE en utilisant SPAServices/SPATempaltes. En général, je considère cela comme un grand morceau de technologie, mais je suis arrivé à un problème. Comment effectuer la validation côté client. Il y a quelque temps, j'utilisais la validation jquery intégrée aux services ASP.NET MVC. Quelqu'un peut-il me donner un point (peut-être pas la solution exacte, mais les endroits où chercher) comment cela peut-il être fait de nos jours?

Cordialement

Answer 1

Validation côté client dans VueJs ou tout autre cadre avant HTML5 et en utilisant se produit Javascript. Comme vous l'avez fait dans Jquery, tous ces frameworks exposent différents événements pour vous abonner et vous pouvez valider les entrées utilisateur.

Answer 2

J'ai trouvé cet article très utile pour valider votre propre vue de Vue (en utilisant la validation en V).

https://stu.ratcliffe.io/2017/7/23/integrating-vuejs-with-aspnet-core-mvc

Maintenant, il n'utilise pas Vue comme un SPA, mais est celui qui parle de la validation. Il a également un poste sur l'utilisation de base Vue et ASP.NET dans un SPA ici: https://stu.ratcliffe.io/2017/07/20/vuejs-serverside-rendering-with-aspnet-core

Voici une partie du code de validation du premier message (en cas de pourriture de lien):

(function (Vue, VeeValidate) { 

if (document.querySelector('#contact')) { 
Vue.use(VeeValidate); 

var app = new Vue({ 
    el: "#contact", 
    data: { 
    name: '', 
    email: '', 
    message: '', 
    errorMessage: '' 
    }, 
    methods: { 
    send: function() { 
     this.$validator.validateAll().then(result => { 
     if (result) { 
      this.reset(); 
      alert('Form submitted!'); 
     } else { 
      this.errorMessage = 'Please fix all validation errors.' 
     } 
     }); 
    }, 
    reset: function() { 
     this.name = ''; 
     this.email = ''; 
     this.message = ''; 
     this.errorMessage = ''; 
     this.$validator.clean(); 
    } 
    } 
}); 
} 

})(Vue, VeeValidate); 

Voir

@{ 
ViewData["Title"] = "Contact"; 
} 
<h2>@ViewData["Title"].</h2> 

<div id="contact"> 
<form v-on:submit.prevent="send"> 
<div v-if="errorMessage.length" class="alert alert-danger"> 
    {{ errorMessage }} 
</div> 
<div :class="{ 'form-group': true, 'has-error': errors.has('name'), 'has-success': name.length && !errors.has('name') }"> 
    <label for="name">Name</label> 
    <input autofocus v-model="name" v-validate="'required|min:5'" class="form-control" name="name" type="text" /> 
    <span v-show="errors.has('name')" class="text-danger">{{ errors.first('name') }}</span> 
</div> 
<div :class="{ 'form-group': true, 'has-danger': errors.has('email'), 'has-success': email.length && !errors.has('email') }"> 
    <label for="email">E-mail</label> 
    <input v-model="email" v-validate="'required|email'" class="form-control" name="email" type="text" /> 
    <span v-show="errors.has('email')" class="text-danger">{{ errors.first('email') }}</span> 
</div> 
<div :class="{ 'form-group': true, 'has-danger': errors.has('message'), 'has-success': message.length && !errors.has('message') }"> 
    <label for="message">Message</label> 
    <textarea v-model="message" v-validate="'required|min:5'" class="form-control" name="message"></textarea> 
    <span v-show="errors.has('message')" class="text-danger">{{ errors.first('message') }}</span> 
</div> 
<input type="submit" value="Save" class="btn btn-primary" /> 
</form> 
</div> 

Le projet se trouve à l'adresse:

https://github.com/sturatcliffe/VueDotnetMVC