Vue.js 表單校驗(yàn)插件
Vuerify 是一個(gè)簡(jiǎn)單輕量的數(shù)據(jù)校驗(yàn)插件。內(nèi)置基礎(chǔ)的校驗(yàn)規(guī)則和錯(cuò)誤提示??勺远x規(guī)則,規(guī)則類型支持正則、函數(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è)置類名(默認(rèn)為 .vuerify-invalid)??梢允?input 等原生組件,也可以是自己封裝過的組件。提供兩個(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)類名為 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àn)的實(shí)例
- 使用JavaScript進(jìn)行表單校驗(yàn)功能
- Angularjs使用指令做表單校驗(yàn)的方法
- AngularJs表單校驗(yàn)功能實(shí)例代碼
- AngularJS入門教程之表單校驗(yàn)用法示例
- JS實(shí)現(xiàn)注冊(cè)界面表單校驗(yàn)
相關(guān)文章
vue3.0語法糖內(nèi)的defineProps及defineEmits解析
這篇文章主要介紹了vue3.0語法糖內(nèi)的defineProps及defineEmits解析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04Vue使用el-upload批量上傳圖片時(shí)報(bào)錯(cuò)問題處理方法
相信大家都知道在element-ui中,el-upload可以進(jìn)行文件多選操作,下面這篇文章主要給大家介紹了關(guān)于Vue使用el-upload批量上傳圖片時(shí)報(bào)錯(cuò)問題的處理方法,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06