form驗證是網頁開發中必不可少的一部分。Vue為我們提供了很好的支持，特別是在動態表單驗證方面。Vue的form驗證讓我們比較輕松地實現對表單的動態實時驗證，從而使得表單數據的有效性得到了保障。下面我將結合實例，給大家詳細介紹Vue form動態驗證的具體實現方法。

驗證規則注冊

Vue.component('el-rule-name', {
template: '#el-rule-name',
props: {
// props 用于接收來自父組件的 data
data: {
type: Object,
default: function() {
return {rule: ''};
}
}
},
data: function() {
return {
// 組件內部的 data
rule: ''
};
},
created: function() {
// 從 props 賦值到組件內部的 data
this.rule = this.data.rule;
},
methods: {
validate: function(rule, value, callback) {
if (value) {
// 省略判斷規則的代碼
callback();
} else {
callback(new Error('不能為空'));
}
}
}
});

驗證規則綁定

驗證信息展示

提交表單

提交

至此，我們便用Vue的組件化優勢、運用Vue的計算屬性實時監聽表單輸入變化、綁定validationMixin的驗證方法、展示表單驗證信息、使用elementUI優化表單效果，完成了一個Vue動態實時表單驗證。