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 拖拉缩放效果
Dec 10 Javascript
javascript 特殊字符串
Feb 25 Javascript
js 走马灯简单实例
Nov 21 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
JavaScript 异步时序问题
Nov 20 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支付宝手机网页支付类实例
2015/03/04 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
JS实现留言板功能
2017/06/17 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
Python多线程和队列操作实例
2015/06/21 Python
Python科学计算之Pandas详解
2017/01/15 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
pandas删除指定行详解
2019/04/04 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
南京导游词
2015/02/03 职场文书
超市主管竞聘书
2015/09/15 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
公司会议开幕词
2016/03/03 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs