Vue快速實(shí)現(xiàn)通用表單驗(yàn)證功能

  
你好，請(qǐng)登錄
  

    

      

        郵箱
        
        
      
      

        密碼
        
      
      

        登錄
      
      

        
{{errorList.join(';')}}
      
    
  

為了排除無關(guān)內(nèi)容對(duì)大家的影響，寫這個(gè)例子的時(shí)候，博主排除了一切復(fù)雜的HTML結(jié)構(gòu)和CSS樣式，經(jīng)過簡(jiǎn)單潤色以后，這個(gè)例子的效果展示如下，果然GUI滿足了人們顏控的一面，可讓這個(gè)世界高速運(yùn)行的是CLI，Bootstrap是博主這種“全棧工程師”的最愛之一。這種驗(yàn)證方式簡(jiǎn)直是人類本能的反應(yīng)，可這恰好是最糟糕的一個(gè)例子，因?yàn)檫@個(gè)代碼完全沒法復(fù)用，可以想象得到，如果再繼續(xù)增加針對(duì)密碼強(qiáng)度，譬如大小寫、數(shù)字等等的驗(yàn)證，這個(gè)代碼會(huì)混亂成什么樣子，所以，這是最簡(jiǎn)單的表單驗(yàn)證，同樣是最糟糕的表單驗(yàn)證。

基于jQuery的表單驗(yàn)證

其實(shí)，如果不是因?yàn)槔享?xiàng)目依賴jQuery，而新項(xiàng)目在某些地方又需要和老項(xiàng)目保持一致，有誰會(huì)喜歡在Vue的世界里使用jQuery呢？因?yàn)閿?shù)據(jù)驅(qū)動(dòng)和事件驅(qū)動(dòng)，真的是兩種不同的思想，我就見過因?yàn)楸O(jiān)聽不到某個(gè)事件而花費(fèi)一整天時(shí)間的人……所以，這里使用jQuery的表單驗(yàn)證插件jQuery Validation，目的只有一個(gè)，即實(shí)現(xiàn)博主對(duì)自己的承諾，做一個(gè)和老項(xiàng)目一模一樣的表單驗(yàn)證。官方這個(gè)示例最大的問題是，它的檢驗(yàn)邏輯擴(kuò)展性比較差，后端同學(xué)對(duì)這個(gè)應(yīng)該有所體會(huì)啦，譬如實(shí)際業(yè)務(wù)中常常有郵箱、手機(jī)號(hào)、非空、數(shù)字、正則等等的驗(yàn)證規(guī)則，而后端常常采用基于Attribute的驗(yàn)證或者是FluentValidation這樣的庫，所以，核心問題是，能不能定義相應(yīng)的驗(yàn)證規(guī)則。接下來，我們通過jQuery的表單驗(yàn)證插件來實(shí)現(xiàn)驗(yàn)證。

通常情況下，jQuery Validation支持面向控件和面向代碼兩種驗(yàn)證方式。所謂面向控件，就是指在控件里添加類似required、email、range等等的擴(kuò)展屬性，jQuery Validation內(nèi)置了十余種標(biāo)準(zhǔn)的驗(yàn)證規(guī)則，基本可以滿足我們的日常使用。而面向代碼，就是通過JavaScript來定義驗(yàn)證規(guī)則，這就非常符合Vue數(shù)據(jù)驅(qū)動(dòng)的風(fēng)格了，因?yàn)樵贘avaScript里一切皆是對(duì)象，而這些對(duì)象可以作為Vue中的數(shù)據(jù)來使用。自然而然地，在第一個(gè)示例的基礎(chǔ)上，我們可以非常容易地?cái)U(kuò)展出基于jQuery的表單驗(yàn)證：

var vm = new Vue({
  el:'#loginFrom',
  data:{
    email:"",
    password:"",
    validators:{
      rules: {
        email: {
          required: true,
          email: true
        },
        password: {
          required: true,
          minlength: 6,
        }
      },
      messages:{
        email:{
          required:"請(qǐng)輸入郵箱",
          email:"請(qǐng)輸入有效的郵箱"
        },
        password:{
          required:"請(qǐng)輸入密碼",
          minlength:"密碼長度不得少于6位"
        }
      }
    }
  },
  mounted:function(){
    $('#loginFrom').validate(this.validators);
  }
});

對(duì)于當(dāng)前表單loginFrom，其驗(yàn)證規(guī)則為validators，它完全參照jQuery Validation的API文檔而來，具體大家可以從jQuery Validation的文檔來做進(jìn)一步了解。這里唯一看起來不爽的就是#loginFrom，因?yàn)樗驼麄€(gè)Vue看起來格格不入。不過，像博主目前項(xiàng)目的處境，如果老項(xiàng)目里使用jQuery來對(duì)表單進(jìn)行驗(yàn)證，而使用Vue開發(fā)的新項(xiàng)目要兼容老項(xiàng)目的設(shè)計(jì)風(fēng)格，使用jQuery有什么不可以呢？不得不說，Vue作為一個(gè)漸進(jìn)式的開發(fā)框架，真正照顧了各個(gè)"年齡"段的前端工程師。使用jQuery Validation以后的表單驗(yàn)證效果如下：

通過jQuery Validation，我們或許能感覺到一點(diǎn)不一樣的地方，那就是表單驗(yàn)證其實(shí)還是蠻有意思的哈。也許是因?yàn)槲以臼且粋€(gè)無聊的人，所以看到一點(diǎn)新的東西就覺得有趣。就像我雖然在提交數(shù)據(jù)時(shí)在后端做了校驗(yàn)，可犧牲的其實(shí)是整個(gè)前端的使用體驗(yàn)。而如果在前端對(duì)數(shù)據(jù)進(jìn)行校驗(yàn)，是在輸入過程中校驗(yàn)還是在輸入完成校驗(yàn)，是通過表單自帶的提交功能還是自己發(fā)起一個(gè)AJAX請(qǐng)求，這里面的確是有非常多的細(xì)節(jié)支撐的。第一種方案不支持遠(yuǎn)程校驗(yàn)，這更加能說明校驗(yàn)本身要考慮的不單單只有前端了，同理，有了前端的校驗(yàn)，不代表后端可以不做校驗(yàn)。前端時(shí)間有人在知乎上提問，大意是說前端該不該完全信任后端返回的數(shù)據(jù)，嚴(yán)格來說，我們不應(yīng)該信任任何人提供的數(shù)據(jù)，而這就是校驗(yàn)這件事情本身的意義。

基于Vue的表單驗(yàn)證

OK，如果說前面的兩種校驗(yàn)是因?yàn)槲覀冇幸稽c(diǎn)歷史包袱，那么，接下來，我們將嘗試采用更“現(xiàn)代化”的表單驗(yàn)證方式。通過Vue文檔中關(guān)于數(shù)據(jù)校驗(yàn)這一節(jié)的內(nèi)容，我們了解到官方推薦的兩個(gè)表單驗(yàn)證插件是vuelidate和VeeValidate，而實(shí)際上這篇博客中的第一個(gè)例子，就是由文檔中的例子演化而來。我個(gè)人比較喜歡后者，所以，下面我們將使用這個(gè)插件來完成第三個(gè)例子。首先 ，我們通過Vue-Cli創(chuàng)建一個(gè)Vue項(xiàng)目，然后安裝下面vee-validate和vue-i18n兩個(gè)插件：

npm install vee-validate@2.0.0 --save
npm install vue-i18n

注意到這里指定了版本號(hào)，這是因?yàn)樽钚碌?.x超出了我這個(gè)新人的接受范圍，一句話，太難了！接下來，我們?cè)谌肟谖募?code>main.js中添加下面的代碼，目的是啟用這兩個(gè)插件：

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
  }
});

接下來，編寫一個(gè)單文件組件LoginForm.vue:

可以看到，我們?cè)陉P(guān)鍵的兩個(gè)input控件上添加了v-validate和data-vv-as這兩個(gè)屬性。比如我們這里需要驗(yàn)證用戶輸入的郵箱是否合法、郵箱是否為空，那么我們就可以使用下面的語法：

{{ errors.first('email') }}

這些語法在Vue中被稱為指令，而data-vv-as則是HTML5中的一個(gè)特性，用來給提示信息中的字段起一個(gè)別名。實(shí)際上，這個(gè)插件里同樣內(nèi)置了一批常見的校驗(yàn)規(guī)則。當(dāng)控件中的值不滿足校驗(yàn)條件時(shí)，就會(huì)在errors中產(chǎn)生錯(cuò)誤信息，所以，我們根據(jù)錯(cuò)誤信息中是否包含指定字段來決定要不要展示錯(cuò)誤信息，這就是這個(gè)插件的作用。運(yùn)行這個(gè)例子，我們會(huì)得到下面的結(jié)果。

既然提到這類表單驗(yàn)證最難的地方在于擴(kuò)展性，那么下面我們?cè)賮砜纯慈绾螖U(kuò)展一個(gè)新的校驗(yàn)規(guī)則，這里以最常見的手機(jī)號(hào)校驗(yàn)為例, 個(gè)人以為這是這個(gè)插件最為強(qiáng)大的地方：

Validator.extend('isMobile', {
 messages: {
  zh_CN: field => field + '必須是11位手機(jī)號(hào)碼'
 },
 validate: value => {
  return value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
 }
})

相信通過今天這篇博客，大家應(yīng)該對(duì)Vue里的表單驗(yàn)證有一點(diǎn)心得了。這類驗(yàn)證的庫或者框架其實(shí)非常多，整合到Vue中要做的工作無外乎寫一個(gè)插件，在控件觸發(fā)相關(guān)事件或者表單提交的時(shí)候進(jìn)行驗(yàn)證。作為一個(gè)Vue的新人，這個(gè)過程可謂是路漫漫其修遠(yuǎn)。你大概想不到，我是在凌晨加班加到凌晨兩點(diǎn)半的情況下做完這幾個(gè)示例的，最近這兩三個(gè)月里加的班比我過去三年都多，這到底是好事還是壞事呢？有時(shí)候不知道自己還能不能堅(jiān)持下去，往事已矣，人難免會(huì)感到迷茫的吧！

本文小結(jié)

這篇博客主要通過三個(gè)示例分享了Vue下表單校驗(yàn)的實(shí)現(xiàn)，而促使博主對(duì)這一切進(jìn)行研究的原始動(dòng)力，則是源于一個(gè)實(shí)際工作中通過Vue開發(fā)的新項(xiàng)目。前后端要不要分離、項(xiàng)目里要不要繼續(xù)使用jQuery、該不該頻繁地操作DOM，這其實(shí)是毫無關(guān)聯(lián)地三件事情，而這種事情90%的人是完全不關(guān)心的，就像有一種看起來相當(dāng)“成年人”的做法，出了事情第一時(shí)間不是去糾結(jié)誰的過錯(cuò)，而是問能不能馬上解決以及解決問題需要多長時(shí)間。這看起來好像一點(diǎn)問題都沒有，可不去在意事件本身對(duì)錯(cuò)的人，是因?yàn)檫@些問題不需要他去處理，利益相關(guān)和責(zé)任相關(guān)是完全不一樣的，因?yàn)槟悴荒芤怀鰡栴}全部都找到程序員這里，這項(xiàng)目又不是程序員一個(gè)人的。我關(guān)心這些無關(guān)緊要的問題，純粹是因?yàn)槲覍?duì)自己做的東西有一種感情，我想做好它而已，我希望自己是個(gè)純粹的人，而且可以一直純粹下去，晚安！

以上所述是小編給大家介紹的Vue快速實(shí)現(xiàn)通用表單驗(yàn)證功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！