十七、表单中的输入验证
在前一章中，我们讨论了保护页面以及创建登录表单和注册表单。 但是，我们没有编写任何可以防止用户输入无效输入的验证。
本章将为表单添加验证，这将改善用户使用表单时的体验。 让我们开始。
我们将涵盖以下议题:
- 安装输入验证库
- 在表单中使用验证器
技术要求
你需要 Visual Studio Code 来完成本章。
以下是本章已完成存储库的链接:https://github.com/PacktPublishing/ASP.NET-Core-and-Vue.js/tree/master/Chapter17/。
安装输入验证库
用户友好验证告知用户输入时字段无效的原因。 我们可以通过在表单的每个字段中编写一个验证器来从头构建它，并确保验证器是响应式的。 实现是可行的，但它需要大量的时间，并且代码的整洁程度将取决于开发人员。
那么，为什么不使用一个验证我们的库呢? 幸运的是，有几个 Vue.js 库用于验证，在本节中，我们将使用其中一个顶级库。
所以让我们安装一个输入验证库:
npm i vuelidate
vuelidate库是一个简单的基于模型的轻量级验证，我们可以将其用于我们的 Vue 应用。
现在，让我们在src/plugins文件夹中创建一个名为vuelidate.js的 JavaScript 文件，并应用以下代码:
import Vue from "vue";
import Vuelidate from "vuelidate";
Vue.use(Vuelidate);
前面的代码导入Vue和Vuelidate，然后将Vuelidate传递给Vue use方法。
接下来，我们用以下代码更新main.js:
import "./plugins/vuelidate";
让我们从刚才创建的文件中引入Vuelidate。 这是所有。
接下来，我们创建一个名为validators的文件夹，并在文件夹中创建一个名为index.js的 JavaScript 文件。 它应该像validators/index.js:
import { required, email, minLength } from "vuelidate/lib/validators";
export default {
login: {
email: { required, email },
password: { required, minLength: minLength(8) },
},
};
为了实现内聚性，我们在单独的文件中定义验证器。 我们有一个登录对象，它有一个电子邮件。 电子邮件是必需的，并且只能是电子邮件格式。 登录对象还包含一个密码对象，这也是必需的，至少 8 个字符。
简单易行，对吧? 现在让我们使用一些验证器。
在表单中使用验证器
在表单中使用验证器很容易，因为我们使用了一个npm库来验证表单，而且我们并不是在重复工作。
现在，让我们更新auth/views文件夹中的Login.vue页面:
import validators from "@/validators";
让我们导入已经创建的validators，然后在computed块中使用validators，如下所示:
computed: {
emailErrors() {
const errors = [];
if (!this.$v.login.email.$dirty) return errors;
!this.$v.login.email.email && errors.push("Must be
valid e-mail");
!this.$v.login.email.required && errors.push("E-mail
is required");
return errors;
},
passwordErrors() {
const errors = [];
if (!this.$v.login.password.$dirty) return errors;
!this.$v.login.password.required &&
errors.push("Password is required");
!this.$v.login.password.minLength &&
errors.push("Minimum characters is 8");
return errors;
},
},
validations: {
login: validators.login,
},
我们有一个针对电子邮件错误的computed方法。 初始化错误数组。 它检查email字段是否脏，意味着该字段的值发生了变化。 它还检查email字段是否无效。 emailErrors还检查邮件是否为空。
模式也与passwordErrors计算方法相同。 美元符号意味着属性对任何变化都是有反应的。
然后，我们声明一个带有login属性的对象的validations块，并将validators.login赋值给它。
下一步是用以下代码更新登录字段的v-text-field组件:
<v-text-field
label="E-mail"
v-model="login.email"
@input="$v.login.email.$touch()"
@blur="$v.login.email.$touch()"
:error-messages="emailErrors"
></v-text-field>
我们在前面的代码中添加了错误检查器。 错误检查器是反应性的; 我们一输入东西，它们就会运行，而我们的注意力就会分散。 :error-messages是来自 Vuetify 的一个指令，我们可以使用它来分配emailErrors的计算方法。 这很好，不是吗?
让我们也更新登录密码的v-text-field组件，如下所示:
<v-text-field
type="password"
label="Password"
hint="At least 8 characters"
counter
v-model="login.password"
@input="$v.login.password.$touch()"
@blur="$v.login.password.$touch()"
:error-messages="passwordErrors"
></v-text-field>
前面的代码将验证器附加到登录密码v-text-field。 我们使用的是带有值passwordErrors的:error-messages。
现在，运行应用，然后在登录表单中输入yoursuperhero，不完成电子邮件，然后在密码字段中添加两个字母:
图 17.1 -无效
图 17.1表明，没有@domain.com的yoursuperhero是无效的，同时两个应该是八个字母/数字的字母也是无效的。 字段从黑色变为红色，字段下面的红色文本表明验证器正在工作。
这很好。 现在我们有了一个概念证明，输入验证库正在工作。 让我们向其他表单添加更多的字段验证。
第一步是更新validators文件夹的index.js文件:
import {
required,
email,
minLength,
maxLength,
} from "vuelidate/lib/validators";
我们将maxLength添加到从vuelidate/lib/validators的现有导入中。
然后通过添加city、country和about来更新导出的对象:
export default {
login: {
email: { required, email },
password: { required, minLength: minLength(8) },
},
city: {
required,
maxLength: maxLength(90),
},
country: {
required,
},
about: {
required,
},
};
添加的大多数对象都是下面表单中的必需字段，我们将对其进行修正。
现在，用以下代码更新components文件夹的AddTourListForm.vue组件:
import validators from "@/validators";
让我们导入validators，然后添加一个带有错误检查方法的计算对象和验证对象，如下所示:
computed: {
cityErrors() {
const errors = [];
if (!this.$v.bodyRequest.city.$dirty) return errors;
!this.$v.bodyRequest.city.required &&
errors.push("City is required");
!this.$v.bodyRequest.city.maxLength &&
errors.push("Max length is 90");
return errors;
},
countryErrors() {
const errors = [];
if (!this.$v.bodyRequest.country.$dirty) return
errors;
!this.$v.bodyRequest.country.required &&
errors.push("Country is required");
// no need for max length because this is a dropdown
with options
return errors;
},
aboutErrors() {
const errors = [];
if (!this.$v.bodyRequest.about.$dirty) return errors;
!this.$v.bodyRequest.about.required &&
errors.push("About is required");
return errors;
},
},
validations: {
bodyRequest: {
// for brevity, please go to the github repo
},
},
我们有cityErrors计算方法，如果city字段为空且最大长度超过 90 个字符，则会增加一个错误。 虽然country字段只需要一个必需的验证，因为在下拉列表或自动补全组件中不需要最大长度，但是aboutErrors只检查字段是否为空。
同时，validations对象初始化一个bodyRequest对象，其属性来自validators/index.js文件。
现在，让我们通过编辑city输入的v-text-field来更新AddTourListForm.vue组件的template语法:
<v-text-field
label="City"
v-model="bodyRequest.city"
@input="$v.bodyRequest.city.$touch()"
@blur="$v.bodyRequest.city.$touch()"
:error-messages="cityErrors"
required
></v-text-field>
我们为:error-messages指令添加了cityErrors。 我们更新了@input和@blur事件。
我们还可以编辑template语法中的v-autocomplete组件，如下所示:
<v-autocomplete
:items="countryList"
label="Country"
v-model="bodyRequest.country"
@input="$v.bodyRequest.country.$touch()"
@blur="$v.bodyRequest.country.$touch()"
:error-messages="countryErrors"
required
></v-autocomplete>
前面的代码使用验证器和国家输入错误消息更新@input、@blur和:error-messages。
接下来，我们更新字段，实际上是文本区域，为about输入:
<v-textarea
label="About"
v-model="bodyRequest.about"
@input="$v.bodyRequest.about.$touch()"
@blur="$v.bodyRequest.about.$touch()"
:error-messages="aboutErrors"
required
></v-textarea>
在前面的代码中，让我们使用v-textarea组件中的计算错误和错误消息。 前面的代码还将验证附加到textarea。
现在，重新运行应用。
在City字段中写出 100 个字符的句子，选择一个国家，点击About文本区域，然后再点击City字段。 这是在我们的表单中创建一个示例条目，如下所示:
图 17.2 -新 Tour List 表单验证
图 17.2 显示Create New Tour List表单中的输入验证正在工作。 City字段中有错误，因为 City 的最大字符数为 90，而About字段为空。
活动
让我们通过完成 Register Form 的验证、AddTourPackageForm.vue的验证和UpdateTourPackageForm.vue的验证来测试您在 Vue.js 中的技能。
Vuelidate 的链接为https://vuelidate.js.org/。 还有另一个很好的输入验证库，您可能想要签出它。 该库名为VeeValidate(https://vee-validate.logaretm.com/v4)。 如果你打算使用 Vue.js 版本 3，我可以推荐 VeeValidate。 该库易于使用，并具有对开发人员友好的 api。 库还很好地集成了 Yup 验证，Yup 验证是用于验证的 JavaScript 模式构建器。
让我们总结一下你所学到的。
总结
让我们快速总结一下你在这一章中学到的东西来总结它。 您已经学习了如何安装 Vuelidate 并在 Vue 应用中设置它。 您还学习了如何使用 Vuelidate 在表单中创建输入验证，这为应用的表单提供了更好的可用性。
在下一章中，你会看到用 ASP 编写测试是多么重要，同时又是多么有趣.NET Core 应用。
版权属于：月萌API www.moonapi.com，转载请注明出处
