Vue3+TS实现自定义input组件的验证功能

前言

关于input的组件，其中有一个必不可少的属性就是输入验证，这篇文章教大家如何给自己定义的input组件添加验证，以邮箱输入框为例，大家学会了可以自行拓展

创建组件

1. 新建一个组件，创建基本代码
   这里定义的emailReg是邮箱规范验证的正则表达式

<template>
  <h1>
  </h1>
</template>
<script lang="ts">
import {
    defineComponent, reactive, PropType } from 'vue'
const emailReg = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
export default defineComponent
	setup() {
   
	
	}
</script>

2. 定义interface，这里type我就写required和email两种，后续属性可以自己扩展。message为string类型。定义RulesProp并将它导出

interface RuleProp {
   
  type: 'required' | 'email'
  message: string
}
export