Activity 3: Add Form Validation using Vue
本页目录· 14 条
3.1 删除之前在表单中添加的所有 HTML 验证
Code
3.2 在 <script setup> 中定义错误对象
在 Form.vue 的 <script setup> </script> 中，我们先定义一个对应的对象来存储表单中的所有错误，如下所示：
const errors = ref({ ... })：我们声明一个名为errors的常量，并使用ref()为其分配一个ref式引用。ref 函数由 Vue.js 提供，它使errors对象具有响应式，这意味着 Vue 将跟踪其更改并相应地更新 UI。{ username: null, password: null, resident: null, gender: null, reason: null }：这是一个对象，包含与我们要验证的每个表单字段对应的键。初始情况下，所有值均设置为null，表示这些字段中没有错误。
3.3 定义用户名验证函数 validateName
const validateName = (blur) => { ... }： 此行声明了一个名为validateName的函数，该函数接受一个参数blurblur是一个布尔值，指示验证是否由用户离开（模糊）输入字段触发。if (formData.value.username.length < 3) { ... }： 在函数内部，我们检查用户输入的用户名的长度是否小于 3 个字符。formData.value.username 从我们的反应式formData对象访问用户名formData.value.username当前值。if (blur) errors.value.username = "Name must be at least 3 characters";： 如果用户名少于 3 个字符，且验证是由用户离开输入字段时触发的（blur为 true），我们会在errors.value.username中设置相应的错误消息。此消息将显示，告知用户用户名太短。else { errors.value.username = null; }： 如果用户名长度至少为 3 个字符，我们会通过将errors.value.username设置为null来清除所有先前的错误消息。这表示用户名有效。
3.4 修改表单中的 Username 输入框
@blur="() => validateName(true)"：这是一个 Vue.js 事件指令。它监听blur事件，该事件在用户离开（失去焦点）输入字段时发生。触发此事件后，它会调用带有参数truevalidateName函数，表示验证是由 blur 事件触发的。@input="() => validateName(false)"：这是另一个 Vue.js 事件指令。它监听input事件，该事件会在输入字段的值发生变化时触发（例如，用户输入内容时）。触发此事件后，它会调用带有参数false的validateName函数，表示验证是由 input 事件触发的。<div v-if="errors.username" class="text-danger">{{ errors.username }}</div>：此div元素有条件地显示一条错误消息。v-if指令检查在errors.username中是否存储了错误消息。如果存在，则渲染此div并在其中显示错误消息。Bootstrap 中的text-danger类将文本着色为红色，表示出现错误。
3.5 修改 submitForm 函数
最后，我们需要在 week3 定义的 submitForm 函数中添加 validateName 函数
以及增加clearForm 函数
validateName(true)：该函数首先调用validateName，并传入参数true。这将触发对用户名字段的验证，具体来说，该验证是由表单提交（或 blur 事件）触发的。validateName 函数检查用户名是否符合要求的条件（例如，长度至少为 3 个字符）。如果用户名无效，则会在validateName中设置errors.value.username的错误消息。if (!errors.value.username) { ... }：此行检查用户名是否没有错误消息。如果errors.value.username为null或空字符串（表示用户名有效），则条件!errors.value.username的计算结果为true。如果用户名无效（即，errors.value.username包含错误消息），则条件计算结果为false，并且不会执行if语句中的代码块。
3.6 打开页面测试
输入少于 3 个字符的用户名并点击提交按钮
3.7 添加密码验证函数 validatePassword
我们为表单输入字段“密码”添加另一个验证函数。由于它非常复杂，因此该函数会比 validateName 函数稍微复杂一些
const minLength = 8：设置密码的最小长度要求const hasUppercase = /[A-Z]/.test(password)：使用正则表达式检查密码是否至少包含一个大写字母const hasLowercase = /[a-z]/.test(password)：使用正则表达式检查密码是否至少包含一个小写字母const hasNumber = /\d/.test(password)：使用正则表达式检查密码是否至少包含一个数字const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password)：使用正则表达式检查密码是否至少包含一个特殊字符
3.8 修改表单中的 Password 输入框
3.9 修改 submitForm
3.10 测试密码验证
打开我们的用户信息表单页面并输入一个有效的用户名但使用不同的无效密码 ，页面将如下所示