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