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


Posted in Javascript onApril 07, 2017

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

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

Javascript 相关文章推荐
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
BootStrap 附加导航组件
Jul 22 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
js尾调用优化的实现
May 23 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
vue 图片裁剪上传组件的实现
Nov 12 Javascript
JS实现css hover操作的方法示例
Apr 07 #Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 #Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 #Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 #jQuery
jQuery中map函数的两种方式
Apr 07 #jQuery
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 #Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 #jQuery
You might like
一些使用频率比较高的php函数
2008/10/03 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
python实现发送邮件及附件功能
2021/03/02 Python
python中模块的__all__属性详解
2017/10/26 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
SQL Server面试题
2013/04/04 面试题
岗位竞聘演讲稿
2014/01/10 职场文书
社会保险接收函
2014/01/12 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
小学生环保标语
2014/06/13 职场文书
欢迎领导标语
2014/06/27 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
php中pcntl_fork详解
2021/04/01 PHP