如何使用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 Dialog 弹出层对话框插件
Aug 09 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
Canvas 绘制粒子动画背景
Feb 15 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
javascript动态创建对象的属性详解
Nov 07 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连接函数implode与分割explode的深入解析
2013/06/26 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
PHP 断点续传实例详解
2017/11/11 PHP
使用Apache的rewrite
2021/03/09 Servers
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
Python对列表排序的方法实例分析
2015/05/16 Python
Python中random模块用法实例分析
2015/05/19 Python
浅谈对yield的初步理解
2017/05/29 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
python with (as)语句实例详解
2020/02/04 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
2014年发展党员工作总结
2014/11/12 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python