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

回答

相关问题