溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文開篇第一句話，想引用魯迅先生《祝福》里的一句話，那便是：“我真傻，真的，我單單知道后端整天都是CRUD，我沒想到前端整天都是Form表單”。這句話要從哪里說起呢？大概要從最近半個月的“全棧工程師”說起。項目上需要做一個城市配載的功能，顧名思義，就是通過框選和拖拽的方式在地圖上完成配載。博主選擇了前后端分離的方式，在這個過程中發現：首先，只要有依賴jQuery的組件，譬如Kendoui，即使使用了Vue，依然需要通過jQuery去操作DOM。其次，只有有通過Rozar生成的DOM，譬如HtmlHelper，Vue的雙向綁定就突然變得尷尬起來，更不用說，Rozar中的@語法和Vue中的@指令相互沖突的問題，原本可以直接用v-for生成列表，因為使用了HtmlHelper，突然一下子變得厭惡起來，雖然Rozar語法非常強大，可我依然沒有在JavaScript里寫C#的熱情，因為實在太痛苦啦Orz……
所以，想做好前后端分離，首先需要分離出一套前端組件庫，做不到這一點，前后端分離就無從談起，就像我們公司的項目，即使框架切換到.NET Core，可是在很長的一段時間里，我們其實還是再寫MVC，因為所有的組件都是后端提供的HtmlHelper/TagHelper這種形式。我這次做項目的過程中，其實是通過jQuery實現了一部分組件，正因為如此，一個在前后端不分離時非常容易實現的功能，在前后端分離以后發現缺好多東西，就比如最簡單的表單驗證功能，即便你是在做一個新項目，為了保證產品在外觀上的一致性，你還是得依賴老項目的東西，所以，這篇博客主要想說說前后端分離以后，Vue的時代怎么去做表單的驗證。因為我不想測試同事再給我提Bug，問我為什么只有來自后端接口的驗證，而沒有來自前端頁面的驗證。我希望，在寫下這篇博客之前，我可以實現和老項目一模一樣的表單驗證。如同CRUD之于后端，80%的前端都是在寫Form表單，所以，這個事情還是挺有意思的。
最簡單的表單驗證
OK，作為國內最接“地氣”的前端框架，Vue的文檔可以說是相當地“親民”啦！為什么這樣說呢，因為其實在官方文檔中，尤大已經提供了一個表單驗證的示例，這個示例讓我想起給某銀行做自動化工具時的情景，因為這兩者都是采用MVVM的思想，所以，理解起來是非常容易的，即：通過一個列表來存儲錯誤信息，而這個錯誤信息會綁定到視圖層，所以，驗證的過程其實就是向這個列表里添加錯誤信息的過程。我們一起來看這個例子：
<div>
<h3>你好，請登錄</h3>
<div>
<form id="loginFrom">
<div>
<label>郵箱</label>
<input type="text" class="form-control" id="inputEmail3" placeholder="Email" v-model="email">
</div>
</div>
<div>
<label>密碼</label>
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" v-model="password">
</div>
<div>
<button type="button" class="btn btn-default login" v-on:click="login()">登錄</button>
</div>
<div v-if="errorList.length > 0">
<div class="alert alert-danger" role="alert">{{errorList.join(';')}}</div>
</div>
</form>
</div>
</div>
<script>
var vm = new Vue({
el: '#loginFrom',
data: {
email: "",
password: "",
errorList: []
},
methods: {
validate: function () {
this.errorList = []
if (this.email == '') {
this.errorList.push('請輸入郵箱');
} else {
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if (!reg.test(this.email)) {
this.errorList.push('請輸入有效的郵箱');
}
}
if (this.password == '') {
this.errorList.push('請輸入密碼');
} else {
if (this.password.length < 6) {
this.errorList.push('密碼長度不得少于6位');
}
}
return this.errorList.length <= 0;
},
login: function () {
if (this.validate()) {
alert('登錄成功');
}
}
}
});
</script>
為了排除無關內容對大家的影響，寫這個例子的時候，博主排除了一切復雜的HTML結構和CSS樣式，經過簡單潤色以后，這個例子的效果展示如下，果然GUI滿足了人們顏控的一面，可讓這個世界高速運行的是CLI，Bootstrap是博主這種“全棧工程師”的最愛之一。這種驗證方式簡直是人類本能的反應，可這恰好是最糟糕的一個例子，因為這個代碼完全沒法復用，可以想象得到，如果再繼續增加針對密碼強度，譬如大小寫、數字等等的驗證，這個代碼會混亂成什么樣子，所以，這是最簡單的表單驗證，同樣是最糟糕的表單驗證。
基于jQuery的表單驗證
其實，如果不是因為老項目依賴jQuery，而新項目在某些地方又需要和老項目保持一致，有誰會喜歡在Vue的世界里使用jQuery呢？因為數據驅動和事件驅動，真的是兩種不同的思想，我就見過因為監聽不到某個事件而花費一整天時間的人……所以，這里使用jQuery的表單驗證插件jQuery Validation，目的只有一個，即實現博主對自己的承諾，做一個和老項目一模一樣的表單驗證。官方這個示例最大的問題是，它的檢驗邏輯擴展性比較差，后端同學對這個應該有所體會啦，譬如實際業務中常常有郵箱、手機號、非空、數字、正則等等的驗證規則，而后端常常采用基于Attribute的驗證或者是FluentValidation這樣的庫，所以，核心問題是，能不能定義相應的驗證規則。接下來，我們通過jQuery的表單驗證插件來實現驗證。
通常情況下，jQuery Validation支持面向控件和面向代碼兩種驗證方式。所謂面向控件，就是指在控件里添加類似required、email、range等等的擴展屬性，jQuery Validation內置了十余種標準的驗證規則，基本可以滿足我們的日常使用。而面向代碼，就是通過JavaScript來定義驗證規則，這就非常符合Vue數據驅動的風格了，因為在JavaScript里一切皆是對象，而這些對象可以作為Vue中的數據來使用。自然而然地，在第一個示例的基礎上，我們可以非常容易地擴展出基于jQuery的表單驗證：
var vm = new Vue({
el:'#loginFrom',
data:{
email:"",
password:"",
validators:{
rules: {
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6,
}
},
messages:{
email:{
required:"請輸入郵箱",
email:"請輸入有效的郵箱"
},
password:{
required:"請輸入密碼",
minlength:"密碼長度不得少于6位"
}
}
}
},
mounted:function(){
$('#loginFrom').validate(this.validators);
}
});
對于當前表單loginFrom，其驗證規則為validators，它完全參照jQuery Validation的API文檔而來，具體大家可以從jQuery Validation的文檔來做進一步了解。這里唯一看起來不爽的就是#loginFrom，因為它和整個Vue看起來格格不入。不過，像博主目前項目的處境，如果老項目里使用jQuery來對表單進行驗證，而使用Vue開發的新項目要兼容老項目的設計風格，使用jQuery有什么不可以呢？不得不說，Vue作為一個漸進式的開發框架，真正照顧了各個"年齡"段的前端工程師。使用jQuery Validation以后的表單驗證效果如下：
通過jQuery Validation，我們或許能感覺到一點不一樣的地方，那就是表單驗證其實還是蠻有意思的哈。也許是因為我原本是一個無聊的人，所以看到一點新的東西就覺得有趣。就像我雖然在提交數據時在后端做了校驗，可犧牲的其實是整個前端的使用體驗。而如果在前端對數據進行校驗，是在輸入過程中校驗還是在輸入完成校驗，是通過表單自帶的提交功能還是自己發起一個AJAX請求，這里面的確是有非常多的細節支撐的。第一種方案不支持遠程校驗，這更加能說明校驗本身要考慮的不單單只有前端了，同理，有了前端的校驗，不代表后端可以不做校驗。前端時間有人在知乎上提問，大意是說前端該不該完全信任后端返回的數據，嚴格來說，我們不應該信任任何人提供的數據，而這就是校驗這件事情本身的意義。
基于Vue的表單驗證
OK，如果說前面的兩種校驗是因為我們有一點歷史包袱，那么，接下來，我們將嘗試采用更“現代化”的表單驗證方式。通過Vue文檔中關于數據校驗這一節的內容，我們了解到官方推薦的兩個表單驗證插件是vuelidate和VeeValidate，而實際上這篇博客中的第一個例子，就是由文檔中的例子演化而來。我個人比較喜歡后者，所以，下面我們將使用這個插件來完成第三個例子。首先 ，我們通過Vue-Cli創建一個Vue項目，然后安裝下面vee-validate和vue-i18n兩個插件：
npm install vee-validate@2.0.0 --save npm install vue-i18n
注意到這里指定了版本號，這是因為最新的3.x超出了我這個新人的接受范圍，一句話，太難了！接下來，我們在入口文件main.js中添加下面的代碼，目的是啟用這兩個插件：
import VueI18n from 'vue-i18n';
import VeeValidate from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN'
//啟用Vue國際化插件
Vue.use(VueI18n)
//配置VeeValidate
const i18n = new VueI18n({
locale: 'zh_CN',
})
Vue.use(VeeValidate, {
i18n,
i18nRootKey: 'validation',
dictionary: {
zh_CN
}
});
接下來，編寫一個單文件組件LoginForm.vue:
<!-- template of LoginForm -->
<template>
<div class="container">
<h3 class="text-center">你好，請登錄</h3>
<div class="row">
<form class="form-horizontal col-md-offset-4 col-md-4" id="loginFrom">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">郵箱</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" name="email" placeholder="Email" v-model="email" v-validate="'required|email'" data-vv-as="郵箱"/>
<p class="alert alert-danger" role="alert" v-show="errors.has('email')">{{ errors.first('email') }}</p>
</div>
</div>
<div class="form-group" name="password" rules="required">
<label for="inputPassword3" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" name="password" placeholder="Password" v-model="password" v-validate="'required|min:6'" data-vv-as="密碼"/>
<p class="alert alert-danger" role="alert" v-show="errors.has('password')">{{ errors.first('password') }}</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" />記住密碼
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default login" v-on:click="login()">登錄</button>
</div>
</div>
</form>
</div>
</div>
</template>
<!-- script of LoginForm -->
<script>
export default {
name: "LoginForm",
components: {},
data: () => ({
email: "",
password: ""
}),
methods: {
login: function() {
}
}
};
</script>
<!-- style of LoginForm -->
<style scoped>
.login {
color: white;
height: 38px;
width: 300px;
background-color: #2b669a;
}
</style>
可以看到，我們在關鍵的兩個input控件上添加了v-validate和data-vv-as這兩個屬性。比如我們這里需要驗證用戶輸入的郵箱是否合法、郵箱是否為空，那么我們就可以使用下面的語法：
<input type="text" class="form-control" id="email" name="email" placeholder="Email" v-model="email" v-validate="'required|email'" data-vv-as="郵箱"/>
<p class="alert alert-danger" role="alert" v-show="errors.has('email')">{{ errors.first('email') }}</p>
這些語法在Vue中被稱為指令，而data-vv-as則是HTML5中的一個特性，用來給提示信息中的字段起一個別名。實際上，這個插件里同樣內置了一批常見的校驗規則。當控件中的值不滿足校驗條件時，就會在errors中產生錯誤信息，所以，我們根據錯誤信息中是否包含指定字段來決定要不要展示錯誤信息，這就是這個插件的作用。運行這個例子，我們會得到下面的結果。
既然提到這類表單驗證最難的地方在于擴展性，那么下面我們再來看看如何擴展一個新的校驗規則，這里以最常見的手機號校驗為例, 個人以為這是這個插件最為強大的地方：
Validator.extend('isMobile', {
messages: {
zh_CN: field => field + '必須是11位手機號碼'
},
validate: value => {
return value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
}
})
相信通過今天這篇博客，大家應該對Vue里的表單驗證有一點心得了。這類驗證的庫或者框架其實非常多，整合到Vue中要做的工作無外乎寫一個插件，在控件觸發相關事件或者表單提交的時候進行驗證。作為一個Vue的新人，這個過程可謂是路漫漫其修遠。你大概想不到，我是在凌晨加班加到凌晨兩點半的情況下做完這幾個示例的，最近這兩三個月里加的班比我過去三年都多，這到底是好事還是壞事呢？有時候不知道自己還能不能堅持下去，往事已矣，人難免會感到迷茫的吧！
本文小結
這篇博客主要通過三個示例分享了Vue下表單校驗的實現，而促使博主對這一切進行研究的原始動力，則是源于一個實際工作中通過Vue開發的新項目。前后端要不要分離、項目里要不要繼續使用jQuery、該不該頻繁地操作DOM，這其實是毫無關聯地三件事情，而這種事情90%的人是完全不關心的，就像有一種看起來相當“成年人”的做法，出了事情第一時間不是去糾結誰的過錯，而是問能不能馬上解決以及解決問題需要多長時間。這看起來好像一點問題都沒有，可不去在意事件本身對錯的人，是因為這些問題不需要他去處理，利益相關和責任相關是完全不一樣的，因為你不能一出問題全部都找到程序員這里，這項目又不是程序員一個人的。我關心這些無關緊要的問題，純粹是因為我對自己做的東西有一種感情，我想做好它而已，我希望自己是個純粹的人，而且可以一直純粹下去，晚安！
以上所述是小編給大家介紹的Vue快速實現通用表單驗證功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
