資訊專欄INFORMATION COLUMN
摘要：示例電話電話錯誤信息指示指令對應(yīng)的表單控件的驗證結(jié)果。其主要是根據(jù)驗證的結(jié)果進(jìn)行的值的變換。如果為空值則默認(rèn)把所有帶有驗證的空間作為需要驗證對象。
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);簡要使用說明
因為現(xiàn)在很多瀏覽器對html5表單的支持方式存在很大的差異，建議type使用text
因為現(xiàn)在很多瀏覽器對html5表單的支持方式存在很大的差異，建議type使用text
因為現(xiàn)在很多瀏覽器對html5表單的支持方式存在很大的差異，建議type使用text
該插件主要使用指令的形式
能夠?qū)崿F(xiàn)我們平常的絕大部分使用
主要功能
對每個表單使用同一個指令，加上不同的參數(shù)便可進(jìn)行驗證，而且也可以自定義驗證方法
使用一個指令加上指定參數(shù)來顯示出目標(biāo)表單驗證的結(jié)果
提交方法上的指令，用來監(jiān)視如果所有的驗證完成，那么則允許提交，否則不允許
表單指令——v-cddv-input:arg={id:
arg是指令參數(shù)，填寫的是需要驗證的項
常用的有
nonvoid 不可為空/必填
reg 正則
equal 需要等與某個項
unequal 不能等于某項
id[string] 是當(dāng)前表單控件的識別id不可重復(fù)
format 自定義驗證的值，為字符串格式，可以使當(dāng)前組件的data中的變量，也可以直接是個正則字面量，當(dāng)然也有很多預(yù)設(shè)
nonvoid 指令參數(shù)是該值的話format需要填寫true，
reg 需要填寫內(nèi)定的或者自定義的正則法則
自定義的正則可以是字符串的，也可以是簡寫方式，簡寫方式需要用變量帶入，因為元素屬性只支持字符串形式的值，變量的話需要時組件data的變量。
內(nèi)置的常用的正則有
"ImgCode"
"IdCard" 身份證號碼驗證
"SmsCode"
"MailCode"
"UserName"用戶名4到16位的字母或數(shù)字
"Pasword"6到16位的可包含字母和!@#$%^&*.的組合
"Mobile"電話號碼
"RealName"真實名字2到10位的漢字
"BankNum"銀行卡號
"Money"錢
"Answer"
"Mail"郵箱
當(dāng)寫的format值不是這些時將安做自定義正則進(jìn)行匹配
equal 要求等于某個值，此時的format可以填寫組件的data,當(dāng)這些都沒有匹配到時，當(dāng)作自定義的值來使用。(如果重復(fù)則會出現(xiàn)問題)
unequal 類似于equal但是時不應(yīng)該等于某個值,在該指令的值中應(yīng)給出aim屬性
title，可以給當(dāng)前的表單起一個自定義的名字，報錯時識別信息使用
aim ，一般不使用，但是在使用equal或者unequal時為了防止錯誤，可以使用aim來額外當(dāng)作format使用，優(yōu)先級高于format?？梢允亲远x的值，組件的data某個值，或者某個表單的id。
示例錯誤信息指示指令——v-cddv-msg:id
id對應(yīng)的表單控件的驗證結(jié)果。
該條指令是顯示指定表單的驗證結(jié)果，如果錯誤則進(jìn)行提醒，如果正確則不現(xiàn)實
該條指令可以添加到大多數(shù)的元素上，可以進(jìn)行任意的樣式，不會影響效果
改信息需要你自己設(shè)置成功和失敗的樣式他們的類名分別是：
驗證成功：cddv-msg-hidden(驗證成功隱藏)
驗證失?。?b>cddv-msg-show(驗證失敗顯示，及其他樣式)
示例默認(rèn)情況下，各個都是不顯示的，當(dāng)?shù)谝淮屋斎牒?，開始進(jìn)行驗證，使用的change事件，所以會比較高性能。下面的顯示錯誤的框也可以添加樣式，出現(xiàn)在頁面的任何指定位置。其主要是根據(jù)驗證的結(jié)果進(jìn)行display的值的變換。
提交按鈕指令——v-cddv-final-check:method=[method|{keys:["id1"...]}]method為當(dāng)前組件制定提交的方法，免去了再次使用onclick，可以把這個放在前面做指令參數(shù)，也可以放在后面做指令的值。
如果method放在前面，那么后面可以有一個屬性為keys的對象，該屬性的值是那些需要考慮驗證的空間的id。如果為空值則默認(rèn)把所有帶有驗證id的空間作為需要驗證對象。
該指令默認(rèn)情況下是以一個組件實例的范圍為邊界的，嵌套的話，父組件就會包含子組件，此時就會存在錯誤，所以建議不要嵌套使用
使用方法
驗證不通過始在該元素上添加一個submit-check-fialed類，我們需要對該類進(jìn)行設(shè)置,并且把點擊事件清零
驗證通過時，則在點擊是執(zhí)行vue組件自己的指定的method方法。
使用時可以添加給制定方法
示例一提交示例二
提交自定義驗證失敗時的類名
有兩個元素會在驗證失敗時添加類名
v-cdd-input，在有這個指令的表單元素在驗證失敗時會添加input-check-failed類名
cddv-final-check，在有這個指令的元素在驗證失敗時會添加submit-check-failed類名(這個一般是提交按鈕)
當(dāng)然用戶也可以自定義類名
該插件的默認(rèn)類名是V
所以使用new來建立一個實例，然后在構(gòu)造函數(shù)中加入
var cddv = new V({
inputCheckClass:xxx,
finalCheckClass:xxx
})
Vue.use(cddv)
二
使用實例方法config,該方法傳入一個跟構(gòu)造函數(shù)一樣的對象
var cddv = new V()
cddv.config({
inputCheckClass:xxx,
finalCheckClass:xxx
})
Vue.use(cddv)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86790.html
摘要：前端工程師學(xué)習(xí)資料，快速查找面試題，經(jīng)典技術(shù)文章的總結(jié)，編程技巧，幫助學(xué)習(xí)者快速定位問題花點時間整理出一下前端工程師日常工作所需要的學(xué)習(xí)資料查找，幫助學(xué)習(xí)者快速掌握前端工程師開發(fā)的基本知識編程始于足下記住再牛逼的夢想也抵不住傻逼似的堅持蝴蝶 前端工程師學(xué)習(xí)資料，快速查找面試題，經(jīng)典技術(shù)文章的總結(jié)，編程技巧，幫助學(xué)習(xí)者快速定位問題花點時間整理出一下web前端工程師日常工作所需要的學(xué)習(xí)資料...
摘要：責(zé)編現(xiàn)代化的方式開發(fā)一個圖片上傳工具前端掘金對于圖片上傳，大家一定不陌生。之深入事件機(jī)制前端掘金事件綁定的方式原生的事件綁定方式有幾種想必有很多朋友說種目前，在本人目前的研究中，只有兩種半兩種半還有半種的且聽我道來。 Ajax 與數(shù)據(jù)傳輸 - 前端 - 掘金背景 在沒有ajax之前，前端與后臺傳數(shù)據(jù)都是靠表單傳輸，使用表單的方法傳輸數(shù)據(jù)有一個比較大的問題就是每次提交數(shù)據(jù)都會刷新頁面，用...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
閱讀 791·2019-08-29 12:49
閱讀 3581·2019-08-29 11:32
閱讀 3484·2019-08-26 10:43
閱讀 2429·2019-08-23 16:53
閱讀 2079·2019-08-23 15:56
閱讀 1726·2019-08-23 12:03
閱讀 2798·2019-08-23 11:25
閱讀 2108·2019-08-22 15:11
