Vue输入选择控件常用的校验格式

devtools/2025/3/23 0:05:58/

1.在lib目录下新建文件夹dic.js

javascript">// 空白数据的占位符
const PLACEHOLDER = '--'
// 时期格式
const FORMAT_DATETIME = 'YYYY-MM-DD HH:mm:ss'
const FORMAT_DATE = 'YYYY-MM-DD'
const FORMAT_MONTH = 'YYYY-MM'
const FORMAT_TIME = 'HH:mm:ss'
const FORMAT_HHMM = 'HH:mm'
const FORMAT_DATETIME_GCF = 'yyyy-MM-dd HH:mm:ss'
const FORMAT_DATE_GCF = 'yyyy-MM-dd'
const FORMAT_MONTH_GCF = 'yyyy-MM'
// 表单校验规则
const RULE_REQUIRED = {required: true,message: '此项为必填项',trigger: 'blur'
}
const RULE_SELECTED = {required: true,message: '此项为必选项',trigger: ['blur', 'change']
}
const RULE_REQUIRED_CHANGE = {required: true,message: '此项为必填项',trigger: 'change'
}
const RULE_REQUIRED_NUMBER = {required: true,message: '此项为必填项',trigger: 'blur',type: 'number'
}
const RULE_MUSTSELECT = {required: true,message: '请选择一项',trigger: 'blur'
}
const RULE_MUSTSELECT_NUMBER = {required: true,validator: (rule, value, callback) => {if (!value) {return callback(new Error('请选择一项'))} else {return callback()}},trigger: 'change'
}
const RULE_MUSTSELECT_ARRAY = {required: true,message: '此项为必填项',type: 'array',trigger: 'blur'
}
const RULE_INVALIDINPUT = {pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/,message: '此项需为字母开头,由字母、数字、下划线组成',trigger: 'blur'
}
const RULE_INVALIDSMALLINPUT = {pattern: /^[a-z][a-z0-9_]*$/,message: '此项需为小写字母开头,由小写字母、数字、下划线组成',trigger: 'blur'
}
const RULE_PASSWORD = {pattern: /^.*(?=.{8,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@+._#$%^&*? ]).*$/,message: '需至少包含以下4种字符:大、小写字母、数字、特殊字符, 长度大于等于8位',trigger: 'blur'
}
const RULE_CORRECTINPUT = {pattern: /^[a-zA-Z0-9_]*$/,message: '此项仅允许输入字母、数字、下划线',trigger: 'blur'
}
// 不允许输入大写字母
const RULE_CORRECTLOWERLETTER = {pattern: /^[a-z0-9_]*$/,message: '此项仅允许输入小写字母、数字、下划线',trigger: 'blur'
}
// 不允许输入大写字母
const RULE_LETTERFIRST = {pattern: /^[a-zA-Z][a-z0-9_]*$/,message: '此项仅允许输入小写字母、数字、下划线, 且必须由字母开头',trigger: 'blur'
}
// const RULE_SPECIALPARAMS = {
//     pattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]*$/,
//     message: '不能包含特殊字符',
//     trigger: 'blur'
// };
const RULE_SPECIALPARAMS = {pattern: /^((?![\\、@#$%^&*]).)*$/,message: '不能包含\\、@#$%^&*',trigger: 'blur'
}
const RULE_POSITIVEINTEGERONLY = {pattern: /^[1-9]\d*$/,message: '必须输入正整数',trigger: 'blur'
}
const RULE_INTEGERONLY = {pattern: /^[0-9]\d*$/,message: '必须输入整数',trigger: 'blur'
}
const RULE_LT10LETTERS = {max: 10,message: '最多不超过10个字',trigger: 'blur'
}
const RULE_LT32LETTERS = {max: 32,message: '最多不超过32个字',trigger: 'blur'
}
const RULE_LT64LETTERS = {max: 64,message: '最多不超过64个字',trigger: 'blur'
}
const RULE_LT100LETTERS = {max: 100,message: '最多不超过100个字',trigger: 'blur'
}
const RULE_LT200LETTERS = {max: 200,message: '最多不超过200个字',trigger: 'blur'
}
const RULE_LT127LETTERS = {max: 127,message: '最多不超过127个字',trigger: 'blur'
}
const RULE_LT128LETTERS = {max: 128,message: '最多不超过128个字',trigger: 'blur'
}
const RULE_NUM0TO4096 = {pattern: /^([0-9]|[1-9][0-9]|[1-9][0-9][0-9]|[1-3][0-9][0-9][0-9]|40[0-8][0-9]|409[0-6])$/,message: '请输入0到4096的数字',trigger: 'blur'
}
// 浮点数校验
const RULE_FLOAT = {pattern: /^(?:[0-9][0-9]*(?:\.[0-9]+)?|0\.(?!0+$)[0-9]+)$/,// pattern: /^(-\d+(\.\d+)?)|(0+(\.0+)?)$/,message: '请输入正确的浮点数或整数',trigger: 'blur'
}
const RULE_INCORRECTIDCARD = {pattern: /(^\d{15}$)|(^\d{17}(\d|X|x)$)/,message: '身份证格式错误',trigger: 'blur'
}
const RULE_INCORRECTIP = {required: true,pattern: /^(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)$/,message: 'IP格式错误',trigger: 'blur'
}
const RULE_INCORRECTPORT = {required: true,pattern: /(^[1-9]\d{0,3}$)|(^[1-5]\d{4}$)|(^6[0-4]\d{3}$)|(^65[0-4]\d{2}$)|(^655[0-2]\d$)|(^6553[0-5]$)/,message: '端口号必须为数字且应在1-65535之间',trigger: 'blur'
}
const RULE_CHINESE = {required: true,pattern: /[\u4e00-\u9fa5]/,message: '必须输入中文',trigger: 'blur'
}
const RULE_SELECTFILE = {required: true,message: '请选择文件',trigger: 'change'
}
const RULE_ENGLISH = {required: true,pattern: /^[^\u4e00-\u9fa5]+$/,message: '不能输入中文',trigger: 'blur'
}
const RULE_URLPATH = {required: true,pattern: /^\/[^\\]*$/,message: '以"/"开头且不含"\\"',trigger: 'blur'
}
const RULE_NOTOVER60 = {required: true,pattern: /^([1-9]|[1-5][0-9]|60)$/,message: '输入值必须为0-60的整数',trigger: 'blur'
}
// 只允许字母、数字
const RULE_AKSK = {required: true,pattern: /^[a-zA-Z0-9]*$/,message: '此项仅允许输入字母、数字',trigger: 'blur'
}
// 是否
const YES_OR_NO = {'0': '否','1': '是'
}
// 性别
const SEX = {'0': '未知','1': '男','2': '女'
}
// 年龄
const AGE = {'0': '未知','1': '少年','2': '青年','3': '中年','4': '老年'
}export {PLACEHOLDER,FORMAT_DATETIME,FORMAT_DATE,FORMAT_TIME,FORMAT_MONTH,FORMAT_HHMM,FORMAT_DATETIME_GCF,FORMAT_DATE_GCF,FORMAT_MONTH_GCF,RULE_PASSWORD,RULE_REQUIRED,RULE_REQUIRED_CHANGE,RULE_REQUIRED_NUMBER,RULE_MUSTSELECT_NUMBER,RULE_MUSTSELECT,RULE_MUSTSELECT_ARRAY,RULE_INVALIDINPUT,RULE_INVALIDSMALLINPUT,RULE_CORRECTINPUT,RULE_POSITIVEINTEGERONLY,RULE_LT10LETTERS,RULE_LT32LETTERS,RULE_LT64LETTERS,RULE_LT100LETTERS,RULE_LT200LETTERS,RULE_LT127LETTERS,RULE_LT128LETTERS,RULE_NUM0TO4096,RULE_INTEGERONLY,RULE_INCORRECTIDCARD,RULE_INCORRECTIP,RULE_INCORRECTPORT,RULE_SPECIALPARAMS,YES_OR_NO,SEX,AGE,RULE_CHINESE,RULE_ENGLISH,RULE_URLPATH,RULE_NOTOVER60,RULE_FLOAT,RULE_LETTERFIRST,RULE_CORRECTLOWERLETTER,RULE_SELECTFILE,RULE_AKSK,RULE_SELECTED
}

2. 组件中使用

javascript">import { RULE_INCORRECTIP, RULE_INCORRECTPORT } from '@/lib/dic'<el-form-item label="服务器" prop="ip"><el-inputv-model.trim="form.ip"placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="实例端口号" prop="port"><el-inputv-model.number="form.port"placeholder="请输入"></el-input>
</el-form-item>rules: {ip: [RULE_INCORRECTIP],port: [RULE_INCORRECTPORT]
}


http://www.ppmy.cn/devtools/169275.html

相关文章

Web爬虫利器FireCrawl:全方位助力AI训练与高效数据抓取。本地部署方式

开源地址&#xff1a;https://github.com/mendableai/firecrawl 01、FireCrawl 项目简介 Firecrawl 是一款开源、优秀、尖端的 AI 爬虫工具&#xff0c;专门从事 Web 数据提取&#xff0c;并将其转换为 Markdown 格式或者其他结构化数据。 Firecrawl 还特别上线了一个新的功…

Python - 爬虫-网页抓取数据-工具wget

Python - 爬虫之curl 一、wget "wget" 这个名称来源于 “World Wide Web” 与 “get” 的结合。 wget 是在 Linux 下开发的开放源代码的软件&#xff0c;作者是Hrvoje Niksic&#xff0c;后来被移植到包括 Windows 在内的各个平台上。 wget 是一个下载文件的工具&…

计算机网络(第三章)

数据链路层 一、数据链路层的背景 知识背景梳理&#xff1a; 网络中的主机、路由器、交换机都必须实现数据链路层&#xff1b; 数据链路层使用的信道&#xff1a; 点对点信道&#xff1a;这种信道使用一对一的点对点通信方式。广播信道&#xff1a;使用一对多的广播通信方式&…

在树莓派上如何使用 Vosk检测唤醒词

一、在树莓派上使用 Vosk 的步骤 Vosk 是一个轻量级的开源语音识别工具包&#xff0c;能在树莓派上高效运行。下面为你详细介绍在树莓派上使用 Vosk 的步骤&#xff1a; 1. 安装必要的依赖 首先&#xff0c;你需要更新系统软件包列表&#xff0c;并且安装一些必要的依赖库。…

HCIP交换机hybrid接口实验

目录 一、实验拓扑 二、实验需求 三、需求分析 四、实验步骤 1、交换机上的配置 SW1&#xff1a; SW2: SW3: 2、路由器上的配置 五、实验结果 1.dhcp获取结果验证 2.连通性测试 六、本练习难点 一、实验拓扑 二、实验需求 1、PC1和PC3所在接口为access接口&#x…

【SpringSecurity】详细核心类与过滤器流程讲解和封装通用组件实战

Spring Security 全面介绍 1. 什么是 Spring Security&#xff1f; Spring Security 是一个功能强大且高度可定制的认证和访问控制框架&#xff0c;是保护基于 Spring 的应用程序的标准工具。它是一个专注于为 Java 应用程序提供认证和授权的框架&#xff0c;实际上它是 Spri…

【算法】 分治-归并 算法专题

[toc[ 1.leetcode 912.排序数组 1.1 题目 题目链接 1.2 思路 上图 左侧是归并排序&#xff1a;类似二叉树后序遍历 右侧是快速排序&#xff1a;类似二叉树前序遍历 1.3 代码 class Solution { public:vector<int> tmp;vector<int> sortArray(vector<int&…

C#自定义曲线便器功能实现(简化版)

目录 一、曲线编辑器实现功能 二、实现方法说明 三、关键代码说明 1、绘制背景板和曲线 2、绘制坐标系面板 3、绘制曲线 四、工程下载连接 一、曲线编辑器实现功能 添加或者删除控制点&#xff0c;通过移动控制点来修改曲线形状 二、实现方法说明 1、坐标系系统&#x…