vue项目表单使用正则过滤ip、手机号

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

	  import useFormValidate from '@/hooks/useFormValidate'setup(props, { emit }) {const { validateName, validateIPAndPort } = useFormValidate()const state = reactive({workFaceInfo: props.info?.id ? props.info : {},sysTypeData: props.sysType,formRules: {name: [{required: true,message: '工作面名称不能为空',trigger: ['blur', 'change']},{validator: validateName,trigger: ['blur', 'change']}],address: [{required: true,message: '工作面IP端口不能为空',trigger: ['blur', 'change']},{validator: validateIPAndPort,trigger: ['blur', 'change']}],username: [{required: true,trigger: ['blur', 'change'],message: '请输入您的账号'},{ validator: validateMobilePhone, trigger: ['blur', 'change'] }],},}

useFormValidate .js

/*** 表单验证hooks* @returns*/
export default function () {// 匹配名称类字段const validateName = (rule, value, callback) => {// if (!/^[\u4E00-\u9FA5a-zA-Z0-9_]{1,20}$/.test(value)) {//   return callback(new Error('请输入中文、英文字母、数字或下划线组合，长度不超过20'))// }if (!/^.{1,20}$/.test(value)) {return callback(new Error('长度不超过20'))}return callback()}// 匹配value类字符串const validateValue = (rule, value, callback) => {if (!/^[\u4E00-\u9FA5a-zA-Z0-9_]{0,12}$/.test(value)) {return callback(new Error('请输入中文、英文字母、数字或下划线组合，长度不超过12'))}return callback()}// 匹配编码/标识符类字段const validateCode = (rule, value, callback) => {if (!/^[a-zA-Z_][a-zA-Z0-9_]{1,31}$/.test(value)) {return callback(new Error('第一个字符不能是数字，支持英文、数字、下划线的组合，长度不超过32'))}return callback()}const validateProp = (rule, value, callback) => {if (!/^[a-zA-Z_][a-zA-Z0-9_]{0,31}$/.test(value)) {return callback(new Error('第一个字符不能是数字，支持英文、数字、下划线的组合，长度不超过32'))}return callback()}// 匹配入网VINconst validateVin = (rule, value, callback) => {if (!value) {return callback()}if (!/^[a-zA-Z0-9_:-]{1,50}$/.test(value)) {return callback(new Error('请输入英文字母、数字、下划线、冒号、短横线组合，长度不超过50'))}return callback()}//匹配故障码const validateFaultCode = (rule, value, callback) => {if (!value) {return callback()}if (!/^[a-zA-Z0-9_]{1,10}$/.test(value)) {return callback(new Error('请输入英文字母、数字或下划线组合，长度不超过10'))}return callback()}// 匹配路径类字段const validatePath = (rule, value, callback) => {if (!/^[a-zA-Z0-9_/%&',;=?\x22-]{1,200}$/.test(value)) {return callback(new Error('请输入合法的路径地址，长度不超过200'))}return callback()}// 匹配描述类字段const validateText = (rule, value, callback) => {if (value?.length > 200) {return callback(new Error('长度不超过200'))}return callback()}// 匹配邮箱地址const validateEmail = (rule, value, callback) => {if (!value) {return callback()}if (!/^.{0,32}$/.test(value)) {return callback(new Error('长度不超过32'))}if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)) {return callback(new Error('请输入合法的邮箱地址'))}return callback()}// 匹配手机号const validateMobilePhone = (rule, value, callback) => {if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {return callback(new Error('请输入合法的11位手机号码'))}return callback()}//匹配数字const validateNumber = (rule, value, callback) => {if (!/^([0-9]){0,20}$/.test(value)) {return callback(new Error('请输入数字，长度不超过20'))}return callback()}//匹配数字const validateIsNumber = (rule, value, callback) => {if (!value) {return callback()}if (!/^([+-]?[0-9]){0,999}$/.test(value)) {return callback(new Error('请输入数字'))}return callback()}//匹配数字长度不超10const validateIsNumber10 = (rule, value, callback) => {if (!value) {return callback()}if (!/^([+-]?[0-9]){0,10}$/.test(value)) {return callback(new Error('请输入数字,长度不超过10'))}return callback()}//匹配正整数，小数const validateNumberFloat = (rule, value, callback) => {if (!/^\d+(\.\d+)?$/.test(value)) {return callback(new Error('请输入数字'))}return callback()}const validateInteger = (rule, value, callback) => {if (!/^([0-9]*){0,5}$/.test(value)) {return callback(new Error(`请输入1~10000之间的整数`))}return callback()}//匹配ip地址的校验const validateIP = (rule, value, callback) => {if (!/^(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])$/.test(value)) {return callback(new Error(`请输入合法的IP地址`))}return callback()}//匹配端口const validatePort = (rule, value, callback) => {if (!/^((6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])|[0-5]?\d{0,4})$/g.test(value)) {return callback(new Error(`请输入合法的端口号`))}return callback()}//匹配ip/ip+端口const validateIPAndPort = (rule, value, callback) => {const ipRegex = /^(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])$/const ipAndPortRegex = /^((\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5]):((6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])|[0-5]?\d{0,4})$/if (!ipRegex.test(value) && !ipAndPortRegex.test(value)) {return callback(new Error(`请输入合法的IP地址或IP地址和端口号`))}return callback()}//匹配50个字符长度const validateLength50 = (rule, value, callback) => {if (!/^.{0,50}$/.test(value)) {return callback(new Error('长度不超过50'))}return callback()}//匹配以http,https开头的地址const validateUrlAdress = (rule, value, callback) => {if (value) {if (!/(http|https):\/\/([\w.]+\/?)\S*/.test(value)) {return callback(new Error('地址需以http://,https://开头'))}if (!/^.{0,500}$/.test(value)) {return callback(new Error('长度不超过500'))}}return callback()}return {validateName,validateValue,validateCode,validateProp,validatePath,validateText,validateEmail,validateMobilePhone,validateInteger,validateIP,validatePort,validateIPAndPort,validateVin,validateNumber,validateIsNumber,validateIsNumber10,validateFaultCode,validateLength50,validateUrlAdress,validateNumberFloat}
}

手机号验证

<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form"><div class="form-bg"><img src="../../assets/images/login/formbg.png" /></div><h3 class="login-title"></h3><div class="form-box"><el-form-item prop="username"><el-input class="login-input" v-model="loginForm.username" size="large" type="text" auto-complete="off" placeholder="账号" autofocus @keyup.enter="handleLogin"><template #prefix><svg t="1669889721496" class="divicon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8250" width="32" height="32"><pathd="M774.21758248 133.2144911l-308.63958662 308.68902431c-90.718187-42.91192715-202.39796052-27.04242413-277.44439533 48.00401067-95.51364429 95.51364429-95.51364429 250.4514089 0 345.9650532s250.4514089 95.51364429 345.9650532 0c75.04643481-75.04643481 90.86650012-186.67677063 48.00401066-277.49383305l117.21679639-117.21679637 74.45318236 74.45318235c22.24696684 22.24696684 58.33649082 22.29640455 80.63289536 0l33.61763877-33.61763878c22.24696684-22.24696684 22.29640455-58.33649082 0-80.63289537l-42.07148616-42.07148617 0.0494377-0.04943771-32.43113389-32.28282077 77.22169379-77.22169378c22.24696684-22.24696684 22.29640455-58.33649082 0-80.63289537l-35.89177316-35.89177316c-22.29640455-22.29640455-58.38592852-22.29640455-80.68233307 0zM419.35374254 721.1771058c-32.18394536 32.18394536-84.34072317 32.13450766-116.47523082-0.0494377-32.18394536-32.18394536-32.18394536-84.34072317-1e-8-116.52466853s84.34072317-32.13450766 116.47523083 0.0494377 32.23338307 84.29128546 1e-8 116.52466853z"p-id="8251"></path></svg></template></el-input></el-form-item><el-form-item prop="password"><el-inputclass="login-input password-input"v-model="loginForm.password":type="showOpenEye ? 'text' : 'password'"auto-complete="off"placeholder="密码"size="large"@keyup.enter="handleLogin"><template #prefix><svg t="1669890083558" class="divicon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8394" width="32" height="32"><pathd="M848.09719641 814.04327668l0 24.74195525c0 51.22107559-134.22763586 95.08976724-134.22763586 95.08976725l-55.92870868-7.11099317c0 0-89.44187201-11.18616311-145.4137998-11.18616312-55.88970667 0-145.4137998 11.18616311-145.4137998 11.18616312l-55.51866184 6.94655255c0 0-134.63768272-43.89082855-134.63768272-94.92532745l0-24.74195526c0-47.60444092 62.0562214-95.6463349 134.7852574-132.4904708 3.5228194-1.78038337 47.22812513 245.71400839 47.22812511 245.7140084l19.32912516-0.50280826c0 0-37.34694415-255.53405127-33.55638162-257.27121716 20.13235373-9.2076081 33.37718445-17.83756631 53.18065695-24.98123666 7.34605828-2.67637253 42.46567795-21.74935034 22.81926736-73.11062192-45.50150116-46.38167908-76.49746161-91.32028775-76.49746161-192.65879005l337.61827003 0c0 100.28861362-31.78759324 145.64359397-76.98867491 192.08957355l0.26141831 0c-19.21422766 58.2656597 11.51399047 72.08392319 16.40714557 73.66824344 19.59686828 6.47853003 39.1062453 16.60426336 58.76846795 24.99283245 4.87207371 2.07553271-33.55743631 257.27121716-33.55743631 257.27121717l20.42750308-0.54813428c0 0 41.66139634-246.68483917 45.92208912-244.59876534C786.9359103 717.76342478 848.09719641 765.46695111 848.09719641 814.04327668L848.09719641 814.04327668zM704.97713017 272.01821487c0-116.45542393-158.58695132-174.67786533-158.58695134-174.67786532-22.4598175-10.11519223-44.75414053-7.81091922-67.72625271 0 0 0-158.59327534 51.12198935-158.59327533 174.67786532 0 18.47213801-33.52475913 14.50659458-44.61710697 72.93669489l474.15650455 0C729.42393606 286.12108743 704.97713017 290.49035287 704.97713017 272.01821487L704.97713017 272.01821487zM704.97713017 272.01821487"p-id="8395"></path></svg></template><template #suffix><svgv-if="showOpenEye"t="1669890127355"class="divicon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="8538"width="32"height="32"@click="showOpenEye = !showOpenEye"><pathd="M512 212C312.00000031 212 141.2 336.39999969 72.00000031 512c69.19999969 175.60000031 240 300 439.99999969 300s370.8-124.39999969 439.99999969-300c-69.19999969-175.60000031-240-300-439.99999969-300zM512 711.99999969c-110.4 0-199.99999969-89.59999969-199.99999969-199.99999969s89.59999969-199.99999969 199.99999969-199.99999969 199.99999969 89.59999969 199.99999969 199.99999969-89.59999969 199.99999969-199.99999969 199.99999969z m0-319.99999969c-66.40000031 0-120 53.59999969-120 120s53.59999969 120 120 120 120-53.59999969 120-120-53.59999969-120-120-120z"p-id="8539"></path></svg><svgv-elset="1669890138247"class="divicon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="8682"width="32"height="32"@click="showOpenEye = !showOpenEye"><pathd="M920.534375 317.178125a33.75 33.75 0 0 0-47.625 3.05625c-58.228125 66.215625-118.509375 116.371875-179.165625 149.0625-59.2125 31.95-120.609375 48.140625-182.45625 48.140625S388.19375 501.246875 329.1875 469.334375c-60.39375-32.690625-120.3-82.81875-178.040625-148.996875a33.75 33.75 0 0 0-50.86875 44.371875c41.85 47.9625 85.0875 88.3875 129.159375 120.834375l-54.440625 54.45a33.75 33.75 0 0 0 47.728125 47.728125l64.5-64.5c3.271875 1.875 6.5625 3.703125 9.834375 5.475a479.325 479.325 0 0 0 91.875 38.30625l-31.875 104.634375a33.75 33.75 0 1 0 64.575 19.6875l33.54375-110.109375a422.578125 422.578125 0 0 0 56.04375 3.75 424.63125 424.63125 0 0 0 56.165625-3.75l33.525 110.109375a33.75 33.75 0 1 0 64.575-19.6875l-31.875-104.634375A483.309375 483.309375 0 0 0 725.75 528.725c3.084375-1.659375 6.159375-3.375 9.24375-5.11875l64.10625 64.115625a33.75 33.75 0 0 0 47.728125-47.728125l-53.859375-53.896875C837.490625 453.575 881.215625 413 923.5625 364.8125a33.75 33.75 0 0 0-3.028125-47.634375z"p-id="8683"></path></svg></template></el-input></el-form-item><div class="forget-password" @click="forgetPassword">忘记密码</div><el-button class="syzk-button mt-20" :class="{ 'syzk-button-active': loading }" :loading="loading" style="width: calc(100% - 4.6rem)" @click="handleLogin"><span v-if="!loading">登 录</span><span v-else>登 录 中...</span></el-button></div></el-form><div class="forget-password" @click="forgetPassword">忘记密码</div><el-button class="syzk-button mt-20" :class="{ 'syzk-button-active': loading }" :loading="loading" style="width: calc(100% - 4.6rem)" @click="handleLogin"><span v-if="!loading">登 录</span><span v-else>登 录 中...</span></el-button>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/581458.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SpringBoot 在IDEA中实现热部署 (JRebel实用版)

SpringBoot 在IDEA中实现热部署 (JRebel实用版)

JRebel简介&#xff1a; JRebel是与应用程序服务器集成的JVM Java代理&#xff0c;可使用现有的类加载器重新加载类。只有更改的类会重新编译并立即重新加载到正在运行的应用程序中&#xff0c;JRebel特别不依赖任何IDE或开发工具&#xff08;除编译器外&#xff09;。但是&am…
阅读更多...
『Linux升级路』冯诺依曼体系结构与操作系统

『Linux升级路』冯诺依曼体系结构与操作系统

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;Linux &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、冯诺依曼体系结构 &#x1f4d2;1.1为什么要有体系结构 &#x1f4d2;1.2…
阅读更多...
虚函数的讲解

虚函数的讲解

文章目录 虚函数的声明与定义代码演示基类Person派生类Man派生类Woman 测试代码动态绑定静态绑定访问私有虚函数总结一下通过成员函数指针调用函数的方式 虚函数的声明与定义 虚函数存在于C的类、结构体等中&#xff0c;不能存在于全局函数中&#xff0c;只能作为成员函数存在…
阅读更多...
C# MVC +Layui侧边导航栏的收缩及展开

C# MVC +Layui侧边导航栏的收缩及展开

目录 1、头部代码 2、侧边栏&#xff08;例子只写了一级导航&#xff0c;需要多级可自行添加&#xff09; 3、body内容填充 4、 JS 1、头部代码 <div class"layui-layout layui-layout-admin"> <div class"layui-header"> …
阅读更多...
MAVLINK生成自定义消息

MAVLINK生成自定义消息

git clone https://github.com/mavlink/mavlink.gitcd mavlinkgit submodule update --init --recursivepython -m mavgenerate出现以下界面 XML填写自定义xml路径&#xff0c;内容可以参考mavlink/message_definitions/v1.0 Out为输出路径 <?xml version"1.0"…
阅读更多...
如何用Python批量计算Word中的算式

如何用Python批量计算Word中的算式

一、问题的提出 到了期末&#xff0c;大家都在忙着写总结、改试卷、算工作量&#xff0c;写总结可以借助于ChatGPT&#xff0c;改试卷可以用星火的自动批阅功能&#xff0c;算工作量就是一项比较棘手的问题&#xff0c;因为它涉及很多算式&#xff0c;有时需要老师用计算器算来…
阅读更多...
Linux操作系统极速入门[常用指令]（安装jdk，MySQL，nginx），以及在linux对项目进行部署。

Linux操作系统极速入门[常用指令]（安装jdk，MySQL，nginx），以及在linux对项目进行部署。

linux概述&#xff1a; Linux是一套免费使用和自由传播的操作系统 我们为什么要学&#xff0c;Linux&#xff1f; 主流操作系统&#xff1a; linux系统版本&#xff1a; 内核版&#xff1a; 由linux核心团队开发&#xff0c;维护 免费&#xff0c;开源 负责控制硬件 发行版&…
阅读更多...
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之线性布局容器Row组件

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之线性布局容器Row组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之线性布局容器Row组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Row组件 沿水平方向布局容器。 子组件 可以包含子组件。 接口 Row(…
阅读更多...
机器学习深度学习面试笔记

机器学习深度学习面试笔记

机器学习&深度学习面试笔记 机器学习Q. 在线性回归中&#xff0c;如果自变量之间存在多重共线性&#xff0c;会导致什么问题&#xff1f;如何检测和处理多重共线性&#xff1f;Q. 什么是岭回归(Ridge Regression)和Lasso回归(Lasso Regression)&#xff1f;它们与普通线性回…
阅读更多...
从0开始学前端day1

从0开始学前端day1

script setup 在script里写一个setup的作用 自动注册子组件属性和方法无需返回&#xff0c;执行完后自动更新支持props和context Vue 3中的props和context props是一种用于父子组件通信的机制。父组件可以通过props向子组件传递数据&#xff0c;子组件则可以通过props接收来…
阅读更多...
Cucumber-JVM的示例和运行解析

Cucumber-JVM的示例和运行解析

Cucumber-JVM 是一个支持 Behavior-Driven Development (BDD) 的 Java 框架。在 BDD 中&#xff0c;可以编写可读的描述来表达软件功能的行为&#xff0c;而这些描述也可以作为自动化测试。 Cucumber-JVM 的最小化环境 Cucumber-JVM是BDD的框架&#xff0c; 提供了GWT语法的相…
阅读更多...
云原生机器学习平台cube-studio开源项目及代码简要介绍

云原生机器学习平台cube-studio开源项目及代码简要介绍

1. cube-studio介绍 云原生机器学习平台cube-studio介绍&#xff1a;https://juejin.cn/column/7084516480871563272 cube-studio是开源的云原生机器学习平台&#xff0c;目前包含特征平台&#xff0c;支持在/离线特征&#xff1b;数据源管理&#xff0c;支持结构数据和媒体标…
阅读更多...
判断电话号码是否重复-excel

判断电话号码是否重复-excel

有时候重复的数据不需要或者很烦人&#xff0c;就需要采取措施&#xff0c;希望以下的方法能帮到你。 1.判断是否重复 方法一&#xff1a; 1&#xff09;针对第一个单元格输入等号&#xff0c;以及公式countif(查找记录数的范围&#xff0c;需要查找的单元格&#xff09; 2…
阅读更多...
Python Web --Django Web框架

Python Web --Django Web框架

场景 近日写了不少Python脚本&#xff0c;例如&#xff1a;爬虫、ocr、模型训练等。我认为可以更加了解python&#xff0c;因为近一个月使用Python给我的感觉比较好&#xff0c;代码比较简单&#xff0c;比java简单很多&#xff0c;而且python自己管理内存&#xff0c;更多依赖…
阅读更多...
Modbus RTU转Modbus TCP模块，RS232/485转以太网模块，YL102 多功能串口服务器模块

Modbus RTU转Modbus TCP模块，RS232/485转以太网模块，YL102 多功能串口服务器模块

特点&#xff1a; ● Modbus RTU协议自动转换成Mobus TCP协议 ● 100M高速网卡&#xff0c;10/100M 自适应以太网接口 ● 支持 AUTO MDI/MDIX&#xff0c;可使用交叉网线或平行网线连接 ● RS232波特率从300到256000可设置 ● 工作方式可选择TCP Server, TCP Client, U…
阅读更多...
四川天蝶电子商务有限公司助力商家赢在起跑线

四川天蝶电子商务有限公司助力商家赢在起跑线

随着电商行业的迅猛发展&#xff0c;越来越多的人选择在抖店上开设自己的店铺。作为一家专业的电子商务公司&#xff0c;四川天蝶电子商务有限公司为商家提供了一站式的抖店开店服务&#xff0c;帮助商家轻松开启电商之旅。 首先&#xff0c;四川天蝶电子商务有限公司拥有丰富的…
阅读更多...
leetcode贪心算法题总结(一)

leetcode贪心算法题总结(一)

此系列分三章来记录leetcode的有关贪心算法题解&#xff0c;题目我都会给出具体实现代码&#xff0c;如果看不懂的可以后台私信我。 本章目录 1.柠檬水找零2.将数组和减半的最少操作次数3.最大数4.摆动序列5.最长递增子序列6.递增的三元子序列7.最长连续递增序列8.买卖股票的最…
阅读更多...
事务管理解析：掌握Spring事务的必备技能！

事务管理解析：掌握Spring事务的必备技能！

AOP事务管理 1.1 Spring事务简介1.1.1 相关概念介绍1.1.2 转账案例-需求分析1.1.3 转账案例-环境搭建步骤1:准备数据库表步骤2:创建项目导入jar包步骤3:根据表创建模型类步骤4:创建Dao接口步骤5:创建Service接口和实现类步骤6:添加jdbc.properties文件步骤7:创建JdbcConfig配置…
阅读更多...
八股文打卡day12——计算机网络（12）

八股文打卡day12——计算机网络（12）

面试题&#xff1a;HTTPS的工作原理&#xff1f;HTTPS是怎么建立连接的&#xff1f; 我的回答&#xff1a; 1.客户端向服务器发起请求&#xff0c;请求建立连接。 2.服务器收到请求之后&#xff0c;向客户端发送其SSL证书&#xff0c;这个证书包含服务器的公钥和一些其他信息…
阅读更多...
机器学习之人工神经网络（Artificial Neural Networks，ANN）

机器学习之人工神经网络（Artificial Neural Networks，ANN）

人工神经网络（Artificial Neural Networks，ANN）是机器学习中的一种模型，灵感来源于人脑的神经网络结构。它由神经元（或称为节点）构成的层级结构组成，每个神经元接收输入并生成输出，这些输入和输出通过权重进行连接。 人工神经网络（ANN）是一种模仿生物神经系统构建的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023