ASP.NET核心SPAServices客戶端表單驗證VUE2

我一段時間都沒有進入FE解決方案。作爲我的FE教育的一部分，我想使用SPAServices/SPATempaltes在ASP.NET Core BE上創建一個簡單的VUE2 SPA應用程序。總的來說，我認爲這是一個偉大的技術，但我遇到了一個問題。如何進行客戶端驗證。前段時間我使用了與ASP.NET MVC服務集成的jQuery驗證。有人可以給我一點（可能不是確切的解決方案，但需要尋找的地方）如何做到這一點？ASP.NET核心SPAServices客戶端表單驗證VUE2

問候

來源

2017-09-08 user1658223

在VueJs客戶端驗證或任何前框架發生使用HTML5和Javascript。就像你在Jquery中所做的那樣，所有這些框架都暴露了不同的事件來訂閱，你可以驗證用戶輸入等。

來源

2017-09-08 06:34:19 Charith

我發現這篇文章對於你自己對Vue的驗證（使用vee驗證）非常有幫助。

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

現在沒有使用Vue的一個溫泉，但是這是一個談論的驗證。他還對利用Vue公司和ASP.NET核心的SPA的一則訊息： 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>

該項目可以在這裏找到

來源

2017-12-11 15:18:09

ASP.NET核心SPAServices客戶端表單驗證VUE2

回答

相關問題