如何使用vuejs实现更好的Form validation?
用vuejs对Form验证怎么进行对submit验证，验证失败不跳转，成功才跳转？我试了好几个方法都没实现，很郁闷，要么不验证，要么就是验证了不进行跳转。
<input type="button" v-on:click="return submit()" class="btn btn-success" value="GO"/>
如何用vuejs实现更好的Form validation?
好像还是vue-validator资料多些，接下来打算用这个了：https://github.com/vuejs/vue-validator
vue用于表单验证目前有三个插件
vue-validator
Vue validator
vue-form
举个例子吧，我用的的是vue-form
html:
<form v-form name="myform" @submit.prevent="onSubmit" role="form">
<legend class="text-center">Vue-form demo</legend>
<div class="form-group">
<label>邮箱*</label>
<input class="form-control" v-model="model.name" v-form-ctrl required name="name" />
</div>
<div class="form-group">
<label>用户名*</label>
<input class="form-control" v-model="model.email" v-form-ctrl name="email" type="email" required />
</div>
<div class="errors" v-if="myform.$submitted">
<p class="bg-danger text-center" v-if="myform.name.$error.required">请输入用户名.</p>
<p class="bg-danger text-center" v-if="myform.email.$error.email">请输入正确的邮箱.</p>
</div>
<button class="btn btn-success btn-block" type="submit">提交</button>
</form>
js:
new Vue({
el: '#app',
data: {
myform: {},
model: {}
},
methods: {
onSubmit: function() {
console.log(this.myform.$valid);
if(this.myform.$valid==true)
alert("提交成功");
}
}
});
demo完整代码在这里点击预览可以查看
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
AWS Lambda 上可以运行不同的语言，提供不同语言的运行环境。这也就意味着，它不仅可以跑 Express 来提供一个 RESTful API，它也可以运行各式各样的 Node.js 库，比如说 GraphQL。 GraphQL是一种API查询语言，是一个对自定义类型系统执行查询的服务端运行环境。我们可以编写一个使用 GraphQL 编写一个查询： { me { name }
-
问题内容： 我有一个带有一些数据的VueJS实例： 在我的HTML中，我还有： 因此，在填充该字段之后，将触发我的实例的方法。 发生的事情是： 在字段更改时被调用（确定） AJAX调用经过成功，我看到都在控制台上的预期输出和（OK） 但 不会在VueJS实例中更新。 我可以看到它没有被更新，因为依赖它的代码的其他部分看不到它。我还检查了VueJS Chrome插件，除以外的所有变量均已正确设置（包
-
我试图设置我的vuejs应用程序，但我不知道如何正确配置这个与我的webpack配置html lint。我目前正在尝试htmlhint-loader。我使用以下命令安装了它： 并在我的网页中添加了以下代码。基础配置： 但这不起作用，让我知道，如果还有什么需要使它工作。 当我使用这个正则表达式时： 我发现以下错误： 错误/~/html网页包插件/lib/loader。js/指数html模块分析失败：
-
问题内容： 我看到了Java的AtomicInteger如何在CAS（比较和交换）操作中内部工作。基本上，当多个线程尝试更新值时，JVM在内部使用基础CAS机制并尝试更新值。如果更新失败，请使用新值重试，但不要阻止。 在Java8中，Oracle引入了新的Class LongAdder类，该类在高竞争下似乎比AtomicInteger更好。一些博客文章声称LongAdder通过维护内部单元格表现更
-
问题内容： 我正在使用alix 2d13开发基于Linux的设备。 我已经开发了一个脚本，负责创建映像文件，创建分区，安装引导加载程序（syslinux），内核和initrd，并负责将根文件系统文件放入正确的分区。 配置文件位于tmpfs文件系统上，并在系统启动时由读取驻留在自己分区上的XML文件的软件创建。 我正在寻找一种更新文件系统的方法，并且我考虑了两种解决方案： 固件更新是一个压缩文件，可
-
我们在Etherpad中非常广泛地使用了SocketIO（从很早开始），我们非常感谢团队为提供如此有用的东西所做的所有努力：） Etherpad是一个nodejs项目。 我对SocketIO的问题可能是由于我的配置错误或理解错误，但经过相当多的测试工具生成，调整内存设置等，我们仍然得到一个令人沮丧的低最大消息数每秒达到10K大关。 Etherpad最新模拟负载测试 在线阅读，看起来切换到ws的性能
-
我们有一个应用程序，它使用来自Kafka主题（3个分区）的消息，丰富数据，并将记录保存在DB（Spring JPA）中，然后将消息发布到另一个Kafka主题（在同一个代理上），所有这些都通过使用Camel 2.4.1和Spring Boot 2.1.7进行编排。释放 我们想为 kafka 消费者-生产者组合实现“exactly-once”语义。 消费者设置： 生产者设置： 豆接线： 骆驼路线： 但
-
问题内容： 我很快将使用Java的log4j类来创建项目。但是我不认为我对此有任何了解。希望有人能启发我这个小问题。 问题答案： Log4j基本上接受您要输出的任何语句，让您为其分配“严重性”级别（警告，错误，严重等），并以多种方式将其注销。（对于文件，字节流等，有很多附加选项可用。） 这是对log4j的简短介绍。 http://www.developer.com/open/article.php