vue表單驗證元件 v verify plugin

2021-08-04 14:25:16 字數 1280 閱讀 8256

版本已更新至2.0 說明

github:

npm:

npm install vue-verify-plugin

提交

驗證之後的錯誤儲存在 vm.$verify.$errors 中,可自行列印出

vm.$verify.$errorarray 儲存上一次驗證的錯誤

配置傳入乙個物件

//自定義驗證方法

blur:bool //失去焦點時 是否開啟驗證

}

v-verify

在表單控制項元素上建立資料的驗證規則,他會自動匹配要驗證的值以及驗證的規則。

v-verify 修飾符說明

該指令最後乙個修飾符為自定義分組

//自定義teacher分組

v-verify.teacher

//自定義student分組

v-verify.student

//驗證時可分開進行驗證

//驗證student 分組

this.$verify.check("student")

//驗證teacher 分組

this.$verify.check("teacher")

//驗證所有

this.$verify.check();

v-verify指令也可使用 arg引數進行驗證分組

如果同時使用修飾符和arg分組 則arg會覆蓋修飾符分組

v-verify:student

//驗證student 分組

this.$verify.check("student")

v-remind 驗證錯誤提示

v-remind修飾符說明

.join 展示所有錯誤 用逗號隔開

v-verified (在2.0版本中 被v-remind替代)

v-verified 錯誤展示,當有錯誤時會展示,沒有錯誤時會加上style:none,缺省會展示該資料所有錯誤的第一條

該指令為語法糖(見示例)

v-verified 修飾符說明
.join 展示所有錯誤 用逗號隔開

預設驗證規則

提交

vue 表單驗證按鈕事件交由父元件觸發

vue 表單驗證按鈕事件交由父元件觸發,不直接再子元件上操作的方法 子元件 內容部分 子元件js部分 export default rulecustom methods else handlereset name 父元件 子元件 父元件js部分 import modalcontent from 子元...

Vue 元件 驗證props

本節需要基礎 vue 元件通訊 父傳子 props props主要作用是讓父元件傳值給子元件。普通的傳值方式做上面的鏈結有講到。props 引數名 普通傳值,可以把要傳的值放在乙個陣列裡,也可以放在乙個物件裡。props 引數1 引數2 引數n props 比如 props 也可以定義多種型別,只需...

Vue表單驗證控制項vuelidate

vuelidate控制項,可以方便的實現表單驗證功能。npm install vuelidate步驟一 main.js中引入vue touch 中引入 import vuelidate from vuelidate vue.use vuelidate 步驟二 引vue檔案中引入驗證項,如 impor...