Vue3+TS实现自定义input组件的验证功能
本文摘要：前言关于input的组件，其中有一个必不可少的属性就是输入验证，这篇文章教大家如何给自己定义的input组件添加验证，以邮箱输入框为例，大家学会了可以自行拓展创建组件新建一个组件，创建基本代码这里定义的emailReg是邮箱规范验证的正则表达式
......
前言
关于input的组件，其中有一个必不可少的属性就是输入验证，这篇文章教大家如何给自己定义的input组件添加验证，以邮箱输入框为例，大家学会了可以自行拓展
创建组件
- 新建一个组件，创建基本代码
这里定义的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>- 定义interface，这里type我就写required和email两种，后续属性可以自己扩展。message为string类型。定义RulesProp并将它导出
interface RuleProp {
type: "required" | "email"
message: string
}
export type RulesProp = RuleProp[]- 然后开始定义props：第一个属性rules，array类型，这里使用as进行类型断言为上面的RulesProp类型
props: {
rules: Array as PropType<RulesProp>
},- 下面就在setup中创建响应式对象和回调：
setup(props, context) {
const inputRef = reactive({
val: "",
error: false,
message: ""
})
const validateInput = () => {
}
return passed
})
inputRef.error = !allPassed
}
}写 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
- 先导入刚刚写的组件并在components中注册
import ValidateInput, { RulesProp } from "./components/VaildateInput.vue"- 在setup中创建一个emailRules，里面两条属性，第一个required是不能为空的，email是必须为邮箱格式。最后然后return导出
const emailRules: RulesProp = [
{ type: "required", message: "电子邮箱地址不能为空" },
{ type: "email", message: "请输入正确的电子邮箱格式" }
]- 然后就页面渲染，大家可以随意，我这里采用的是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的校验规则还可以有很多能拓展的地方，大家可以自己去完善
