使用 Vue.js 进行自定义表单验证

简介

在这个项目中，你将学习如何使用Vue.js实现一个自定义表单验证器。自定义表单验证器允许你在用户提交表单之前验证表单字段并检查数据的有效性。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何实现 FormInput 组件，以便在输入字段的值发生变化时更新组件的 v-model 值。
• 如何实现 is_email 函数，根据特定规则验证电子邮件地址。
• 如何实现 validateForm 函数，根据定义的验证规则验证表单数据。

🏆 成果

完成这个项目后，你将能够：

• 在Vue.js中创建一个自定义表单验证器。
• 使用自定义验证规则验证表单字段。
• 处理表单验证错误并将其显示给用户。

Skills Graph

设置项目结构

在这一步中，你将设置项目文件和结构。请按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

├── components
│   ├── FormInput.js
│   └── FormValidator.js
├── css
├── index.html
├── js
│   └── util.js
└── lib
    └── vue.global.js

其中：

• index.html 是主页。
• css 是用于存储项目样式的文件夹。
• lib 是用于存储项目依赖项的文件夹。
• components/FormInput.js 是 input 组件。
• components/FormValidator.js 是表单验证器组件。
• js/util.js 是项目所需的实用函数。

点击WebIDE右下角的 Go Live 按钮来运行项目。

接下来，在VM顶部打开 “Web 8080” 并手动刷新以查看页面。

实现 FormInput 组件

在这一步中，你将学习如何实现 FormInput 组件，以便在输入字段的值发生变化时，更新 index.html 中该组件的 v-model 值。

1. 打开位于 components 目录下的 FormInput.js 文件。

2. 在 FormInput 组件的 setup 函数中，找到目标1的 TODO 部分。

3. 实现代码，以便在输入字段（类名为 form-input）的值发生变化时，触发一个事件来更新组件的 v-model 值。

   watch(inputValue, (newValue) => {
     emit("update:modelValue", newValue);
   });

   这段代码使用 watch 函数来观察响应式变量 inputValue 的变化。当值发生变化时，它会发出一个包含新值的事件，以更新父组件中的 v-model 绑定。

4. 保存对 FormInput.js 文件所做的更改。

实现 is_email 函数

在这一步中，你将学习如何在 util.js 文件中实现 is_email 函数来验证电子邮件地址。

1. 打开位于 js 目录下的 util.js 文件。

2. 在 is_email 函数中，找到目标2的 TODO 部分。

3. 根据以下要求实现验证电子邮件地址的逻辑：

   • 电子邮件地址必须在6到20个字符之间。
   • 电子邮件地址必须由用户名部分和域名部分组成，中间用 @ 符号分隔。
   • 用户名部分必须至少1个字符长，并且可以包含数字或字母。
   • 域名部分必须在中间包含一个 .，并且 . 之前的部分必须至少1个字符长，而 . 之后的部分必须是2到4个字母。

   以下是一个示例实现：

   const is_email = (val) => {
     const emailRegex = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+.[a-zA-Z]{2,4}$/;
     return emailRegex.test(val);
   };

4. 保存对 util.js 文件所做的更改。

实现 validateForm 函数

在这一步中，你将学习如何在 FormValidator.js 文件中实现 validateForm 函数来验证表单数据。

1. 打开位于 components 目录下的 FormValidator.js 文件。
2. 在 validateForm 函数中，找到目标3的 TODO 部分。
3. 根据提供的 formRules 对象实现验证表单数据的逻辑。验证应遵循以下规则：
   1. 如果 nickname 字段为空，在 errors 对象中添加一个键为 "nickname" 的错误消息。
   2. 对于 email 字段：
   • 如果字段为空，在 errors 对象中添加一个键为 "email" 的错误消息。
   • 如果电子邮件地址不符合规则或不在正确的长度范围内，在 errors 对象中添加一个键为 "email" 的错误消息。

以下是一个示例实现：

const validateForm = () => {
  return new Promise((resolve, reject) => {
    errors.value = {}; // 清除之前的错误消息

    // 验证昵称
    try {
      props.rules.nickname.map((item) => {
        item?.validator(null, props.formData.nickname, (err) => {
          if (err) {
            throw "nickname|" + err.message;
          }
        });
      });
    } catch (e) {
      const parseErr = e.split("|"),
        errKey = parseErr[0],
        errValue = parseErr[1];
      errors.value[errKey] = errValue;
    }

    // 验证电子邮件
    try {
      props.rules.email.map((item) => {
        if (item?.required) {
          if (props.formData.email == "") throw "email|" + item.message;
        }
        if (item?.type) {
          if (!validateByType(item.type, props.formData.email))
            throw "email|" + item.message;
          if (props.formData.email.length < 6) throw "email|" + item.message;
          if (props.formData.email.length > 20) throw "email|" + item.message;
        }
      });
    } catch (e) {
      const parseErr = e.split("|"),
        errKey = parseErr[0],
        errValue = parseErr[1];
      errors.value[errKey] = errValue;
    }

    if (hasErrors.value) {
      resolve(false); // 存在错误，验证失败
    } else {
      resolve(true);
    }

    emit("valid", errors.value);
  });
};

4. 保存对 FormValidator.js 文件所做的更改。

恭喜！你现在已经完成了自定义表单验证器的实现。现在你可以通过运行项目并与表单进行交互来测试应用程序。完成后的效果如下：

总结

恭喜！你已完成此项目。你可以在 LabEx 中练习更多实验以提升技能。