ASP.NETコアSPAServicesクライアントサイドフォーム検証VUE2

Question

私はしばらくの間、FEソリューションにいませんでした。私のFE教育の一環として、SPAServices/SPATempaltesを使用してASP.NET Core BEにシンプルなVUE2 SPAアプリケーションを作成したいと考えています。一般に、私はこれを大きな技術と考えていますが、私は1つの問題に遭遇しました。クライアント側の検証を行う方法。以前は、ASP.NET MVCサービスと統合されたjquery検証を使用していました。誰かが私にポイントを与えることができますか（正確な解決策ではないかもしれませんが、どこを探すべきか）これは今日どのように行うことができますか？

よろしく

Answer 1

クライアント側VueJsで検証またはフロントフレームワークは、HTML5とJavaScriptを使用して起こります。あなたがJqueryで行ったのと同じように、これらのフレームワークはすべて購読するさまざまなイベントを公開し、ユーザーの入力などを検証できます。

Answer 2

Vueの独自の検証を行う際に本当に役立つことがわかりました。

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

今では、SPAとしてのVueを使用していないが、これは、検証について語るものです。彼はまた、ここではSPAでのVueやASP.NETコアを利用上のポストがあります。 https://stu.ratcliffe.io/2017/07/20/vuejs-serverside-rendering-with-aspnet-core

ここ（リンク切れの場合は）最初のポストからの検証コードの一部です：

(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); 

https://github.com/sturatcliffe/VueDotnetMVC

：ビュー

@{ 
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> 

プロジェクトはで見つけることができます