input输入框加验证规则组件（vue）

输入框组件（带验证规则）效果图：组件名：my-input可传参数type1input类型value默认值rule验证规则rule参数规则trigger事件名称（str）min最小值(number)max最大值 (number)required是否不能为空(str)reg正则表达式验证规则（//）num_message长度出错提示(str)req_message必传出错提示（str）re

coderlin_

8810人浏览 · 2020-12-11 15:46:23

coderlin_ · 2020-12-11 15:46:23 发布

输入框组件（带验证规则）
效果图：
在这里插入图片描述

组件名：my-input
可传参数

type1	input类型
value	默认值
rule	验证规则

rule参数	规则
trigger	事件名称（str）
min	最小值(number)
max	最大值 (number)
required	是否不能为空(str)
reg	正则表达式验证规则（//）
num_message	长度出错提示(str)
req_message	必传出错提示（str）
reg_message	正则匹配错误提示(str)

代码：
组件代码：在这里插入图片描述

外部引入组件代码：
在这里插入图片描述

尚在改进中，有不足请见谅

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^