Element表單驗證（2）

上篇講的是async-validator的基本要素，那麼，如何使用到element中以及怎樣優雅地使用，就在本篇。

上篇講到async-validator由3大部分組成

基本驗證流程如下

上面中的validator.validate對應element中的this.$refs[refname].validate，只不過被改裝過的。而且在element中定義的:model='form'，那個form就是source。source的欄位名，如source.name就是form.name，那麼只要在設定和source一樣的欄位名name，就可以匹配中的rules.name。

很重要的一點，rules.欄位名要和source.欄位名要一樣才會驗證。

export default 
}return }},
methods: 
// 驗證通過後的處理...})}
}}

上面中validate(callback)函式已經新增到form元素dom節點上的屬性中。然後上面還有乙個不好的一點。那就是規則的定義方式不夠靈活。

比如我有兩個字段firstname和lastname。firstname是必填的，而lastname是非必填的；且firstname長度要求大於1小於4而lastname要求大於1小於6。那麼就要寫兩個不同的規則，現在只是2個字段而已，沒什麼，如果有很多個不同要求的字段，那要寫很多個不同的規則，也要寫很多個規則？豈不是很煩？能不能復用？

rules三種定義方式

函式的方式很強大，如果需要用到options可以函式的方式，最常用的是物件和陣列的方式。現在推薦幾種復用的方法。

簡單的封裝一些常用的規則

// 返回乙個規則陣列，必填且字串長度在2~10之間
export const name = (msg, min = 2, max = 10, required = true) => ([
,  ~$個字元`, trigger: 'blur' }
])// 郵箱
export const email = (required = true) => ([
,  ])/* 自定義驗證規則 */
// 大於等於某個整數
const biggerandnum = num => (rule, v, cb) => 
if (v < num) `))
}  return cb()
}export const biggerint = (int, required = true) => ([
,  ])

封裝乙個專門建立規則的類，鏈式呼叫

export default class createrules 
need(msg = '必填', trigger = 'blur') )
return this
}  url(message = '不是合法的鏈結', trigger = 'blur') )
return this
}  get() 
}const createrules = new createrules()
//規則
const needurl = createrules.need().url().get()
const isurl = createrules.url().get()
// imgurl必填且是鏈結；href可選不填，如果填寫必須是鏈結
const rules = 
// deep rule 定義
// urls是陣列，長度大於1
// urls的元素是鏈結
const urls = ['', '']
const rules = 
}

Element表單驗證（2）

element有關表單驗證

element 多個表單同時驗證

element表單驗證的封裝

Element表單驗證（2）

element有關表單驗證

element 多個表單同時驗證

element表單驗證的封裝

相關推薦