当前位置:首页 > 编程教程 > vue技术文章 > vue+vue-validator 表单验证功能的实现代码

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

  • 发布时间:
  • 作者:码农之家
  • 点击:121

这篇文章主要知识点是关于vue、表单验证、vue-validator、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue企业开发实战
  • 类型:Vue.js实战大小:109.6 MB格式:PDF作者:肖睿
立即下载

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

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • 如何用vue组件实现用户无限添加自定义填写表单
  • 效果图: 代码如下: template div class=checkbox div class=input p v-for=item in inputs span自定义字段:/span input type=text v-model=item.val /p button @click=addInput()添加字段/button button @click=sub()保存提交/button /div h1提交的信息: {{submsg}}/h1 /div/templatescript export default { name: checkbox, data (){ return { inputs:[], submsg: } }, methods: { addInput (){ var obj = {}; obj.id = this.inputs.length; obj.val = ; this.inputs.push(obj); }, sub (){ this.subm……

  • 分享vue使用Element组件时v-for循环里的表单项验证解决方案
  • 标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了。 首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了。 然鹅问题来了……

  • Laravel中用Vue.js实现基于Ajax的表单提交错误验证实例内容
  • 本教程基于Laravel 5.4 开始之前首先准备好开发环境,我们假设你已经安装好 Laravel,至于 Vue 的引入,请参考官方文档。 做好上述准备工作后就可以开始我们的开发了,本教程中我们将演示文章发布页面的表单 验证 。 首先在 routes/web.php 中新增两条路由规则: Route::get(post/create, PostController@create);Route::post(post/save, PostController@save); 然后在项目根目录下运行 Artisan 命令创建控制器 P……

  • vee-validate vue 2.0自定义表单验证的实现方法
  • 亲测可用 学习vee-validate,首先可以去阅读 官方文档 ,更为详细可以阅读官网中的 规则 。 一、安装 您可以通过npm或通过CDN安装此插件。 1. NPM npm install vee-validate --save 2. CDN script src=path/to/vue.js/scriptscript src=path/to/vee-validate.js/scriptscript Vue.use(VeeValidate); // good to go./script 或者你可以使用ES6导入它: import Vue from vue;import VeeValidate from vee-validate;Vue.use(VeeValidate); 二、使用中文提示 没有配……

    相关电子书
    学习笔记

    Copyright 2018-2020 xz577.com 码农之家

    本站所有电子书资源不再提供下载地址,只分享来路

    版权投诉 / 书籍推广 / 赞助:QQ:520161757