vue+vue-validator 表单验证功能实例

更新时间：2020-05-14 16:57:54
编辑：尚凯复

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

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

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

<!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>

<!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 表单验证功能的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持！

相关教程

如何用vue组件实现用户无限添加自定义填写表单

今天小编就为大家分享一篇vue组件开发之用户无限添加自定义填写表单的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

发布时间：2020-02-16
分享vue使用Element组件时v-for循环里的表单项验证解决方案

这篇文章主要介绍了vue使用Element组件时v-for循环里的表单项验证方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

发布时间：2020-03-01
Laravel中用Vue.js实现基于Ajax的表单提交错误验证实例内容

这篇文章主要介绍了Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下

发布时间：2019-11-01
vee-validate vue 2.0自定义表单验证的实现方法

今天小编就为大家分享一篇vee-validate vue 2.0自定义表单验证的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

发布时间：2019-09-24
JavaScript+Vue+React全程实例

这书根据基础知识与开发实践活动紧密结合的观念，选萃当今简易、好用和时兴的百余个JavaScript编码案例，协助阅读者学习培训把握JavaScript开发语言。本书內容详实、重中之重突显、浅显易懂，包含了JavaScript前端开发开发的各个方面。

大小：59150 MB MJS实例
Vue.js快速入门

目前单页应用框架层出不穷，其中Vue.js是十分耀眼的项目之一，受到国内外开发人员的极度推崇。全书分为8章，内容包括Vue.js概述、Vue.js的安装、定义页面、渲染视图、路由、发送HTTP请求、表单的绑定和提交、打包、部署、解决js的跨域问题、Debug、Component、Mixin、Vuex、页面的生命周期等，最后还给出一个实战案例供读者了解Vue.js项目开发过程。本书适合Vue.js初学者、Web前端开发人员，也适合高等院校和培训学校的师生教学参考。

大小：26581 MB MVue.js入门
Vue.js实战

尤雨溪推荐随书附赠示例代码下载资源 vue社区iView组件贡献者前端大神梁灏编写突出实战应用为王大鹏展趐鹰击长空 Vue.js实战助你攀上前端之巅

大小：196.7 MBVue电子书
Vue.js项目开发实战

大小：186.6 MBVue.js电子书
Vue.js快速入门

目前单页应用框架层出不穷，其中Vue.js是十分耀眼的项目之一，受到国内外开发人员的极度推崇。

大小：186.6 MBWeb前端电子书
Vue.js v2.x 官方教程

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。易用会HTML、CSS、JavaScript就可以构建应用。灵活可以在一个库和一套完整框架之间自如伸缩。高效 20kB运行大小，超快虚拟 DOM，最省心的优化目录基础深入了

大小：5.11 MBVue手册
Vue.js项目实战

Vue实用、灵便、更快，为搭建详细的当代Web运用出示了需要的全部作用，其渐进式的特性也让开发人员可以轻轻松松入门，发布后快速获得了前端工程师工作人员的亲睐。这书由Vue.js关键精英

大小：141 MBVue
Spring Boot+Vue全栈开发实战

传统的JavaEE开发效率低下、配置臃肿、调试不便，严重制约了程序员的生产力。Spring Boot致力于简化开发配置，并为企业级开发提供一系列非业务性功能；而Vue则采用数据驱动视图的方式将程序

大小：196.3 MBSpring电子书
水晶石技法VUE 10完全学习手册

《水晶石技法 VUE 10完全学习手册》共14章，以实例为主，共提供了50多个制作实例。第1～3章对VUE进行了总体介绍。第4～12章通过大量的实例，分别介绍了VUE的各个功能模块，包括大气、材质、地形、生态系统、函数、动画、渲染，以及VUE和其他软件的结合使用(比如，3ds Max、Poser等)。第13章安排了两个综合实例，让读者在较为全面地了解了VUE的功能之后，综合使用各个知识点来完成更为大型的实例。在本书最后的第14章中，列出了VUE使用过程中的一些常见

大小：114191 MB VUE10学习手册
Node.js实战：使用Egg.js+Vue.js+Docker构建渐进式、可持续集成与交付应用

大小：227 MBNode.js电子书