在Web開發(fā)中，我們不能忽視用戶輸入數(shù)據(jù)的合法性檢查。為了避免前端驗證過于繁瑣而導致后端受到不必要的損失，我們可以使用插件來方便地進行前端驗證。本文將介紹一款Vue正則驗證插件。

這款插件的名字叫做vue-validators，它是一個輕量級的正則表達式驗證插件。它能夠方便地載入到Vue.js項目中，同時也適用于原生JavaScript項目。它是通過Vue.js自定義指令的方式對輸入框進行驗證。

Vue.directive('validators', {
bind: function (el, binding, vnode) {
var v = vnode.context[binding.expression];
if (v === null || typeof v === 'undefined') {
console.error('v-model is not found when using v-validators');
} else {
el.addEventListener('blur', function(){
var value = el.value;
var type = binding.arg;
var result = validator[type].test(value);
if(!result){
alert('invalid input');
vnode.context[binding.expression] = ''; // clear value
}
});
}
}
});

這里我們可以簡單地解釋一下自定義指令的使用方法。Vue.js支持自定義指令，開發(fā)者可以定義自己的指令，并將其綁定在某個DOM元素上。當指定的DOM元素在HTML中被渲染時，指令函數(shù)就會被執(zhí)行。

在本例中，我們定義了一個名為validators的指令，并通過bind函數(shù)指定了它的行為。當輸入框失去焦點時，指令函數(shù)就會被觸發(fā)。我們將輸入框的內容與指令參數(shù)進行匹配（目前僅支持手機號碼和電子郵件地址的驗證），若驗證失敗則清空輸入框。

var validator = {
email: /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,
phone: /^1(3|4|5|6|7|8|9)\d{9}$/
};

在這里，我們定義了兩個常用的正則表達式，分別用于驗證電子郵件和手機號碼。使用時，只需要將相應的鍵值對綁定在Vue實例中即可。

var app = new Vue({
el: '#app',
data: {
email: '',
phone: ''
}
});

在HTML中，只需使用v-model指令將數(shù)據(jù)綁定在相應的輸入框中，然后添加v-validators即可。

Email:
Phone:

使用Vue正則驗證插件，能夠極大地簡化表單驗證的代碼量。同時，通過自定義指令也可以更加靈活地滿足不同的驗證需求。