vue-cdd-validator vue.js 表单验证插件介绍

VEIGHTZ 发布于2019-08-21 11:30 / 1407人阅读

摘要：示例电话电话错误信息指示指令对应的表单控件的验证结果。其主要是根据验证的结果进行的值的变换。如果为空值则默认把所有带有验证的空间作为需要验证对象。

cddv vue.js 表单验证插件使用说明

版本：1.0.8-6

获取

github:这里

npm安装

npm i vue-cdd-validator --save

yarn安装

yarn add vue-cdd-validator

安装

import Cddv from "vue-cdd-validator";
let cddv = new Cddv()
Vue.use(cddv);

简要使用说明

因为现在很多浏览器对html5表单的支持方式存在很大的差异，建议type使用text

该插件主要使用指令的形式
能够实现我们平常的绝大部分使用

主要功能

对每个表单使用同一个指令，加上不同的参数便可进行验证，而且也可以自定义验证方法

使用一个指令加上指定参数来显示出目标表单验证的结果

提交方法上的指令，用来监视如果所有的验证完成，那么则允许提交，否则不允许

表单指令——v-cddv-input:arg={id:,format:,title:}

arg是指令参数，填写的是需要验证的项

常用的有

nonvoid 不可为空/必填

reg 正则

equal 需要等与某个项

unequal 不能等于某项

id[string] 是当前表单控件的识别id不可重复

format 自定义验证的值，为字符串格式，可以使当前组件的data中的变量，也可以直接是个正则字面量，当然也有很多预设

nonvoid 指令参数是该值的话format需要填写true，

reg 需要填写内定的或者自定义的正则法则

自定义的正则可以是字符串的，也可以是简写方式，简写方式需要用变量带入，因为元素属性只支持字符串形式的值，变量的话需要时组件data的变量。

内置的常用的正则有

"ImgCode"

"IdCard" 身份证号码验证

"SmsCode"

"MailCode"

"UserName"用户名4到16位的字母或数字

"Pasword"6到16位的可包含字母和!@#$%^&*.的组合

"Mobile"电话号码

"RealName"真实名字2到10位的汉字

"BankNum"银行卡号

"Money"钱

"Answer"

"Mail"邮箱

当写的format值不是这些时将安做自定义正则进行匹配

equal 要求等于某个值，此时的format可以填写组件的data,当这些都没有匹配到时，当作自定义的值来使用。(如果重复则会出现问题)

unequal 类似于equal但是时不应该等于某个值,在该指令的值中应给出aim属性

title，可以给当前的表单起一个自定义的名字，报错时识别信息使用

aim ，一般不使用，但是在使用equal或者unequal时为了防止错误，可以使用aim来额外当作format使用，优先级高于format。可以是自定义的值，组件的data某个值，或者某个表单的id。

示例


电话

错误信息指示指令——v-cddv-msg:id

id对应的表单控件的验证结果。

该条指令是显示指定表单的验证结果，如果错误则进行提醒，如果正确则不现实

该条指令可以添加到大多数的元素上，可以进行任意的样式，不会影响效果

改信息需要你自己设置成功和失败的样式他们的类名分别是：

验证成功：cddv-msg-hidden(验证成功隐藏)

验证失败：cddv-msg-show(验证失败显示，及其他样式)

示例


账户
  
  密码
  
  邮箱

默认情况下，各个都是不显示的，当第一次输入后，开始进行验证，使用的change事件，所以会比较高性能。下面的显示错误的框也可以添加样式，出现在页面的任何指定位置。其主要是根据验证的结果进行display的值的变换。

提交按钮指令——v-cddv-final-check:method=[method|{keys:["id1"...]}]

method为当前组件制定提交的方法，免去了再次使用onclick，可以把这个放在前面做指令参数，也可以放在后面做指令的值。

如果method放在前面，那么后面可以有一个属性为keys的对象，该属性的值是那些需要考虑验证的空间的id。如果为空值则默认把所有带有验证id的空间作为需要验证对象。

该指令默认情况下是以一个组件实例的范围为边界的，嵌套的话，父组件就会包含子组件，此时就会存在错误，所以建议不要嵌套使用

使用方法

验证不通过始在该元素上添加一个submit-check-fialed类，我们需要对该类进行设置,并且把点击事件清零

验证通过时，则在点击是执行vue组件自己的指定的method方法。

使用时可以添加给制定方法

示例一

提交

示例二

提交

自定义验证失败时的类名

有两个元素会在验证失败时添加类名

v-cdd-input，在有这个指令的表单元素在验证失败时会添加input-check-failed类名

cddv-final-check，在有这个指令的元素在验证失败时会添加submit-check-failed类名(这个一般是提交按钮)
当然用户也可以自定义类名

方法一

该插件的默认类名是V
所以使用new来建立一个实例，然后在构造函数中加入

var cddv = new V({
    inputCheckClass:xxx,
    finalCheckClass:xxx
})
Vue.use(cddv)

二

使用实例方法config,该方法传入一个跟构造函数一样的对象

var cddv = new V()
cddv.config({
    inputCheckClass:xxx,
    finalCheckClass:xxx
})
Vue.use(cddv)

服务器托管私有云表单插件 form表单插件 jquery表单插件 js表单插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86790.html

前端必须要珍藏的技术文章和面试题

摘要：前端工程师学习资料，快速查找面试题，经典技术文章的总结，编程技巧，帮助学习者快速定位问题花点时间整理出一下前端工程师日常工作所需要的学习资料查找，帮助学习者快速掌握前端工程师开发的基本知识编程始于足下记住再牛逼的梦想也抵不住傻逼似的坚持蝴蝶前端工程师学习资料，快速查找面试题，经典技术文章的总结，编程技巧，帮助学习者快速定位问题花点时间整理出一下web前端工程师日常工作所需要的学习资料...

MoAir 2019-08-26 10:29 评论0 收藏0
前端开发收集 - 收藏集 - 掘金

摘要：责编现代化的方式开发一个图片上传工具前端掘金对于图片上传，大家一定不陌生。之深入事件机制前端掘金事件绑定的方式原生的事件绑定方式有几种想必有很多朋友说种目前，在本人目前的研究中，只有两种半两种半还有半种的且听我道来。 Ajax 与数据传输 - 前端 - 掘金背景在没有ajax之前，前端与后台传数据都是靠表单传输，使用表单的方法传输数据有一个比较大的问题就是每次提交数据都会刷新页面，用...

ygyooo 2019-08-20 17:15 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0