2024年Python最新组件库实战 教你如何设计Web世界中的表单验证，网易云java面试

最后

不知道你们用的什么环境，我一般都是用的Python3.6环境和pycharm解释器，没有软件，或者没有资料，没人解答问题，都可以免费领取（包括今天的代码），过几天我还会做个视频教程出来，有需要也可以领取~

给大家准备的学习资料包括但不限于：

Python 环境、pycharm编辑器/永久激活/翻译插件

python 零基础视频教程

Python 界面开发实战教程

Python 爬虫实战教程

Python 数据分析实战教程

python 游戏开发实战教程

Python 电子书100本

Python 学习路线规划

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

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

一个人可以走的很快，但一群人才能走的更远！不论你是正从事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` 的功能。**具体代码如下：**