詳解vue驗證器（vue-validator）的使用

官方文件：http://vuejs.github.io/vue-validator/zh-cn/index.html

github專案網址：https:// github.com/vuejs/vue-validator

單獨使用vue-validator的方法見官方文檔，本文結合vue-router使用。

安裝驗證器

不加入自訂驗證器或無需全域使用的公用驗證器，在main.js中安裝驗證器，使用CommonJS 模組規格, 需要明確的使用 Vue.use() 安裝驗證器元件。

import Validator from 'vue-validator'
Vue.use(Validator)

與 vue-router 同時使用，必須在呼叫 router#map, router#start 等實例方法前安裝驗證。 

若要自訂驗證器，請建立一個js文件，在該文件中安裝驗證器元件。例如：validation.js

import Vue from 'vue'
import Validator from 'vue-validator'
Vue.use(Validator)
//自定义验证器

自訂驗證器

官方提供的api如下

input[type="text"]
input[type="radio"]
input[type="checkbox"]
input[type="number"]
input[type="password"]
input[type="email"]
input[type="tel"]
input[type="url"]
select
textarea

但是以上的不一定要滿足我們的需求，這時就需要用到另一個全域api，用來註冊和取得全域驗證器。

Vue.validator( id, [definition] )

範例  定義validation.js  內容如下

import Vue from 'vue'
import Validator from 'vue-validator'
Vue.use(Validator)
//自定义验证器
//添加一个简单的手机号验证 
//匹配0-9之间的数字,并且长度是11位
Vue.validator('tel', function (val) {
  return /^[0-9]{11}$/.test(val)
});
//添加一个密码验证
//匹配6-20位的任何字类字符，包括下划线。与“[A-Za-z0-9_]”等效。
Vue.validator('passw', function (val) {
  return /^(\w){6,20}$/.test(val)
});

使用驗證器

驗證器語法

  
    

   不得少于3个字符
   不得大于15个字符
    
 

預設情況下， vue-validator 會依照 validator 和 v-validate 指令自動進行驗證。然而有時我們需要關閉自動驗證，在有需要時手動觸發驗證。如果你不需要自動驗證，可以透過 initial 屬性或 v-validate 驗證規則來關閉自動驗證。

如下：

  
  

 不得少于3个字符
 不得大于15个字符
     

Terminal 指令問題

 範例：使用者註冊驗證

用了一個元件來顯示提示訊息

toast.vue

註冊用戶：假如我們需要填寫手機號碼和輸入兩次密碼

如果點擊下一步，會提示“請完善表單”，因為驗證不通過；若是文字方塊獲得焦點後失去焦點則會提示相應的錯誤訊息；若內容填寫正確，則會提示驗證通過並發送相應的請求。

效果如圖

相關推薦：

2020年前端vue面試題大匯總（附答案）

vue教學推薦：2020最新的5個vue.js影片教學精選

更多程式相關知識，請訪問：程式設計入門！ ！

以上是詳解vue驗證器（vue-validator）的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！