vue的rules表單驗證

2021-10-02 04:15:10 字數 884 閱讀 7412

在前端頁面開發中,經常需要用到表單驗證啊什麼的,現在試試vue提供的表單驗證(有可能是element-ui的,我不太清楚)。

首先,看一下效果

怎麼樣,感覺還可以吧。ok,讓我們看一下實現流程。

1.自定義驗證方法

驗證規則需要自己定義,當然,如果預設只需要判空的話,完全不用理會,可以直接上,此處,我是新建乙個***validate.js***,存放驗證規則方法,**如下:

//驗證手機號

export function isphone(rule, value, callback)

if (value.length < 11)

let pattern = /^1[345789]\d$/;

if(pattern.test(value))

return callback(new error('輸入的手機號錯誤'))

}

然後呢,在需要使用表單驗證的地方做如下改動:

在標籤定義***:rules=「sendrules」***規則(就是起個名字)

在標籤新增***prop=「telephone」***,注意:屬性prop中的值需要跟需要驗證的表單v-model的值一樣

獲取驗證碼

}s後重新獲取

下一步返回

引入剛剛定義的驗證方法

import  from "../utils/validate";
在dada中定義並使用

validator是驗證規則,如果不寫的話,預設驗證是否為空

data() ]},

}}

Vue使用rules對錶單字段進行校驗

歡迎一起討論 geooo的個人部落格 環境 基於 vue elementui el input el form item el input el form item el input el form item el input el form item el form 建立乙個約束函式 valida...

vue表單驗證元件 v verify plugin

版本已更新至2.0 說明 github npm npm install vue verify plugin 提交驗證之後的錯誤儲存在 vm.verify.errors 中,可自行列印出 vm.verify.errorarray 儲存上一次驗證的錯誤 配置傳入乙個物件 自定義驗證方法 blur boo...

Vue表單驗證控制項vuelidate

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