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

赞 (0)

相关推荐

  • Vue表单验证插件的制作过程

    Vue表单验证插件的制作过程

    前言 前段时间,老大搭好了Vue的开发环境,于是我们愉快地从JQ来到了Vue.这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js. 当然为什么不找个插件呢? vue-validator呀. 1.我想了下,一个是表单验证是个高度定制化的东西,这种网上找到的插件为了兼顾各个公司的需求,所以加了很多功能,这些我们不需要.事实证明,vue-validator有50kb,而我写的va.js只有8kb. 2.另一个是,vue-val

  • 详解vue表单验证组件 v-verify-plugin

    verify github:https://github.com/liuyinglong/verify npm:https://www.npmjs.com/package/vue-verify-plugin install npm install vue-verify-plugin use html <div> <div> <input type="text" placeholder="姓名" v-verify.grow1="

  • Vue ElementUI之Form表单验证遇到的问题

    Vue ElementUI之Form表单验证遇到的问题

    首先说一下 我在form表单里面遇见的坑: 1.例如我要给后台传的不是对象,而是一个数组,怎么写验证? 2.比如我有四个弹出框,都要做验证,这个时候就要注意了,每一个弹出框的ref都不能给的一样,并且一定要与当前弹框的确定或者保存按钮一一对应,例如:第一个弹框的ref='number',按钮的click比如为xxxxxx('number'),第二个弹出框的ref='number2',对应的按钮>>xxxxxx('number2').如果ref用的都一样,就会出现,点击下一步我没有去做验证,我再

  • Vue表单验证插件Vue Validator使用方法详解

    Vue-validator 是Vue的表单验证插件,供大家参考,具体内容如下 Vue版本: 1.0.24 Vue-validator版本: 2.1.3 基本使用 <div id="app"> <validator name="validation"> <form novalidate> <div class="username-field"> <label for="username

  • Vue from-validate 表单验证的示例代码

    前言 需要进行表单数据验证,原先才用html5来完成验证,但是效果很差,也不够灵活,所以需要进行自定义的表单验证,网上的插件都太过庞大,项目并没有这么多的需求. 那让我们自己来写一个吧! 知识准备 vue的自定义指令 具体可以看官方手册,连接如下:https://vuejs.org/v2/guide/custom-directive.html 总的来说就是可以帮你在指定的钩子函数中跳用你的函数,参数(el,binding, vnode) el: 绑定的dom binding: 指令的各项属性 v

  • 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"

  • vue动态绑定组件子父组件多表单验证功能的实现代码

    vue动态绑定组件子父组件多表单验证功能的实现代码

    前端项目中经常会下拉或者选项卡,如果通过if,else或者switch去判断加载的话会产生大量冗余代码和变量定义,而且都写在一起后人很难维护. Vue核心在于组件,如果有内容通过选项卡或者下拉框切换用动态加载子组件最好不过. 如图: selects文件夹中,index只负责公共数据(当然公共数据也可以写在其他文件,只留一个入口文件),而comp文件夹中的几个组件则通过动态加载. 动态加载子组件:component // 给下拉框绑定下拉列表的索引 <el-select v-model="v

  • Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)

    废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .sspan{ background: #28a54c; color: #fff; margi

  • 基于AngularJS实现表单验证功能

    本文实例为大家分享了AngularJS实现表单验证功能的具体代码,供大家参考,具体内容如下 <!--实例解析 ng-app 指令定义了 AngularJS 应用. ng-controller 指令定义了应用控制器. ng-model 指令绑定了两个 input 元素到模型的 user 对象. formCtrl 函数设置了 master 对象的初始值,并定义了 reset() 方法. reset() 方法设置了 user 对象等于 master 对象. ng-click 指令调用了 reset()

  • JavaScript实现表单验证功能

    本文实例为大家分享了JavaScript实现表单验证功能的具体代码,供大家参考,具体内容如下 以下是JavaScript的表单验证功能,可根据JS代码编写出你想要的HTML和CSS的代码. 关于正则表达式的使用,以及常用的正则表达式,笔者目前还在整理中,后期整理完成后,会将链接放在下面,供大家一起学习. //1.声明变量 var emailObj; var usernameObj; var passwordObj; var confirmObj; var emailMsg; var userna

  • vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能 第一步:自定义一个生产随机验证码的组件,其本质是使用canvas绘制,详细代码如下: <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeig

  • Vue快速实现通用表单验证功能

    本文开篇第一句话,想引用鲁迅先生<祝福>里的一句话,那便是:"我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单".这句话要从哪里说起呢?大概要从最近半个月的"全栈工程师"说起.项目上需要做一个城市配载的功能,顾名思义,就是通过框选和拖拽的方式在地图上完成配载.博主选择了前后端分离的方式,在这个过程中发现:首先,只要有依赖jQuery的组件,譬如Kendoui,即使使用了Vue,依然需要通过jQuery去操作DOM.其次,只有

  • vue+element实现表单校验功能

    要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能: 实现这个功能,总共分为以下4布: 1.在el-form标签中定义:rules="rules";ref="reference" 2.在el-form-item定义prop="name"; 3.在选项data中定义rules校验规则; 4.在提交方法中检查用户行为 templa

  • vue form check 表单验证的实现代码

    vue-form-check  (基于vue的表单验证)具体实现代码如下所述: 安装 // 安装 npm i vue-form-check -S 引用 // 引用(eg. 在工程的main.js下) import vueFormCheck from 'vue-form-check' Vue.use(vueFormCheck) 调用 this.$checkForm(current, config) @params current 是当前校验对象 config 是校验规则对象 config.alia

  • 解决vue+ element ui 表单验证有值但验证失败问题

    一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item label="数据模板" prop="template" > <el-col :span="20"> <el-input type="textarea" v-model="form.template

随机推荐