vue+vue-validator 表单验证功能的实现代码


Posted in Javascript onNovember 13, 2017

官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html

github项目地址:https://github.com/vuejs/vue-validator

下面给大家介绍vue+vue-validator 表单验证功能,具体代码如下所示:

1.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Title</title> 
</head> 
<body> 
  <div id="app"> 
    <validator name="myForm"> 
      <form novalidate> 
        Zip: <input type="text" v-validate:zip="['required']"><br /> 
        <div> 
          <span v-if="$myForm.zip.required">Zip code is required.</span> 
        </div> 
      </form> 
    </validator> 
  </div> 
  <script src="https://unpkg.com/vue@1.0.26/dist/vue.min.js"></script> 
  <script src="https://cdn.bootcss.com/vue-validator/2.1.3/vue-validator.js"></script> 
  <script> 
    new Vue({ 
      el:"#app" 
    }) 
  </script> 
</body> 
</html>

2.

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title>radio button validation example</title> 
  <script src="../../node_modules/vue/dist/vue.js"></script> 
  <script src="../../dist/vue-validator.js"></script> 
  <style> 
   input.invalid { border-color: red; } 
   .errors { color: red; } 
  </style> 
 </head> 
 <body> 
  <div id="app"> 
   <h1>Survey</h1> 
   <validity-group field="fruits" v-model="validation" :validators="{ 
    required: { message: requiredErrorMsg } 
   }"> 
    <legend>Which do you like fruit ?</legend> 
    <input id="apple" type="radio" name="fruit" value="apple" @change="handleValidate" @focusin="handleValidate"> 
    <label for="apple">Apple</label> 
    <input id="orange" type="radio" name="fruit" value="orange" @change="handleValidate" @focusin="handleValidate"> 
    <label for="orange">Orage</label> 
    <input id="grape" type="radio" name="fruit" value="grage" @change="handleValidate" @focusin="handleValidate"> 
    <label for="grape">Grape</label> 
    <input id="banana" type="radio" name="fruit" value="banana" @change="handleValidate" @focusin="handleValidate"> 
    <label for="banana">Banana</label> 
    <ul class="errors"> 
     <li v-for="error in validation.result.errors"> 
      <p :class="error.field + '-' + error.validator">{{error.message}}</p> 
     </li> 
    </ul> 
   </validity-group> 
  </div> 
  <script> 
   new Vue({ 
    data: { 
     validation: { 
      result: {} 
     } 
    }, 
    computed: { 
     requiredErrorMsg: function () { 
      return 'Required fruit !!' 
     } 
    }, 
    methods: { 
     handleValidate: function (e) { 
      var $validity = e.target.$validity  
      $validity.validate() 
     } 
    } 
   }).$mount('#app') 
  </script> 
 </body> 
</html>

总结

以上所述是小编给大家介绍的vue+vue-validator 表单验证功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
详解用async/await来处理异步
Aug 28 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 #jQuery
Angular实现表单验证功能
Nov 13 #Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 #Javascript
Vue.js用法详解
Nov 13 #Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 #Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 #Javascript
vue 挂载路由到头部导航的方法
Nov 13 #Javascript
You might like
php网上商城购物车设计代码分享
2012/02/15 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
node后端服务保活的实现
2019/11/10 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
基于Python实现文件大小输出
2016/01/11 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
Python读取指定日期邮件的实例
2019/02/01 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
美国旅游网站:Tours4Fun
2017/02/17 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
生物化工专业个人自荐信
2013/09/26 职场文书
入党申请书自我鉴定
2013/10/12 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
银行给客户的感谢信
2015/01/23 职场文书
小学生表扬稿范文
2015/05/05 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
导游词之张家口
2019/12/13 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android