最全组件库实战 教你如何设计Web世界中的表单验证(3)，2024年最新计算机网络相关面试题

做了那么多年开发，自学了很多门编程语言，我很明白学习资源对于学一门新语言的重要性，这些年也收藏了不少的Python干货，对我来说这些东西确实已经用不到了，但对于准备自学Python的人来说，或许它就是一个宝藏，可以给你省去很多的时间和精力。

别在网上瞎学了，我最近也做了一些资源的更新，只要你是我的粉丝，这期福利你都可拿走。

我先来介绍一下这些东西怎么用，文末抱走。

---

（1）Python所有方向的学习路线（新版）

这是我花了几天的时间去把Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。

最近我才对这些路线做了一下新的更新，知识体系更全面了。

（2）Python学习视频

包含了Python入门、爬虫、数据分析和web开发的学习视频，总共100多个，虽然没有那么全面，但是对于入门来说是没问题的，学完这些之后，你可以按照我上面的学习路线去网上找其他的知识资源进行进阶。

（3）100多个练手项目

我们在看视频学习的时候，不能光动眼动脑不动手，比较科学的学习方法是在理解之后运用它们，这时候练手项目就很适合了，只是里面的项目比较多，水平也是参差不齐，大家可以挑自己能做的项目去练练。

（4）200多本电子书

这些年我也收藏了很多电子书，大概200多本，有时候带实体书不方便的话，我就会去打开电子书看看，书籍可不一定比视频教程差，尤其是权威的技术书籍。

基本上主流的和经典的都有，这里我就不放图了，版权问题，个人看看是没有问题的。

（5）Python知识点汇总

知识点汇总有点像学习路线，但与学习路线不同的点就在于，知识点汇总更为细致，里面包含了对具体知识点的简单说明，而我们的学习路线则更为抽象和简单，只是为了方便大家只是某个领域你应该学习哪些技术栈。

（6）其他资料

还有其他的一些东西，比如说我自己出的Python入门图文类教程，没有电脑的时候用手机也可以学习知识，学会了理论之后再去敲代码实践验证，还有Python中文版的库资料、MySQL和HTML标签大全等等，这些都是可以送给粉丝们的东西。

这些都不是什么非常值钱的东西，但对于没有资源或者资源不是很好的学习者来说确实很不错，你要是用得到的话都可以直接抱走，关注过我的人都知道，这些都是可以拿到的。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

// 判断是否是邮箱的格式
const emailReg = /^[a-zA-Z0-9.!# %&’\*+/=?^\_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)\* /

export default defineComponent({
name: ‘App’,
components: {
GlobalHeader,
ValidateInput
},
setup () {
const emailRules: RulesProp = [
{ type: ‘required’, message: ‘电子邮箱不能为空’ },
{ type: ‘email’, message: ‘请输入正确的电子邮箱格式’ }
]
const emailRef = reactive({
val: ‘’,
error: false,
message: ‘’
})
const validateEmail = () => {
if (emailRef.val.trim() === ‘’) {
emailRef.error = true
emailRef.message = ‘can not be empty’
} else if (!emailReg.test(emailRef.val)) {
emailRef.error = true
emailRef.message = ‘should be valid email’
}
}
return {
user: currentUser,
emailRef,
validateEmail,
emailRules
}
}
})

现在，我们在浏览器来看下它好不好用。**具体效果如下：**


![抽象验证规则](https://img-blog.csdnimg.cn/e8e02e6178d849718db20d9acec5a82d.gif#pic_center)


大家可以看到，经过抽离后的验证规则，也正确的显示了最终的验证效果。课后呢，大家可以继续对 `RuleProp` 的 `type` 进行扩展，比如多多加一个 `range` 功能等等。


到了这一步，我们对验证规则已经进行了简单的抽离。那接下来要做的事情就是，让父组件 `App.vue` 可以获取到子组件 `ValidateInput.vue` 中 `input` 框的值，对其进行数据绑定。


### 4. v-model


说到 `input` ，大家首先想到的可能是 `v-model` 。我们先来看下 `vue2` 和 `vue3` 在双向绑定方面的区别：

<input type=“checkbox” checked=“val” @change=“”>

h(Comp, { modelValue: foo, 'onUpdate: modelValue': value => (foo = value) })

对于 `vue2` 的双向绑定来说，主要有以下槽点：


* 比较繁琐，需要新建一个 `model` 属性；
* 不管如何，都只能支持一个 `v-model` ，没办法双向绑定多个值；
* 写法比较让人难以理解。


基于以上 `vue2` 的几个槽点，现在我们用 `vue3` 来对这个组件的 `input` 值进行绑定，手动对其处理更新和事件发送。


首先我们在子组件 `ValidateInput.vue` 中进行处理，处理数据更新和事件发送。**具体代码如下：**

接下来，我们在 `App.vue` 中对其进行使用，**具体代码如下：**

邮箱地址 {{emailVal}}

现在，我们来看下数据的值是否成功被绑定。**具体效果如下：**


![v-model绑定值](https://img-blog.csdnimg.cn/84c609408fb64c6f8d062833bff321fe.gif#pic_center)


大家可以看到，数据已经直接的被父组件给获取到并且也成功的绑定了。


### 5. 使用$attrs支持默认属性


上面我们基本上完成了整个组件的基本功能，现在，我们要来给它设置默认属性，也就是平常我们使用的 `placeholder` 。如果我们直接在 `<validate-input />` 组件中绑定 `placeholder` ，那么默认地，会直接绑定到它的**父组件**上面去。因此呢，我们要禁止掉这种行为，让绑定后的 `placeholder` 给相应的放置在 `input` 元素上。


那这一块内容呢，涉及到的就是 `vue3` 的 `$attrs` ， `$attrs` 可以让组件的根元素不继承 `attribute` ，并且可以手动决定这些 `attribute` 赋予给哪个元素。具体可查看官方文档：[禁用 Attribute 继承](https://bbs.csdn.net/topics/618317507)


下面，我们来实现这一块的功能。


首先是子组件 `ValidateInput.vue` ，**具体代码如下：**

之后是父组件 `App.vue` ，**具体代码如下：**

邮箱地址

密码

从上面的代码中我们可以了解到，通过 `inheritAttrs: false` 和 `$attrs` ，实现了我们想要的效果。


我们现在来看下浏览器的**显示结果：**


![使用$sttrs支持默认属性](https://img-blog.csdnimg.cn/dc0ad9b90bcb45bd9103a8cb49fbeade.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pif5pyf5LiA56CU56m25a6k,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)


## 💭二、验证表单ValidateForm


### 1. 组件需求分析


`ValidateInput` 除了基本的功能外，还可以进行功能扩散。比如，自定义校验、更多事件、更多不同的验证元素。


那么下面，我们要来设计整个**验证表单**，也就是 `ValidateForm` 组件，并且将 `ValidateInput` 给对应的使用到其中。


我们先来分析下这个 `ValidateForm` 都有哪些内容。**先看下图：**


![ValidateForm分析](https://img-blog.csdnimg.cn/9b55811c721346588a9dca1a85287f40.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pif5pyf5LiA56CU56m25a6k,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)


先看**第一部分**，我们首先把前面我们封装的 `ValidateInput` 给放进去，进行语义化包裹。


**第二部分**，我们可以对提交的按钮进行自定义化，比如提交的文字是怎么样的，提交的按钮又是怎么样的。


**第三部分**，我们需要有一个确定的事件来触发最后的结果，那么我们就在 `ValidateForm` 中，获取最后的结果。


**第四部分**，算是一个隐藏功能，也是这个组件的一个难点，即获取每个 `ValidateForm` 包裹下的 `ValidateInput` 的验证结果。


ok，到这里，我们就简单的对 `ValidateForm` 进行一个分析，那么下面我们将一步步的来对其进行代码设计。


### 2. 使用插槽 slot


首先，我们要先将提交按钮，做成动态的。一开始初始化一个值，之后呢，可以**动态的改变按钮的文字和事件**。那这个要用到的就是 `vue` 的中**具名插槽** 。


我们先在 `vue3` 项目下的 `src|components` 定义一个子组件，命名为 `ValidateForm.vue` 。现在我们来设计它，**具体代码如下：**

继续，我们在 `App.vue` 中使用子组件 `ValidateForm.vue` 。**具体代码如下：**

对于以上代码，我们来做个简单的分析：


* 子组件通过 `emits` 来确定要发送给父组件的事件名称，之后呢，父组件通过 `@事件名称` 的方式来进行调用。
* 使用**具名插槽slot**，来对提交表单部分进行动态控制。子组件使用 `slot` 进行初始化，父组件使用 `template` 进行动态修改。


### 3. 父子组件通讯


上面我们解决了第 `1` 点，组件需求分析中的前三部分。那么现在，我们来看第四点，如何在 `ValidateForm` 中完成所有 `ValidateInput` 的验证。


我们先来完善父组件 `ValidateForm.vue` 的功能。**具体代码如下：**

在上面的代码中，我们使用 `mitt` 库创建了一个事件监听器 `emitter` ，供给它的子组件 `ValidateInput.vue` 使用。同时，创建了一个 `formSubmit` 事件，用于给它的父组件 `App.vue` 使用。


接着我们来完善子组件 `ValidateInput.vue` 的功能。**具体代码如下：**