cddv vue.js 表单考证插件运用说明
版本：1.0.8-6
猎取
github:这里
npm装置
npm i vue-cdd-validator --saveyarn装置
yarn add vue-cdd-validator装置
import Cddv from 'vue-cdd-validator';
let cddv = new Cddv()
Vue.use(cddv);扼要运用说明
由于如今许多浏览器对html5表单的支撑体式格局存在很大的差别，发起type运用text
由于如今许多浏览器对html5表单的支撑体式格局存在很大的差别，发起type运用text
由于如今许多浏览器对html5表单的支撑体式格局存在很大的差别，发起type运用text
该插件重要运用指令的情势
能够完成我们寻常的绝大部分运用
重要功能
对每一个表单运用同一个指令，加上差别的参数便可举行考证，而且也能够自定义考证要领
运用一个指令加上指定参数来显现出目的表单考证的结果
提交要领上的指令，用来看管假如一切的考证完成，那末则许可提交，不然不许可
表单指令——v-cddv-input:arg={id:<String>,format:<String:[vue.$data|regex]>,title:<String>}
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。
示例
<div>
<label>电话</label>
<input type='password' v-cddv-input:reg="{id:'tell',format:'Mobile',title:'电话'}" type=text ../>
</div>
<div v-cddv-msg:tell></div>
毛病信息指导指令——v-cddv-msg:id<String>
id对应的表单控件的考证结果。该条指令是显现指定表单的考证结果，假如毛病则举行提示，假如准确则不实际
该条指令能够增加到大多数的元素上，能够举行恣意的款式，不会影响结果
改信息须要你本身设置胜利和失利的款式他们的类名分别是：
考证胜利：
cddv-msg-hidden(考证胜利隐蔽)考证失利：
cddv-msg-show(考证失利显现，及其他款式)
示例
<div class="inputs">
<label>账户</label>
<input type="text" v-cddv-input:nonvoid="{id:'account',format:true,title:'账户'}">
<label>暗码</label>
<input type="text" v-cddv-input:reg="{id:'psd',format:'\\^[\w|\d]{6,16}$\\',title:'暗码'}">
<label>邮箱</label>
<input type="text" v-cddv-input:reg="{id:'email',format:'Mail',title:'邮箱'}">
</div>
<div class="check-msg">
<div v-cddv-msg:account></div>
<div v-cddv-msg:psd></div>
<div v-cddv-msg:email></div>
</div>默许情况下，各个都是不显现的，当第一次输入后，最先举行考证，运用的change事宜，所以会比较高性能。下面的显现毛病的框也能够增加款式，出如今页面的任何指定位置。其重要是依据考证的结果举行display的值的变更。
提交按钮指令——v-cddv-final-check:method=[method|{keys:['id1'...]}]
method为当前组件制订提交的要领，免去了再次运用onclick，能够把这个放在前面做指令参数，也能够放在背面做指令的值。
假如method放在前面，那末背面能够有一个属性为keys的对象，该属性的值是那些须要斟酌考证的空间的id。假如为空值则默许把一切带有考证id的空间作为须要考证对象。
该指令默许情况下是以一个组件实例的局限为边境的，嵌套的话，父组件就会包括子组件，此时就会存在毛病，所以发起不要嵌套运用
运用要领
考证不通过始在该元素上增加一个
submit-check-fialed类，我们须要对该类举行设置,而且把点击事宜清零考证通过期，则在点击是实行vue组件本身的指定的method要领。
运用时能够增加给制订要领
示例一
<a classs='btn' v-cddv-final-check:method="{keys:['id1','id2',...]}">提交</a>示例二
<a classs='btn' v-cddv-final-check="mehtod">提交</a>自定义考证失利时的类名
有两个元素会在考证失利时增加类名
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)