摘要：示例電話電話錯(cuò)誤信息指示指令對(duì)應(yīng)的表單控件的驗(yàn)證結(jié)果。其主要是根據(jù)驗(yàn)證的結(jié)果進(jìn)行的值的變換。如果為空值則默認(rèn)把所有帶有驗(yàn)證的空間作為需要驗(yàn)證對(duì)象。

版本：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);

因?yàn)楝F(xiàn)在很多瀏覽器對(duì)html5表單的支持方式存在很大的差異，建議type使用text

因?yàn)楝F(xiàn)在很多瀏覽器對(duì)html5表單的支持方式存在很大的差異，建議type使用text

因?yàn)楝F(xiàn)在很多瀏覽器對(duì)html5表單的支持方式存在很大的差異，建議type使用text

該插件主要使用指令的形式
能夠?qū)崿F(xiàn)我們平常的絕大部分使用

主要功能

對(duì)每個(gè)表單使用同一個(gè)指令，加上不同的參數(shù)便可進(jìn)行驗(yàn)證，而且也可以自定義驗(yàn)證方法

使用一個(gè)指令加上指定參數(shù)來(lái)顯示出目標(biāo)表單驗(yàn)證的結(jié)果

提交方法上的指令，用來(lái)監(jiān)視如果所有的驗(yàn)證完成，那么則允許提交，否則不允許

arg是指令參數(shù)，填寫的是需要驗(yàn)證的項(xiàng)

常用的有

nonvoid 不可為空/必填

reg 正則

equal 需要等與某個(gè)項(xiàng)

unequal 不能等于某項(xiàng)

id[string] 是當(dāng)前表單控件的識(shí)別id不可重復(fù)

format 自定義驗(yàn)證的值，為字符串格式，可以使當(dāng)前組件的data中的變量，也可以直接是個(gè)正則字面量，當(dāng)然也有很多預(yù)設(shè)

nonvoid 指令參數(shù)是該值的話format需要填寫true，

reg 需要填寫內(nèi)定的或者自定義的正則法則

自定義的正則可以是字符串的，也可以是簡(jiǎn)寫方式，簡(jiǎn)寫方式需要用變量帶入，因?yàn)樵貙傩灾恢С肿址问降闹担兞康脑捫枰獣r(shí)組件data的變量。

內(nèi)置的常用的正則有

"ImgCode"

"IdCard" 身份證號(hào)碼驗(yàn)證

"SmsCode"

"MailCode"

"UserName"用戶名4到16位的字母或數(shù)字

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

"Mobile"電話號(hào)碼

"RealName"真實(shí)名字2到10位的漢字

"BankNum"銀行卡號(hào)

"Money"錢

"Answer"

"Mail"郵箱

當(dāng)寫的format值不是這些時(shí)將安做自定義正則進(jìn)行匹配

equal 要求等于某個(gè)值，此時(shí)的format可以填寫組件的data,當(dāng)這些都沒(méi)有匹配到時(shí)，當(dāng)作自定義的值來(lái)使用。(如果重復(fù)則會(huì)出現(xiàn)問(wèn)題)

unequal 類似于equal但是時(shí)不應(yīng)該等于某個(gè)值,在該指令的值中應(yīng)給出aim屬性

title，可以給當(dāng)前的表單起一個(gè)自定義的名字，報(bào)錯(cuò)時(shí)識(shí)別信息使用

aim ，一般不使用，但是在使用equal或者unequal時(shí)為了防止錯(cuò)誤，可以使用aim來(lái)額外當(dāng)作format使用，優(yōu)先級(jí)高于format。可以是自定義的值，組件的data某個(gè)值，或者某個(gè)表單的id。

電話

id對(duì)應(yīng)的表單控件的驗(yàn)證結(jié)果。

該條指令是顯示指定表單的驗(yàn)證結(jié)果，如果錯(cuò)誤則進(jìn)行提醒，如果正確則不現(xiàn)實(shí)

該條指令可以添加到大多數(shù)的元素上，可以進(jìn)行任意的樣式，不會(huì)影響效果

改信息需要你自己設(shè)置成功和失敗的樣式他們的類名分別是：

驗(yàn)證成功：cddv-msg-hidden(驗(yàn)證成功隱藏)

驗(yàn)證失敗：cddv-msg-show(驗(yàn)證失敗顯示，及其他樣式)

賬戶
  
  密碼
  
  郵箱
  


  

  

  

默認(rèn)情況下，各個(gè)都是不顯示的，當(dāng)?shù)谝淮屋斎牒螅_始進(jìn)行驗(yàn)證，使用的change事件，所以會(huì)比較高性能。下面的顯示錯(cuò)誤的框也可以添加樣式，出現(xiàn)在頁(yè)面的任何指定位置。其主要是根據(jù)驗(yàn)證的結(jié)果進(jìn)行display的值的變換。

method為當(dāng)前組件制定提交的方法，免去了再次使用onclick，可以把這個(gè)放在前面做指令參數(shù)，也可以放在后面做指令的值。

如果method放在前面，那么后面可以有一個(gè)屬性為keys的對(duì)象，該屬性的值是那些需要考慮驗(yàn)證的空間的id。如果為空值則默認(rèn)把所有帶有驗(yàn)證id的空間作為需要驗(yàn)證對(duì)象。

該指令默認(rèn)情況下是以一個(gè)組件實(shí)例的范圍為邊界的，嵌套的話，父組件就會(huì)包含子組件，此時(shí)就會(huì)存在錯(cuò)誤，所以建議不要嵌套使用

使用方法

驗(yàn)證不通過(guò)始在該元素上添加一個(gè)submit-check-fialed類，我們需要對(duì)該類進(jìn)行設(shè)置,并且把點(diǎn)擊事件清零

驗(yàn)證通過(guò)時(shí)，則在點(diǎn)擊是執(zhí)行vue組件自己的指定的method方法。

使用時(shí)可以添加給制定方法

提交

提交

有兩個(gè)元素會(huì)在驗(yàn)證失敗時(shí)添加類名

v-cdd-input，在有這個(gè)指令的表單元素在驗(yàn)證失敗時(shí)會(huì)添加input-check-failed類名

cddv-final-check，在有這個(gè)指令的元素在驗(yàn)證失敗時(shí)會(huì)添加submit-check-failed類名(這個(gè)一般是提交按鈕)
當(dāng)然用戶也可以自定義類名

該插件的默認(rèn)類名是V
所以使用new來(lái)建立一個(gè)實(shí)例，然后在構(gòu)造函數(shù)中加入

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

使用實(shí)例方法config,該方法傳入一個(gè)跟構(gòu)造函數(shù)一樣的對(duì)象

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