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 type RulesProp = RuleProp[]

3. 然后开始定义props：第一个属性rules，array类型，这里使用as进行类型断言为上面的RulesProp类型

props: {
    
    
    rules: Array as PropType<RulesProp>
  },

4. 下面就在setup中创建响应式对象和回调：

setup(props, context) {
    
    
    const inputRef = reactive({
    
    
      val: '',
      error: false,
      message: ''
    })
    const validateInput = () => {
    
    
      
          }
          return passed
        })
        inputRef.error = !allPassed
      }
    }

5. 写 validateInput 这个函数，就是表单验证的流程：

• 先判断props.rules是否存在，因为rules是一个数组，所以我们这里使用数组上的every方法来进行验证流程（该方法会返回一个布尔值，只有每一项都是true的时候才会通过，只要有一个false就返回false。）
• 在every创建一个临时变量passed = true，也就是每一个rule的临时变量
• 规则在以后可能会有多种为方便扩展，所以这里采用switch case的结构
• 第一个case是required，输入框的值不为空则可以通过
• 第二个case是email，判断它是否符合我们上面写的邮箱判断正则

const validateInput = () => {
    
    
      if (props.rules) {
    
     // 判断props.rules是否存在
        const allPassed = props.rules.every(rule => {
    
     // 使用every方法
          let passed = true // 创建临时变量
          inputRef.message = rule.message
          switch (rule.type) {
    
    
            case 'required':
              passed = (inputRef.val.trim() !== '')// trim是去掉左右空格
              break
            case 'email':
              passed = emailReg.test(inputRef.val)
              break
            default:
              break
          }
          return passed
        })
        inputRef.error = !allPassed  // 用来显示错误信息
      }
    }

App.vue

1. 先导入刚刚写的组件并在components中注册

import ValidateInput, {
    
     RulesProp } from './components/VaildateInput.vue'

2. 在setup中创建一个emailRules，里面两条属性，第一个required是不能为空的，email是必须为邮箱格式。最后然后return导出

const emailRules: RulesProp = [
      {
    
     type: 'required', message: '电子邮箱地址不能为空' },
      {
    
     type: 'email', message: '请输入正确的电子邮箱格式' }
    ]

3. 然后就页面渲染，大家可以随意，我这里采用的是bootstrap的样式，附上代码：
   下面class="form-text"的div是用来展示错误信息的，v-if绑定emailRef.error，判断不通过就会显示错误的信息emailRef.message

<div class="mb-3">
      <label for="for-label">邮箱地址</label>
      <validate-input :rules="emailRules"></validate-input>
</div>
<div class="form-group">
	  <label for="exampleInputEmail1">邮箱地址</label>
	  <input
	  type="email" class="form-control"
	  id="exampleInputEmail1" placeholder="Email"
	  v-model="emailRef.val"
	  @blur="validateEmail"
	  >
  	 <div class="form-text" v-if="emailRef.error">{
    
    {
    
    emailRef.message}}</div>
</div>

效果展示

不输入信息时：

输入信息不符合邮箱规范时：

关于input的校验规则还可以有很多能拓展的地方，大家可以自己去完善