Vue.js 表單校驗(yàn)插件
Vuerify 是一個(gè)簡(jiǎn)單輕量的數(shù)據(jù)校驗(yàn)插件。內(nèi)置基礎(chǔ)的校驗(yàn)規(guī)則和錯(cuò)誤提示。可自定義規(guī)則，規(guī)則類(lèi)型支持正則、函數(shù)或者字符串。校驗(yàn)規(guī)則可全局注冊(cè)也可以組件內(nèi)注冊(cè)。插件會(huì)給 vm 添加 $vuerify 對(duì)象，同時(shí) watch 數(shù)據(jù)并校驗(yàn)合法性，如果有錯(cuò)誤會(huì)存入 vm.$vuerify.$errors。
安裝
npm i vuerify -S
使用
安裝插件
import Vue from 'vue' import Vuerify from 'vuerify' Vue.use(Vuerify, /* 添加自定義規(guī)則 */)
添加自定義規(guī)則
test 可以是正則或者函數(shù)
{
required: {
test: /\S+$/,
message: '必填項(xiàng)'
}
}
組件內(nèi)注冊(cè)
{
data () {
username: '',
password: ''
},
vuerify: {
username: {
test: /\w{4,}/, // 自定義規(guī)則，可以是函數(shù)，正則或者全局注冊(cè)的規(guī)則（填字符串）
message: '至少 4 位字符'
},
password: 'required' // 使用全局注冊(cè)的規(guī)則
}
}
API
$vuerify 包含如下屬性
name description type default Value
$errors 數(shù)據(jù)校驗(yàn)失敗的錯(cuò)誤信息, 例如 username 校驗(yàn)失敗會(huì)返回 { username: '至少 4 位字符' } Object {}
invalid 存在校驗(yàn)失敗的字段 Boolean true
valid 不存在校驗(yàn)失敗的字段 Boolean false
check 檢查指定字段，傳入數(shù)組，返回 Boolean Function(Array) -
clear 清空錯(cuò)誤列表 Function -
v-vuerify
該指令可以在表單組件觸發(fā) blur 事件時(shí)驗(yàn)證數(shù)據(jù)并為組件設(shè)置類(lèi)名(默認(rèn)為 .vuerify-invalid)?？梢允?input 等原生組件，也可以是自己封裝過(guò)的組件。提供兩個(gè)版本
安裝
# Vue 1.x npm v-vuerify -S # Vue 2.0 npm v-vuerify-next -S
用法
import Vue from 'vue' import VuerifyDirective from 'v-vuerify' // Vue1.x import VuerifyDirective from 'v-vuerify-next' // Vue2.0 Vue.use(VuerifyDirective) <input v-model="username" v-vuerify="'username'"> <x-input :value.sync="password" v-vuerify="'password'"></x-input>
Params
verifyInvalidClass
默認(rèn)類(lèi)名為 vuerify-invalid
<input v-model="username" v-vuerify="'username'" vuerify-invalid-class="error">
Modifiers
parent
如果 vuerify 是在父組件注冊(cè)的，那么就需要指定 parent，讓指令可以從父組件獲取對(duì)應(yīng)的 $vuerify，具體看 demo
Events
vuerify-invalid
vuerify-valid
Github: https://github.com/QingWei-Li/vuerify
- js前端設(shè)計(jì)模式優(yōu)化50%表單校驗(yàn)代碼示例
- js實(shí)現(xiàn)表單校驗(yàn)功能
- 從表單校驗(yàn)看JavaScript策略模式的使用詳解
- Vue.js + Nuxt.js 項(xiàng)目中使用 Vee-validate 表單校驗(yàn)
- JavaScript 完成注冊(cè)頁(yè)面表單校驗(yàn)的實(shí)例
- 使用JavaScript進(jìn)行表單校驗(yàn)功能
- Angularjs使用指令做表單校驗(yàn)的方法
- AngularJs表單校驗(yàn)功能實(shí)例代碼
- AngularJS入門(mén)教程之表單校驗(yàn)用法示例
- JS實(shí)現(xiàn)注冊(cè)界面表單校驗(yàn)
相關(guān)文章
vue 自動(dòng)檢測(cè)手機(jī)端響應(yīng)式布局的五種實(shí)現(xiàn)
本文主要介紹了vue自動(dòng)檢測(cè)手機(jī)端響應(yīng)式布局,可以通過(guò)結(jié)合 CSS 媒體查詢(xún)、Vue 的動(dòng)態(tài)數(shù)據(jù)綁定、適當(dāng)?shù)牡谌綆?kù)、PostCSS 插件以及正確的視口設(shè)置實(shí)現(xiàn),感興趣的可以了解一下2024-07-07
Vue引入并使用Element組件庫(kù)的兩種方式小結(jié)
本文主要介紹了Vue引入并使用Element組件庫(kù)的兩種方式小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
最適應(yīng)的vue.js的form提交涉及多種插件【推薦】
這篇文章主要介紹了最適應(yīng)的vue.js的form提交涉及多種插件,涉及到 vue.js動(dòng)態(tài)添加css樣式 ，tab切換 ，touch，表單提交，驗(yàn)證，toast，數(shù)據(jù)雙向綁定等。需要的朋友可以參考下2018-08-08
下面小編就為大家分享一篇vue實(shí)現(xiàn)提示保存后退出的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要為大家介紹了vue3中如何使用shaka-player示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
使用Vuex實(shí)現(xiàn)一個(gè)筆記應(yīng)用的方法
這篇文章主要介紹了使用Vuex實(shí)現(xiàn)一個(gè)筆記應(yīng)用的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
解決element-ui的el-dialog組件中調(diào)用ref無(wú)效的問(wèn)題
這篇文章主要介紹了解決element-ui的el-dialog組件中調(diào)用ref無(wú)效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
在做文字處理的項(xiàng)目時(shí)經(jīng)常會(huì)遇到搜索文字并高亮的需求,本文就來(lái)介紹vue 指定文字高亮的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
這篇文章主要給大家分享將 prop 限制為類(lèi)型列表、默認(rèn)內(nèi)容和擴(kuò)展點(diǎn)、使用引號(hào)觀察嵌套值、知道何時(shí)使用 v-if、單作用域 slot 的簡(jiǎn)寫(xiě)、有條件地渲染slot等25 個(gè)Vue 技巧，下文是下相關(guān)資料,需要的朋友可以參考一下2021-11-11
隨著前端技術(shù)的發(fā)展,TypeScript 已經(jīng)成為了許多開(kāi)發(fā)者的首選語(yǔ)言之一,因?yàn)樗峁┝遂o態(tài)類(lèi)型檢查,可以幫助開(kāi)發(fā)者在編寫(xiě)代碼階段就發(fā)現(xiàn)錯(cuò)誤,本文將詳細(xì)介紹如何在 Vue 3 中配置 TypeScript,需要的朋友可以參考下2024-10-10