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


Posted in Javascript onApril 19, 2017

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="username" v-model="username"/>
    <label v-verified="verifyError.username"></label>
  </div>
  <div>
    <input type="password" placeholder="密码" v-verify.grow1="pwd" v-model="pwd"/>
    <label v-verified="verifyError.pwd"></label>
  </div>
  <button v-on:click="submit">确认</button>
 </div>

js

import Vue from "vue";
import verify from "vue-verify-plugin";
Vue.use(verify);

export default{
  data:function(){
    return {
      username:"",
      pwd:""
    }
  },
  methods:{
    submit:function(){
      if(this.$verify.check()){
        //通过验证  
      }
    }
  },
  verify:{
    username:[
      "required",
      {
        test:function(val){
          if(val.length<2){
            return false;
          }
          return true;
        },
        message:"姓名不得小于2位"
      }
    ],
    pwd:"required"
  },
  computed:{
    verifyError:function(){
      return this.$verify.$errors;
    }
  }
}

指令说明

v-verify

v-erify 在表单控件元素上创建数据的验证规则,他会自动匹配要验证的值以及验证的规则。

v-verify 修饰符说明

该指令最后一个修饰符为自定义分组

//自定义teacher分组
v-verify.teacher
//自定义student分组
v-verify.student

//验证时可分开进行验证 

//验证student 分组
this.$verify.check("student")
//验证teacher 分组
this.$verify.check("teacher")
//验证所有
this.$verify.check();

v-verified

v-verified 错误展示,当有错误时会展示,没有错误时会加上style:none,默认会展示该数据所有错误的第一条

该指令为语法糖(见示例)

<input v-model="username" v-verify="username">

<label v-show="$verify.$errors.username && $verify.$errors.username.length" v-text="$verify.$errors.username[0]"></label>
<!--等价于-->
<label v-verified="$verify.$errors.username"></label>
<!--展示所有错误-->
<label v-verified.join="$verify.$errors.username">

修饰符说明

.join 展示所有错误 用逗号隔开

自定义验证规则

var myRules={
  phone:{
    test:/^1[34578]\d{9}$/,
    message:"电话号码格式不正确"
  },
  max6:{
    test:function(val){
      if(val.length>6) {
        return false
      }
      return true;
    },
    message:"最大为6位"
  }

}
import Vue from "vue";
import verify from "vue-verify-plugin";
Vue.use(verify,{
  rules:myRules
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 #Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 #Javascript
JavaScript实现前端分页控件
Apr 19 #Javascript
vue动态生成dom并且自动绑定事件
Apr 19 #Javascript
Vue响应式原理详解
Apr 18 #Javascript
详解vue-router基本使用
Apr 18 #Javascript
Vue键盘事件用法总结
Apr 18 #Javascript
You might like
php基础知识:函数基础知识
2006/12/13 PHP
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
php 8小时时间差的解决方法小结
2009/12/22 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
浅谈python中的正则表达式(re模块)
2017/10/17 Python
django 外键model的互相读取方法
2018/12/15 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
作风建设演讲稿
2014/05/23 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
初中家长评语和期望
2014/12/26 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
党员发展大会主持词
2015/07/03 职场文书