表單驗(yàn)證可能具有挑戰(zhàn)性，但是此教程使用Vuelidate簡(jiǎn)化了該過(guò)程。 Vuelidate提供了一種簡(jiǎn)化的方法，最大程度地減少了複雜性並最大化靈活性。本教程提供了一個(gè)起點(diǎn)；您可以根據(jù)自己的特定需求進(jìn)行調(diào)整。對(duì)於那些喜歡快速實(shí)施的人來(lái)說(shuō)，結(jié)尾包括一個(gè)完整的工作示例。

對(duì)於那些想要更深入了解的人，讓我們從一個(gè)簡(jiǎn)單的場(chǎng)景開(kāi)始，然後逐漸建立一個(gè)更強(qiáng)大的例子。我們還將介紹如何在提交時(shí)有效顯示形式錯(cuò)誤。

基本示例：實(shí)時(shí)輸入反饋

讓我們探索Vuelate的功能。我們將創(chuàng)建一個(gè)validations對(duì)象的驗(yàn)證對(duì)象的數(shù)據(jù)結(jié)構(gòu)。一個(gè)基本示例：

數(shù)據(jù)： {
  姓名： ''
}，，
驗(yàn)證：{
  姓名： {
    必需的
  }
}

Vue DevTools將揭示包含驗(yàn)證信息的計(jì)算屬性$v要注意的關(guān)鍵方面： $v是一個(gè)緩存的計(jì)算屬性，可以增強(qiáng)性能。它包含嵌套對(duì)象：常規(guī)驗(yàn)證對(duì)象和特定於屬性的對(duì)象。該結(jié)構(gòu)允許訪問(wèn)整體和單個(gè)現(xiàn)場(chǎng)驗(yàn)證詳細(xì)信息。

在輸入輸入字段時(shí)觀察行為： $dirty指示該字段是否已與之相互作用； $model反映當(dāng)前輸入值； $error和$invalid表示錯(cuò)誤狀態(tài)（考慮到$invalid和$dirty $error ）。

設(shè)置Vuelidate並實(shí)施驗(yàn)證規(guī)則

讓我們創(chuàng)建一個(gè)實(shí)用的例子。我們將安裝Vuelidate並添加required和minLength驗(yàn)證規(guī)則。

首先，安裝vuelidate：

紗線添加Vuelidate

接下來(lái)，更新main.js ：

從“ vue”導(dǎo)入vue;
從“ Vuelidate”進(jìn)口vuelaties；
從'./app.vue'導(dǎo)入應(yīng)用程序;
從'./store'導(dǎo)入存儲(chǔ)；

vue.use（vuelidate）;
vue.config.productiontip = false

新Vue（{
 店鋪，
 渲染：h => h（app）
}）。 $ mount（'＃app'）

在您的組件中，導(dǎo)入驗(yàn)證器：

從'vuelidate/lib/validators'導(dǎo)入{必需，最低長(zhǎng)度}

將數(shù)據(jù)封裝在功能中以重複使用：

從'vuelidate/lib/validators'導(dǎo)入{必需，最低長(zhǎng)度}

導(dǎo)出默認(rèn){
 數(shù)據(jù)（） {
   返回 {
     formrespons：{
       姓名： ''，
     }
   }
 }，，
 驗(yàn)證：{
   formrespons：{
     姓名： {
       必需的，
       最小長(zhǎng)度：最小長(zhǎng)度（2）
     }，，
   }
 }
}

在模板中，將$v與v-model結(jié)合使用進(jìn)行數(shù)據(jù)綁定並顯示錯(cuò)誤消息：

<template>
  <div>
    <label for="fname">姓名*</label>
    <input type="text" v-model="$v.formResponses.name.$model" id="fname">
    <p class="error" v-if="!$v.formResponses.name.required">此字段是必需的</p>
    <p class="error" v-if="!$v.formResponses.name.minLength">字段必須至少具有{{$v.formresponses.name。 $ params.minlength.min}}字符。</p>
  </div>
</template>

<style scoped>
.error {
  color: red;
}
</style>

用v-model.lazy延遲驗(yàn)證

對(duì)於不那麼破壞性的用戶體驗(yàn)，使用v-model.lazy僅在輸入失去焦點(diǎn)後才觸發(fā)驗(yàn)證：

<input type="text" v-model.lazy="$v.formResponses.name.$model" id="fname">

創(chuàng)建自定義驗(yàn)證器

Vuelidate允許創(chuàng)建自定義驗(yàn)證器。讓我們構(gòu)建一個(gè)用於強(qiáng)密碼，並將其與sameAs集成以進(jìn)行密碼確認(rèn)。

將密碼字段添加到您的數(shù)據(jù)：

數(shù)據(jù)（） {
  返回 {
    formrespons：{
      名稱：null，
      電子郵件：null，
      密碼1：null，
      密碼2：null
    }
  };
}，，

創(chuàng)建自定義strongPassword驗(yàn)證器：

驗(yàn)證：{
  formrespons：{
    密碼1：{
      必需的，
      strongPassword ：（ password1）=> {
        return /[az ]/.test(password1）&& /[0-9 ]/.test(password1）&& /\ wmer.test（password1）&& password1.length> = 6;
      }
    }，，
    密碼2：{
      必需的，
      sameaspassword：sameas（'password1'）
    }
  }
}

將密碼字段和錯(cuò)誤消息添加到您的模板：

<label for="fpass1">密碼*</label>
<input type="password" v-model="$v.formResponses.password1.$model" id="fpass1">
<p class="error" v-if="!$v.formResponses.password1.required">此字段是必需的</p>
<p class="error" v-if="!$v.formResponses.password1.strongPassword">密碼必須至少包含一個(gè)小寫字母，一個(gè)數(shù)字，一個(gè)特殊字符，並且長(zhǎng)至少6個(gè)字符。</p>

<label for="fpass2">確認(rèn)密碼*</label>
<input type="password" v-model="$v.formResponses.password2.$model" id="fpass2">
<p class="error" v-if="!$v.formResponses.password2.required">此字段是必需的</p>
<p class="error" v-if="!$v.formResponses.password2.sameAsPassword">密碼不匹配。</p>

在接受驗(yàn)證

對(duì)於更清潔的方法，僅在提交表單時(shí)驗(yàn)證。使用$v.formResponses.$anyError檢查是否有任何錯(cuò)誤。

添加狀態(tài)變量：

數(shù)據(jù)（） {
  返回 {
    uistate：“提交不單擊”，
    錯(cuò)誤：false，
    formrespons：{
      // ...
    }
  }
}，，

添加一個(gè)提交按鈕並處理提交：

<button>提交</button>

subtform（）{
  this.errors =this。 $ v.formrespons. $ anyError;
  this.uistate ='提交單擊';
  如果（！this.errors）{
    //提交表格數(shù)據(jù)
    this.uistate ='提交表單';
  }
}，，

根據(jù)表單狀態(tài)顯示適當(dāng)?shù)南ⅲ?/p>

<p v-if="errors && uiState === 'submit clicked'">表格有錯(cuò)誤。請(qǐng)糾正它們並重新提交。</p>
<p v-else-if="uiState === 'form submitted'">表格成功提交！</p>

請(qǐng)記住，根據(jù)需要調(diào)整樣式以顯示最佳錯(cuò)誤消息。考慮使用專用庫(kù)進(jìn)行更複雜的形式管理。這種增強(qiáng)的方法提供了更具用戶友好的驗(yàn)證體驗(yàn)。感謝Damian Dulisz審查了本教程。

以上是在一個(gè)小時(shí)內(nèi)與Vuelidate的形式驗(yàn)證的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！