详解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 相关文章推荐
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 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
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
python基于ID3思想的决策树
2018/01/03 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
以太网Ethernet IEEE802.3
2013/08/05 面试题
java程序员面试交流
2012/11/29 面试题
毕业证丢失证明
2014/01/15 职场文书
计算机个人求职信范例
2014/01/24 职场文书
法制宣传标语
2014/06/23 职场文书
大学生赌博检讨书
2014/09/22 职场文书
申报材料格式
2014/12/30 职场文书
小学教师求职信范文
2015/03/20 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
Nginx 常用配置
2022/05/15 Servers