這篇文章主要為大家展示了“vue中vee validate表單校驗(yàn)的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue中vee validate表單校驗(yàn)的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、鳳臺(tái)網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為鳳臺(tái)等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

1.必填和長(zhǎng)度校驗(yàn)

直接采用v-validate屬性進(jìn)行配置，不同的校驗(yàn)采用 ‘|' 隔開。是否有報(bào)錯(cuò)根據(jù) errors.has('userName') 進(jìn)行判斷，‘userName'對(duì)應(yīng)的是表單的name屬性的值。

errors.first('userName)會(huì)展示表單校驗(yàn)中第一個(gè)錯(cuò)誤信息。

 
  用戶名
 
 
  
  {{ errors.first('userName') }}
 

結(jié)果如下：

從結(jié)果我們可以看到，校驗(yàn)的錯(cuò)誤信息是展示了，但是默認(rèn)都是英文的，這個(gè)可能有時(shí)跟我們實(shí)際開發(fā)的需求不是一致的。這個(gè)我們可以采用

vee-validate的國(guó)際化去進(jìn)行中文的展示。但是這里我要介紹的是另一種方式，如果是系統(tǒng)只需要支持一種語言，我覺得用這種方式就可以。

直接采用 errors.first('userName:required') 即 ‘字段名：校驗(yàn)規(guī)則'  的方式進(jìn)行判斷進(jìn)而展示對(duì)應(yīng)提示信息的方式。這個(gè)方式可以讓表單在對(duì)應(yīng)校驗(yàn)不通過時(shí)展示我們自己定義對(duì)應(yīng)的個(gè)性化提示信息。

優(yōu)點(diǎn)是：配置簡(jiǎn)單，方便實(shí)現(xiàn)個(gè)性化提示。

  用戶名


  
  用戶名為必填項(xiàng)
  用戶名的最小長(zhǎng)度為2
  用戶名的最大長(zhǎng)度為20

 2.異步校驗(yàn) 和延遲

異步校驗(yàn)，主要就是兩部分，一個(gè)是校驗(yàn)器的定義，一個(gè)是使用

定義部分：

import { Validator } from 'vee-validate';
const emailsDB = [
 'abcd@cc.com'
];
const isUnique = value => new Promise((resolve) => {
 setTimeout(() => {
  if (emailsDB.indexOf(value) === -1) {
   return resolve({
    valid: true
   });
  }

  return resolve({
   valid: false,
   data: {
    message: `${value} 已存在.`
   }
  });
 }, 200);
});
Validator.extend('unique', {
 validate: isUnique,
 getMessage: (field, params, data) => data.message
});

使用：

 
  郵箱
 
 
  
  重復(fù)
 

結(jié)果：

其中  data-vv-delay="1000"  就是延遲校驗(yàn)的使用。1000即1000毫秒

以下是幾個(gè)例子的完整代碼：

.form-label {
 text-align: right;
 padding-right: 10px;
}
.error {
 color: red;
}

以上是“vue中vee validate表單校驗(yàn)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！