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
});

Vue 表单验证插件的更多相关文章

  1. 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)

    写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...

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

    一.表单验证模块的构成 任何表单验证模块都是由 配置――校验――报错――取值 这几部分构成的. 配置: 配置规则 和配置报错,以及优先级 校验: 有在 change 事件校验, 在点击提交按钮的时候校 ...

  3. 一个不错的vue表单验证插件

    github文档 用着不错,官方的文档例子很简单 <body> <div id="app"> <validator name="valida ...

  4. VeeValidate——vue2.0表单验证插件

    一.vee-validate入门 vee-validate 是一个轻量级的 vue表单验证插件.它有很多开箱即用的验证规则,也支持自定义验证规则.它是基于模板的,因此它与HTML5验证API类似且熟悉 ...

  5. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  6. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  7. jQuery学习之:Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

  8. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  9. 表单验证插件 - formValidator

    表单验证插件 - formValidator * 引入formValidator插件文件 * 引入formValidator插件的主文件 * 引入formValidator插件的正则有关文件 * 引入 ...

随机推荐

  1. 使用Compute Shader加速Irradiance Environment Map的计算

    Irradiance Environment Map基本原理 Irradiance Environment Map(也叫Irradiance Map或Diffuse Environment Map), ...

  2. 提交Sublime Text 插件到Package Control

    最近写了一个lua智能提示的插件LuaSmartTips.这个插件一直都是自己一个人在用,昨天突然想把插件提交到Package Control,如果其他的人有这样的需求就可以直接安装. Package ...

  3. BOM基础(三)

    在我之前关于DOM的文章里,其实已经有提到过事件的概念.在讲事件之前,首先要知道的就是javascript是由事件驱动的.什么叫事件驱动呢?打个比方,比如我们在页面中点击一个按钮,才会跳出一个窗口或者 ...

  4. 第一章 初始java

    一.单词 public:公共的          static:静态的        void:空的          class:类       print:打印     line:排    pro ...

  5. 同步 VS 异步

    同步请求资源 请求msdn上的一个页面计算页面大小 static void Main(string[] args) { string url = "https://docs.microsof ...

  6. PHP数据访问修改和多条件查询(20161030)

    查询分为关键字查询和准确查询 1.没有提交的时候--查所有 2.两个输入都为空--查所有3.第一个条件有,第二个为空--根据第一个条件查4.第一个没有,第二个有--根据第二个条件查5.两个都有--根据 ...

  7. springmvc基础学习2---简单配置文件

    1:web文件 2:spring-mvc.xml配置文件

  8. 【SF】开源的.NET CORE 基础管理系统 -介绍篇

    [SF]开源的.NET CORE 基础管理系统 -系列导航 1.环境: .NET Core SDK (https://www.microsoft.com/net/core) SQL Server or ...

  9. YII contoller控制器之间跳转的方法redirect

    一个contoller CustomerController里怎么调用另一个controller里的action,Acontoller调用SiteContoller的actionShow($id), ...

  10. 模块化规范Common.js,AMD,CMD

    随着网站规模的不断扩大,嵌入网页中的javascript代码越来越大,开发过程中存在大量问题,如:协同开发,代码复用,大量文件引入,命名冲突,文件依赖. 模块化编程称为迫切的需求. 所谓的模块,就是实 ...