摘要:介紹在后端項目里比如我們的框架對于表單驗證有自己的一套機制他將驗證集成在我們只需要在我們的方法中依賴注入我們自己實例化后的驗證類當然也可以直接去在方法里去驗證表單數據而在我們的前端的項目里也就是在我們的項目里也有比較好的驗證解決方案也就是這
介紹
在后端項目里 比如我們的Laravel框架 對于表單驗證有自己的一套validation機制 他將驗證集成在FormRequest
我們只需要在我們的方法中依賴注入我們自己實例化后的驗證類 當然也可以直接去在方法里去驗證表單數據
而在我們的前端的項目里 也就是在我們的vue項目里 也有比較好的驗證解決方案 也就是這的vuelidate
1.安裝和我們安裝前端包一樣 在項目終端執行:
$ npm install vuelidate --save
安裝完成后和我們去使用vuex一樣 在main.js去引入聲明這個package:
import Vue from "vue" import Vuelidate from "vuelidate" Vue.use(Vuelidate)
當然你也可以在需要用到驗證的組件里去引用一個相對小的版本:
import { validationMixin } from "vuelidate" var Component = Vue.extend({ mixins: [validationMixin], validation: { ... } })
如果你偏好通過require這樣的形式 你也可以這樣引入:
const { validationMixin, default: Vuelidate } = require("vuelidate") const { required, minLength } = require("vuelidate/lib/validators")2.使用
其實使用起來真的很方便 下面舉例來說就是在我的項目里的使用
1.注冊驗證在用戶注冊時 我們通常的需要處理的表單字段就是name,email,password,confirm_pwd
首先我在Register.vue這個組件文件中把基本的樣式結構寫好 這取決于每個人
接著是我們對表單數據的驗證:
這里是對用戶名和郵箱的驗證 就像之前提到的 我們先引入我們的驗證規則:
import { required,minLength,between,email } from "vuelidate/lib/validators"
因為我是對一個新用戶的注冊 所以我定義一個data
data(){ return{ newUser: { name:"", email:"", password:"", confirm_pwd:"" }, } },
接著去定義我們的驗證字段的規則:
validations: { newUser:{ name: { required, minLength: minLength(2) }, email: { required,email } } },
定義這些驗證規則之后 下面是我的html部分內容
每個人可以都不一樣 官方文檔上也給出了demo:
validationGroup: {{ $v.validationGroup }}
我們先這樣舉例 值得注意的是我們需要去知道他的$v.name里面的內容
也就是 $invalid $dirty $error $pending $each 這個value
特別的注意 $error里的解釋:It is a shorthand to $invalid && $dirty
也就是一個與的組合 你可以去試著改變這兩者的值 再去看$error的值
當然還有兩個重要的方法: $touch $reset 上面也有實例 說簡單點就是設置這個以及子節點的$dirty 為true或者false
而設置這個$dirty 再結合 $invalid就可以判斷驗證成功與否
$error 是由$dirty和$invalid共同決定的
在這里的驗證規則流程是這樣的 如果$error為true那么form-group會添加一個form-group--error這個class
只有在$error為true時 如果你不符合任意一個驗證規則 例如不符合required 那么就會提示驗證失敗
如果驗證錯誤就給出錯誤提示 這是我的錯誤樣式:
.form-group__message{ display: none; font-size: .95rem; color: #CC3333; margin-left: 10em; margin-bottom: 12px; } .form-group--error+.form-group__message { display: block; color: #CC3333; } .form-group--error input, .form-group--error input:focus, .form-group--error input:hover, .form-group--error textarea { border-color: #CC3333; }2.密碼驗證
密碼驗證其實和上面的差不多 只不過他的驗證規則時通過 sameAs 來進行驗證的
3.組合驗證除了上面這些還有一個組合驗證 也就是如果任意一個不符合驗證規則就不通過 這個還是挺常用的
我們可以在驗證字段這樣去組合:
validations: { flatA: { required }, flatB: { required }, forGroup: { nested: { required } }, validationGroup: ["flatA", "flatB", "forGroup.nested"] }
如果任意一個就是FlatA flatB forGroup其中一個不符合驗證規則 那么$v.validationGroup.$error就是false
4.異步驗證特別是在驗證唯一性的時候 我們肯定會遇到這樣的一個場景:
就比如我們的郵箱 如果已經注冊過這個郵箱了 那么再用這個郵箱去注冊顯然不是我們想要的
還有就是我們登錄時我們需要去核對我們的用戶的密碼
這邊我給出的實例就是對于用戶名的注冊 如果已經注冊了就會提示已經注冊過
完全支持async/await語法。它與Fetch API結合使用也很出色 那么我們可以通過后端API提供的結果可以進行判斷
我們可以去增加我們唯一性的驗證:
name: { required, minLength: minLength(4), async isUnique (value) { if (value === "") return true const response = await fetch(`http://localhost:8000/api/unique/name/${value}`) return Boolean(await response.json()) } },
這里我現在本地測試 通過Laravel作為后端來提供的數據校驗 實際項目中的話可以再結合數據庫
//用戶驗證路由 Route::group(["prefix"=>"unique","middleware"=>["api","cors"]], function () { Route::get("/name/{value}",function(Request $request,$value){ if($value==="gavin"){ return response()->json(false); } return response()->json(true); }); });
如果我們去注冊 gavin這個用戶就會提示該昵稱已經被注冊 因為在用戶名我增加了isUnique驗證
顯示結果應該是這樣的:
同樣的我們不僅可以使用它提供給我們的驗證規則 我們也可以自定義驗證規則并與之前的進行組合
官方給出了一個簡單實例:
export default value => { if (Array.isArray(value)) return !!value.length return value === undefined || value === null ? false : !!String(value).length }相關網址
github地址
package官網
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/22473.html
摘要:介紹在實現基本的驗證之后我們需要去真正實現項目中的注冊登錄以及我們的驗證流程有的具體的代碼我也會放到我的上面后端以及數據準備對于前端的請求以作為后端項目需要對數據進行處理和相應的反饋我們可以先去創建在項目終端生成后就去定義好字段信息 介紹 在實現vuelidate基本的驗證之后 我們需要去真正實現項目中的注冊登錄以及我們的驗證流程 有的具體的代碼我也會放到我的gist上面 后端api以...
摘要:無論是開發新手還是經驗豐富的老手,我們都喜歡開源軟件包。所幸的是,隨著社區的不斷壯大,每天都會出現一些很好的軟件包。在下文中,我們將推薦一些非常好用的開源庫是一個非常易用的漸進式框架,用于構建用戶界面。的一個極簡主義的深色設計系統。 無論是開發新手還是經驗豐富的老手,我們都喜歡開源軟件包。對于開發者來說,如果沒有這些開源軟件包,很難想象我們的生活會變得多么疲憊不堪,而且靠咖啡度日也會成...
摘要:此方法可適用于普通頁面,也可以是其他,使用相關樣式即可。下面效果是橫向滾動,也可以使用修改為垂直滾動。 此方法可適用于普通html頁面,也可以是其他,使用相關css樣式即可。下面效果是橫向滾動,也可以使用overflow-y: scroll; 修改為垂直滾動。 主要代碼部分: {{item.so...
摘要:網上看了一些文章,一般都是把封裝好的格式的文件發布到,感覺不太像一般組件的封裝形式,故特意書寫此文,希望能幫助到各位碼友。本文以封裝一個分頁組件為例,把它生成目標文件,生成壓縮包測試,并發布到。修改輸出文件到下,生成文件名為。 網上看了一些文章,一般都是把封裝好的.vue格式的文件發布到npm,感覺不太像一般組件的封裝形式,故特意書寫此文,希望能幫助到各位碼友。 本文以封裝一個分頁...
閱讀 2066·2021-09-22 15:54
閱讀 1830·2021-09-04 16:40
閱讀 854·2019-08-30 15:56
閱讀 2623·2019-08-30 15:44
閱讀 2150·2019-08-30 13:52
閱讀 1120·2019-08-29 16:35
閱讀 3340·2019-08-29 16:31
閱讀 2562·2019-08-29 13:48