如何使用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完整代码在这里点击预览可以查看

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vue 短信验证码组件开发详解

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 自身不是一个全能框架--它只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用. 摘要: 1.该组件基于Vue 2.1.X版本: 1. Vue 组件代码如下: Vue.component('timerBtn

  • Vue表单验证插件Vue Validator使用方法详解

    Vue-validator 是Vue的表单验证插件,供大家参考,具体内容如下 Vue版本: 1.0.24 Vue-validator版本: 2.1.3 基本使用 <div id="app"> <validator name="validation"> <form novalidate> <div class="username-field"> <label for="username

  • 详解vuelidate 对于vueJs2.0的验证解决方案

    介绍 在后端项目里 比如我们的Laravel框架 对于表单验证有自己的一套validation机制 他将验证集成在FormRequest 我们只需要在我们的方法中依赖注入我们自己实例化后的验证类 当然也可以直接去在方法里去验证表单数据 而在我们的前端的项目里 也就是在我们的vue项目里 也有比较好的验证解决方案 也就是这的vuelidate 1.安装 和我们安装前端包一样 在项目终端执行: $ npm install vuelidate --save 安装完成后和我们去使用vuex一样 在mai

  • 详解vue-validator(vue验证器)

    官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-validator 单独使用vue-validator的方法见官方文档,本文结合vue-router使用. 安装验证器 不添加自定义验证器或者无需全局使用的公用验证器,在main.js中安装验证器,使用 CommonJS 模块规范, 需要显式的使用 Vue.use() 安装验证器组件. import

  • Vuejs第六篇之Vuejs与form元素实例解析

    本文是小编结合官方文档整理的一篇细致代码更多更全的详细教程,非常适合新手学习,感兴趣的朋友一起看看吧! 资料来于官方文档: http://cn.vuejs.org/guide/forms.html 表单绑定 ①常见绑定方法: [1]文本输入框绑定: [2]textarea绑定(类似[1]): [3]radio选中值绑定: [4]checkbox绑定(自动捆绑数组,无需name): [5]select绑定: [6]select multiple多选选中框绑定: [7]动态绑定(以上不同类型但同一个

  • Vue表单验证插件的制作过程

    前言 前段时间,老大搭好了Vue的开发环境,于是我们愉快地从JQ来到了Vue.这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js. 当然为什么不找个插件呢? vue-validator呀. 1.我想了下,一个是表单验证是个高度定制化的东西,这种网上找到的插件为了兼顾各个公司的需求,所以加了很多功能,这些我们不需要.事实证明,vue-validator有50kb,而我写的va.js只有8kb. 2.另一个是,vue-val

  • Vue.js如何优雅的进行form validation

    本文针对知乎上关于Vue.js如何优雅的进行form validation问题进行了整理,供大家参考,具体内容如下 Vue.js如何优雅的进行form validation? 1. 所有validation rules是被集中管理,而不是每个文件自己一种,导致验证规则冗余. 2. 能够进行remote validate. 3. 不用JQuery. 现有的插件vuejs/vue-validator · GitHub只能实现普通验证,但如何解决1,因为vue-validator没有把校验规则给抽象出

  • Vue.js实现移动端短信验证码功能

    现在的短信验证码一般为4位或6位,则页面中会相应的显示4个或6个文本框,如图所示 当点击注册进入到输入验证码页面的时候,第一个框自动获取光标,依次输入,不可直接输入第三个或第四个框的值, input输入框是循环出来的,代码如下: <div class="sms_input"> <div v-for="n in sms.numbers-1"><input v-if="sms.show[n-1]" disabled=&q

  • 如何使用vuejs实现更好的Form validation?

    用vuejs对Form验证怎么进行对submit验证,验证失败不跳转,成功才跳转?我试了好几个方法都没实现,很郁闷,要么不验证,要么就是验证了不进行跳转. <input type="button" v-on:click="return submit()" class="btn btn-success" value="GO"/> 如何用vuejs实现更好的Form validation? 好像还是vue-valida

  • DHTML form validation

    DHTML form validation body{ font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */ background-color:#FFF; font-size:0.9em; } /* Style for invalid input */ .invalidInput{ border:1px solid #F00; padding:1px; } /* Style for

  • 使用async-validator编写Form组件的方法

    前端开发中,表单的校验一个很常见的功能,一些 ui 库例如ant.design与Element ui都实现了有校验功能的 Form 组件.async-validator是一个可以对数据进行异步校验的库,ant.design 与 Element ui 的 Form 组件都使用了 async-validator.本文就简单介绍一下 async-validator 的基本用法以及使用该库实现一个简单的有校验功能的 Form 组件. 1. async-validator 的基本用法 async-vali

  • 详细分析使用AngularJS编程中提交表单的方式

    在AngularJS出现之前,很多开发者就面对了表单提交这一问题.由于提交表单的方式繁杂而不同,很容易令人疯掉--然而现在看来,依然会让人疯掉. 今天,我们会看一下过去使用PHP方式提交的表单,现在如何将其转换为使用Angular提交.使用Angular来处理表单,对我而言,是一个"啊哈"时刻(译者:表示了解或发现某事物的喜悦).即使它甚至都没有涉及多少Angular表层的东西,但是它却帮助用户看到表单提交之后的潜力,并且理解两种数据绑定方式. 我们会使用jQuery平台来进行这个处理

  • 详细解读AngularJS中的表单验证编程

    需求 Name 必填 Username 非必填,最小长度3,最大长度8 Email 非必填,但必须是合法的email 验证未通过的表单不能提交 显示一个必填或者非法email格式的错误信息 如果正确提交就弹出一个祝贺信息 现在知道我们的目标了吧,让我们一起来构建这个东西吧. Angular 的表单属性 $valid, $invalid, $pristine, $dirty Angular 提供了有关表单的属性来帮助我们验证表单. 他们给我们提供了各种有关一个表单及其输入的信息,并且应用到了表单和

  • 理解php Hash函数,增强密码安全

    1.声明 密码学是一个复杂的话题,我也不是这方面的专家.许多高校和研究机构在这方面都有长期的研究.在这篇文章里,我希望尽量使用简单易懂的方式向你展示一种安全存储Web程序密码的方法. 2."Hash"是做什么的? "Hash将一段数据(小数据或大数据)转换成一段相对短小的数据,如字符串或整数." 这是依靠单向hash函数来完成的.所谓单向是指很难(或者是实际上不可能)将其反转回来.一个常见的hash函数的例子是md5(),它流行于各种计算机语言和系统. 复制代码 代

  • Javascript 基础---Ajax入门必看

    Ajax 是现代Web 应用程序开发的一项关键工具.它让你能向服务器异步发送和接收数据,然后用 Javascript 解析. Ajax 是 Asynchronous JavaScript and XML (异步JavaScript 与XML)的缩写. Ajax 核心规范的名称继承于用来建立和发起请求的 Javascript 对象:XMLHttpRequest .这个规范有两个等级.所有主流浏览器都实现了第一级,它代表了基础级别的功能.第二级扩展了最初的规范,纳入了额外的事件和一些功能来让它更容易

  • 从零开始学习jQuery (十) jQueryUI常用功能实战

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是实战篇. 使用jQueryUI完成制作网站的大部分常用功能. 二.前言 经过公司内部收集, 整理了一些经常使用javascript实现的功能.  实现这些功能的主角不是让人眼花缭乱的jQuery插件,  而是jQuery UI. 如果你还在为了一个小小的特效而去下载并安装插件, 发现Bug还没有人替你解决. 记住插件是我们没有办法的最后选择

  • 强烈推荐240多个jQuery插件提供下载

    jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML documents.events.实现动画效果,并且方便地为网站提供 AJAX 交互. jQuery 还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择. jQuery 能够使用户的 html 页保持代码和 html 内容分离,也就是说,不用再在 html 里面插入一堆js来调用命令了,只需定义 id 即可.今天在Kollermedia.at上发现了一篇J

随机推荐