在一个小时内与Vuelidate的形式验证

表单验证可能具有挑战性，但是此教程使用Vuelidate简化了该过程。 Vuelidate提供了一种简化的方法，最大程度地减少了复杂性并最大化灵活性。本教程提供了一个起点；您可以根据自己的特定需求进行调整。对于那些喜欢快速实施的人来说，结尾包括一个完整的工作示例。

对于那些想要更深入了解的人，让我们从一个简单的场景开始，然后逐渐建立一个更强大的例子。我们还将介绍如何在提交时有效显示形式错误。

基本示例：实时输入反馈

让我们探索Vuelate的功能。我们将创建一个validations对象的验证对象的数据结构。一个基本示例：

数据： {
  姓名： ''
}，，
验证：{
  姓名： {
    必需的
  }
}

Vue DevTools将揭示包含验证信息的计算属性$v要注意的关键方面： $v是一个缓存的计算属性，可以增强性能。它包含嵌套对象：常规验证对象和特定于属性的对象。该结构允许访问整体和单个现场验证详细信息。

在输入输入字段时观察行为： $dirty指示该字段是否已与之相互作用； $model反映当前输入值； $error和$invalid表示错误状态（考虑到$invalid和$dirty $error ）。

设置Vuelidate并实施验证规则

让我们创建一个实用的例子。我们将安装Vuelidate并添加required和minLength验证规则。

首先，安装vuelidate：

纱线添加Vuelidate

接下来，更新main.js ：

从“ vue”导入vue;
从“ Vuelidate”进口vuelaties；
从'./app.vue'导入应用程序;
从'./store'导入存储；

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

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

在您的组件中，导入验证器：

从'vuelidate/lib/validators'导入{必需，最低长度}

将数据封装在功能中以重复使用：

从'vuelidate/lib/validators'导入{必需，最低长度}

导出默认{
 数据（） {
   返回 {
     formrespons：{
       姓名： ''，
     }
   }
 }，，
 验证：{
   formrespons：{
     姓名： {
       必需的，
       最小长度：最小长度（2）
     }，，
   }
 }
}

在模板中，将$v与v-model结合使用进行数据绑定并显示错误消息：

<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延迟验证

对于不那么破坏性的用户体验，使用v-model.lazy仅在输入失去焦点后才触发验证：

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

创建自定义验证器

Vuelidate允许创建自定义验证器。让我们构建一个用于强密码，并将其与sameAs集成以进行密码确认。

将密码字段添加到您的数据：

数据（） {
  返回 {
    formrespons：{
      名称：null，
      电子邮件：null，
      密码1：null，
      密码2：null
    }
  };
}，，

创建自定义strongPassword验证器：

验证：{
  formrespons：{
    密码1：{
      必需的，
      strongPassword ：（ password1）=> {
        return /[az ]/.test(password1）&& /[0-9 ]/.test(password1）&& /\ wmer.test（password1）&& password1.length> = 6;
      }
    }，，
    密码2：{
      必需的，
      sameaspassword：sameas（'password1'）
    }
  }
}

将密码字段和错误消息添加到您的模板：

<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">密码必须至少包含一个小写字母，一个数字，一个特殊字符，并且长至少6个字符。</p>

<label for="fpass2">确认密码*</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>

在接受验证

对于更清洁的方法，仅在提交表单时验证。使用$v.formResponses.$anyError检查是否有任何错误。

添加状态变量：

数据（） {
  返回 {
    uistate：“提交不单击”，
    错误：false，
    formrespons：{
      // ...
    }
  }
}，，

添加一个提交按钮并处理提交：

<button>提交</button>

subtform（）{
  this.errors =this。$ v.formrespons. $ anyError;
  this.uistate ='提交单击';
  如果（！this.errors）{
    //提交表格数据
    this.uistate ='提交表单';
  }
}，，

根据表单状态显示适当的消息：

<p v-if="errors && uiState === 'submit clicked'">表格有错误。请纠正它们并重新提交。</p>
<p v-else-if="uiState === 'form submitted'">表格成功提交！</p>

请记住，根据需要调整样式以显示最佳错误消息。考虑使用专用库进行更复杂的形式管理。这种增强的方法提供了更具用户友好的验证体验。感谢Damian Dulisz审查了本教程。

以上是在一个小时内与Vuelidate的形式验证的详细内容。更多信息请关注PHP中文网其他相关文章！