当前位置: 首页 > news >正文

Vue Form表单的使用,rules格式校验网络校验,键盘按键监听

Form表单

在这里插入图片描述

rules格式校验

  • 可以在validator中进行网络请求,实现网络校验
const formRules = {userName: [{required: true, message: "用户名不能为空", trigger: 'blur'}, {min: 5,max: 10,message: "长度必须5-10位",trigger: 'blur'}],passWord: [{required: true, message: "密码不能为空", trigger: 'blur'}],reference: [{validator: referenceValidity,required: true,trigger: "blur",},],
}function referenceValidity(rule, value, callback) {console.log('校验推荐人')if (value === "" || value === undefined) {callback(new Error("请输入推荐人姓名"));} else {//请求网络校验推广人// console.log("输入的推荐人姓名:" + value)// const _url = "xxxxxxxxxxx";// let param = {};// param.promotionPecialistName = value;// get(this.$http, _url, param).then(function (response) {//   let res = response.data;//   if (res.code === "I000000") {//     if (res.data.isFlag) {//       callback()//     } else {//       callback(new Error("推荐人不存在"))//     }//   } else {//     callback(new Error("推荐人不存在"))//   }// });callback(new Error("推荐人不存在"))}
}

formRef引用form对象

  • form表单中关联formRef(引用对象),form(表单内容),formRules(校验规则)
<el-form ref="formRef" :model="form" :rules="formRules">

const formRef = ref()function reqLogin() {console.log("账号信息", form.value)formRef.value.validate((valid) => {console.log("formRef valid = ", valid)if (valid) {setToken()store.commit("setUserInfo", form.value)showToast("登录成功")router.push('/')}})
}

键盘监听

onMounted(() => {console.log("页面加载")document.addEventListener('keyup', onkeyup)
})onBeforeUnmount(() => {document.removeEventListener('keyup', onkeyup)
})function onkeyup(e) {if (e.key === 'Enter') {reqLogin()}
}

完整代码

<script setup>import {onBeforeUnmount, onMounted, ref} from "vue";
import {Lock, User} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
import {setToken} from "../utils/CookieUtil.js";
import {showToast} from "../utils/ToastUtil.js";
import {useStore} from "vuex";const router = useRouter()
const store = useStore()const form = ref({userName: "",passWord: "",reference: ""
})const formRef = ref()const formRules = {userName: [{required: true, message: "用户名不能为空", trigger: 'blur'}, {min: 5,max: 10,message: "长度必须5-10位",trigger: 'blur'}],passWord: [{required: true, message: "密码不能为空", trigger: 'blur'}],reference: [{validator: referenceValidity,required: true,trigger: "blur",},],
}function referenceValidity(rule, value, callback) {console.log('校验推荐人')if (value === "" || value === undefined) {callback(new Error("请输入推荐人姓名"));} else {//请求网络校验推广人// console.log("输入的推荐人姓名:" + value)// const _url = "xxxxxxxxxxx";// let param = {};// param.promotionPecialistName = value;// get(this.$http, _url, param).then(function (response) {//   let res = response.data;//   if (res.code === "I000000") {//     if (res.data.isFlag) {//       callback()//     } else {//       callback(new Error("推荐人不存在"))//     }//   } else {//     callback(new Error("推荐人不存在"))//   }// });callback(new Error("推荐人不存在"))}
}function onkeyup(e) {if (e.key === 'Enter') {reqLogin()}
}onMounted(() => {console.log("页面加载")document.addEventListener('keyup', onkeyup)
})onBeforeUnmount(() => {document.removeEventListener('keyup', onkeyup)
})function reqLogin() {console.log("账号信息", form.value)formRef.value.validate((valid) => {console.log("formRef valid = ", valid)if (valid) {setToken()store.commit("setUserInfo", form.value)showToast("登录成功")router.push('/')}})
}</script><template><div style="height: 100vh;width: 100vw;display: flex;flex-direction: row"><div class="flex-col-center" style="width: 70%;height: 100%;background: #213547;"><span style="font-size: 40px;color: white;">测试系统登录页面</span><span style="font-size: 20px;color: white;">演示Demo</span></div><div class="flex-col-center" style="width: 30%;padding: 100px"><h2 style="font-size: 20px">欢迎回来</h2><el-form ref="formRef" :model="form" :rules="formRules"><el-form-item label="账号" prop="userName"><el-input v-model="form.userName" placeholder="请输入账号"><template #prefix><el-icon><User/></el-icon></template></el-input></el-form-item><el-form-item label="密码" prop="passWord"><el-input v-model="form.passWord" placeholder="请输入密码" show-password type="password"><template #prefix><el-icon><Lock/></el-icon></template></el-input></el-form-item><el-form-item label="推荐人" prop="reference"><el-input v-model="form.reference" placeholder="请输入推荐人"></el-input></el-form-item></el-form><el-button type="primary" @click="reqLogin()">登录</el-button></div></div>
</template><style scoped>.flex-col-center {display: flex;flex-direction: column;justify-content: center
}</style>

相关文章:

Vue Form表单的使用,rules格式校验网络校验,键盘按键监听

Form表单 rules格式校验 可以在validator中进行网络请求&#xff0c;实现网络校验 const formRules {userName: [{required: true, message: "用户名不能为空", trigger: blur}, {min: 5,max: 10,message: "长度必须5-10位",trigger: blur}],passWord: …...

PyTorch2

Tensor的常见操作&#xff1a; 获取元素值&#xff1a; 注意&#xff1a; 和Tensor的维度没有关系&#xff0c;都可以取出来&#xff01; 如果有多个元素则报错&#xff1b; import torch def test002():data torch.tensor([18])print(data.item())pass if __name__ &qu…...

蓝牙 AVRCP 协议详解

前言 随着无线音频设备的普及&#xff0c;蓝牙已经成为智能设备间通信的主流方式之一。除了传输音频流的 A2DP 协议外&#xff0c;AVRCP&#xff08;Audio/Video Remote Control Profile&#xff0c;音频/视频远程控制协议&#xff09;为用户提供了对蓝牙音频设备的控制能力&am…...

深入解析下oracle char和varchar2底层存储方式

oracle数据库中&#xff0c;char和varchar2数据类型用来存储字符数据。char类型一旦定义多大&#xff0c;那么它就分配多少字节空间&#xff1b;varchar2类型定义多大&#xff0c;代表它可以扩展的最大大小为多大&#xff0c;一开始空间根据使用来决定。字符数据存储在oracle表…...

2024年底-Arch linux或转为0BSD许可证!

原文&#xff1a;https://archlinux.org/news/providing-a-license-for-package-sources/ 解读&#xff1a;Arch Linux社区通过RFC 40达成共识&#xff0c;决定将所有软件包源代码更改为0BSD许可证。 0BSD许可证是什么&#xff1f;&#xff1a;这是一个非常自由的开源许可证&a…...

YOLOv10改进,YOLOv10添加SE注意力机制,二次C2f结构

摘要 理论介绍 SE 注意力机制是一种提升卷积神经网络(CNN)性能的模块,SE更关注重要的特征图,增强了网络的表现,同时仅增加了较少的参数。SE 机制包含两个主要步骤: Squeeze (压缩):对所有特征图进行全局平均池化,生成一个通道描述符。Excitation (激励):将通道描述符…...

探索运维新视界,CMDB的3D机房功能深度解析

在数字化转型的浪潮中&#xff0c;数据中心作为企业信息架构的核心&#xff0c;其高效、智能的管理成为了企业竞争力的关键因素之一。3D机房作为这一趋势下的创新产物&#xff0c;正逐步改变着传统机房运维的面貌。本文将结合乐维CMDB&#xff0c;深入探讨3D机房的功能细节、应…...

[QDS]从零开始,写第一个Qt Design Studio到程序调用的项目

前言 最近在使用Qt Design Studio进行开发&#xff0c;但是简中网上要不就是只搜得到Qt Designer(Qt Creator内部库)&#xff0c;要不就只搜得到一点营销号不知道从哪里搬来的账号&#xff0c;鉴于Qt Design Studio是一个这么强大的软件&#xff0c;自然是需要来进行一下小小的…...

万物皆可Docker,在NAS上一键部署最新苹果MacOS 15系统

万物皆可Docker&#xff0c;在NAS上一键部署最新苹果MacOS 15系统 哈喽小伙伴们还&#xff0c;我是Stark-C~ 最近苹果Mac mini 2024款在政府补贴的加持下&#xff0c;仅需3500块钱左右就能到手确实挺香的。我看很多评论区的小伙伴跃跃欲试&#xff0c;但是也有不少之前从未体…...

视频监控实现画面缩放功能

文章目录 概要一、功能说明二、核心实现代码三、技术细节 概要 在视频监控系统中&#xff0c;经常需要查看视频画面中的细节。通过实现区域放大、滚轮缩放和拖拽平移等功能&#xff0c;可以让用户更方便地观察视频细节。本文介绍如何在 Windows 系统下实现这些交互功能。 一、…...

通信综合—8.通信网络安全

一、信息系统安全概述 1.信息系统的构成和分类 信息系统是将用于收集、处理、存储和传播信息的部件组织在一起而成的相关联的整体&#xff0c;般是由计算机硬件、网络和通信设备、计算机软件、信息资源和信息用户组成。它是以处理信息流为目的的人机一体化系统。信息系统主要…...

keepalived双机热备方案实现Nginx高可用

问题描述 只用一台Nginx做反向代理&#xff0c;如果这台Nginx出现故障(比如宕机)&#xff0c;则服务不可用。 以下给出keepalived双机热备方案实现Nginx高可用的方法。先介绍几个概念&#xff1a; 高可用 高可用&#xff08;High Availability&#xff09;是指系统或服务能…...

数据结构——排序算法第一幕(插入排序:直接插入排序、希尔排序 选择排序:直接选择排序,堆排序)超详细!!!!

文章目录 前言一、排序1.1 概念1.2 常见的排序算法 二、插入排序2.1 直接插入排序2.2 希尔排序希尔排序的时间复杂度 三、选择排序3.1 直接选择排序3.2 堆排序 总结 前言 时间很快&#xff0c;转眼间已经到数据结构的排序算法部分啦 今天我们来学习排序算法当中的 插入排序 和 …...

【JavaEE初阶】枫叶经霜艳,梅花透雪香-计算机是如何运行的?

本篇博客给大家带来的是与计算机相关的知识点, 包括:计算机的组成, 指令, 进程(重点). 文章专栏: JavaEE初阶 若有问题 评论区见 欢迎大家点赞 评论 收藏 分享 如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的动力 . 1. 计算机的组成 1.1 计算机的发展史 计算…...

MySQL数据类型与存储结构

补充知识,事务隔离的等级&#xff1a; READ UNCOMMITTED&#xff08;读未提交&#xff09; &#xff1a;这是最低的隔离级别&#xff0c;允许事务读取其他事务未提交的数据&#xff0c;可能导致脏读、不可重复读和幻读问题。 ​ READ COMMITTED&#xff08;读已提交&#xff0…...

CSRF保护--laravel进阶篇

laravel对csrf非常重视&#xff0c;专门针对csrf作出了很多的保护。如果您是刚刚接触laravel的路由不久&#xff0c;那么您可能对于web.php路由文件的post请求很疑惑&#xff0c;因为get请求很顺利&#xff0c;而post请求则可能会遭遇失败。其中一个失败的原因是由于laravel的c…...

服务器数据恢复—raid5阵列+LVM+VXFS数据恢复案例

服务器存储数据恢复环境&#xff1a; 某品牌MSA2000FC存储中有一组由7块盘组建的RAID5阵列&#xff0c;另外还有1块硬盘作为热备盘使用。 基于RAID5阵列划分的几个LUN分配给小机使用&#xff0c;存储空间通过LVM管理&#xff0c;重要数据为Oracle数据库及OA服务端。 服务器存储…...

游卡,科锐国际,蓝禾,汤臣倍健,三七互娱,顺丰,快手,途游游戏25秋招内推

游卡&#xff0c;科锐国际&#xff0c;蓝禾&#xff0c;汤臣倍健&#xff0c;三七互娱&#xff0c;顺丰&#xff0c;快手&#xff0c;途游游戏25秋招内推 ①科锐国际25届秋招补录 人力资源类岗位&#xff0c;补录城市&#xff1a;苏州、宁波、武汉、东莞&#xff1b;全日制公办…...

内存不足引发C++程序闪退崩溃问题的分析与总结

目录 1、内存不足一般出现在32位程序中 2、内存不足时会导致malloc或new申请内存失败 2.1、malloc申请内存失败&#xff0c;返回NULL 2.2、new申请内存失败&#xff0c;抛出异常 3、内存不足项目实战案例中相关细节与要点说明 3.1、内存不足导致malloc申请内存失败&#…...

C++ 多态作业练习

作业1、 编写一个英雄类 class Hero{ int atk; int def; int spd; int hp; public: 所有的get set 方法 void equipWeapon(Weapon*) 根据传入的武器不同&#xff0c;英雄获得不同的属性加成 } #include <iostream> #include <cstring&g…...

(免费送源码)计算机毕业设计原创定制:Java+JSP+HTML+JQUERY+AJAX+MySQL springboot计算机类专业考研学习网站管理系统

摘 要 大数据时代下&#xff0c;数据呈爆炸式地增长。为了迎合信息化时代的潮流和信息化安全的要求&#xff0c;利用互联网服务于其他行业&#xff0c;促进生产&#xff0c;已经是成为一种势不可挡的趋势。在大学生在线计算机类专业考研学习网站管理的要求下&#xff0c;开发一…...

层次聚类(Hierarchical Clustering)详解

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

Cannal实现MySQL主从同步环境搭建

大家好&#xff0c;我是袁庭新。 在多数情况下&#xff0c;客户端往往会优先获取缓存中的数据。然而&#xff0c;当缓存数据与数据库中的实际数据存在显著不一致时&#xff0c;可能会导致严重的后果。因此&#xff0c;确保数据库与缓存数据之间的一致性变得至关重要&#xff0c…...

Js-函数-03

函数定义 在java中我们为了提高代码的复用性&#xff0c;可以使用方法。同样&#xff0c;在JavaScript中可以使用函数来完成相同的事情。JavaScript中的函数被设计为执行特定任务的代码块&#xff0c;通过关键字function来定义。 <!DOCTYPE html> <html lang"en…...

9.机器学习--SVM支持向量机

支持向量机&#xff08;Support Vector Machine&#xff0c;SVM&#xff09;是一种二分类监督学习模型。支持向量机最早在 1964 年被提出&#xff0c;1995年前后理论成熟并开始被大量应用与人像识别、文本分类等问题中。它的基本模型是定义在特征空间上的间隔最大的线性分类器&…...

探索Python的HTTP之旅:揭秘Requests库的神秘面纱

文章目录 **探索Python的HTTP之旅&#xff1a;揭秘Requests库的神秘面纱**第一部分&#xff1a;背景介绍第二部分&#xff1a;Requests库是什么&#xff1f;第三部分&#xff1a;如何安装Requests库&#xff1f;第四部分&#xff1a;Requests库的五个简单函数使用方法第五部分&…...

vue3项目使用动态表单formcreate

使用两个插件&#xff1a; 支持可视化设计的低代码表单组件 | FormCreate 好用的低代码可视化表单设计器 | FcDesigner 一、安装 1.使用 Node.js 引入 npm install form-create/element-ui npm install form-create/designer^3 npm install element-plus 2. main.js引入…...

指针的奥秘:深入探索内存的秘密

前言 在计算机编程的广阔天地中&#xff0c;指针作为一种独特的数据类型&#xff0c;它不仅是C语言的核心&#xff0c;也是理解计算机内存管理的基石。指针的概念虽然强大&#xff0c;但对于初学者来说&#xff0c;它常常是学习过程中的一个难点。本文旨在揭开指针的神秘面纱&a…...

车载摄像camera基础知识和评估

一、车载摄像头应用 以下是根据图片内容重新制作的表格: | 序号 | 产品用途 |------|---------------- | 1 | AVM/环视360摄像头 | 2 | DMS摄像头 | 3 | IMS/OMS摄像头 | 4 | RVC摄像头 | 5 | 红外夜视摄像头 | 6 | 底盘透明摄像头 | 7 …...

OpenCV 图像轮廓查找与绘制全攻略:从函数使用到实战应用详解

摘要&#xff1a;本文详细介绍了 OpenCV 中用于查找图像轮廓的 cv2.findContours() 函数以及绘制轮廓的 cv2.drawContours() 函数的使用方法。涵盖 cv2.findContours() 各参数&#xff08;如 mode 不同取值对应不同轮廓检索模式&#xff09;及返回值的详细解析&#xff0c;搭配…...

微信小程序WXSS全局样式与局部样式的使用教程

微信小程序WXSS全局样式与局部样式的使用教程 引言 在微信小程序的开发中,样式的设计与实现是提升用户体验的关键部分。WXSS(WeiXin Style Sheets)作为微信小程序的样式表语言,不仅支持丰富的样式功能,还能通过全局样式与局部样式的灵活运用,帮助开发者构建美观且易于维…...

Leetcode142. 环形链表 II(HOT100)

链接 我的错误代码&#xff1a; class Solution { public:ListNode *detectCycle(ListNode *head) {if(!head||!head->next)return nullptr;ListNode* f head->next,*s head;while(f){f f->next,s s->next;if(!f)return nullptr;f f->next;if(fs){ListNo…...

Java程序基础⑤Java数组的定义和使用+引用的概念

目录 1. Java数组的基本概念 1.1 数组的定义 1.2 数组存在的意义 1.3 数组的使用 1.4 二维数组 2. 引用类型JVM的内存分布 2.1 JVM的内存分布 2.2 基本数据类型和引用型数据类型的区别 2.3 引用注意事项 2.4 传值传递 3. 数组总结和应用场景 3.1 一维数组和二维数组…...

丁真杯理塘大赛题解

前言&#xff1a;部分代码思路可能与题解思路不同&#xff0c;请勿强行带入 真蛰虫 原题链接 1.一道非常基础的数学题。 2.主要就是在考察分解质因数。首先看真蛰虫的质因数是不是包含了容器的所有质因数&#xff0c;如果没有&#xff0c;那么就不能放入容器中。如果全部包…...

FPGA经验谈系列文章——8、复位的设计

前言 剑法往往有着固定的招式套路,而写代码似乎也存在类似的情况。不知从何时起,众多 FPGA 工程师们在编写代码时开启了一种关于 always 语句块的流行写法,那就是: always @(posedge i_clk or negedge i_rstn) 就笔者所经历的诸多项目以及所接触到的不少工程师而言,大家在…...

Android studio与JS交互

文章目录 前言一、html二、使用步骤1.2.AS 总结 前言 最近在使用Android Studio的WebView,有些功能要AS与JS交互。 一、html html文件 <!DOCTYPE html> <html> <!--javascript--> <head><meta charset"utf-8"><title>Carson…...

健身房小程序服务渠道开展

健身不单单是锻炼身体、保持身材&#xff0c;也是一种社交方式&#xff0c;城市里门店不少&#xff0c;每家都有一定流量和老客&#xff0c;但仅靠传统线下拉客/自然流量前往和线上朋友圈、短视频发硬广等方式还不够。 商家需要找到更多潜在目标客户&#xff0c;而消费者也对门…...

大宗商品行业区块链应用

应用场景 区块链技术具有透明性、去中心化、不可篡改等特点&#xff0c;因此可以在大宗商品定价方面得到应用。通过区块链技术&#xff0c;相关交易的各方可以在无需依赖中心化第三方的情况下&#xff0c;实时、准确地获取定价信息。这种技术的应用能够提高效率、降低成本、提…...

软考教材重点内容 信息安全工程师 第 5 章 物理与环境安全技术

5.1.1 物理安全概念 传统上的物理安全也称为实体安全&#xff0c;是指包括环境、设备和记录介质在内的所有支持网络信息系统运行的硬件的总体安全&#xff0c;是网络信息系统安全、可靠、不间断运行的基本保证&#xff0c;并且确保在信息进行加工处理、服务、决策支持的过程中&…...

蓝桥杯每日真题 - 第21天

题目&#xff1a;(空间) 题目描述&#xff08;12届 C&C B组A题&#xff09; 解题思路&#xff1a; 转换单位&#xff1a; 内存总大小为 256MB&#xff0c;换算为字节&#xff1a; 25610241024268,435,456字节 计算每个整数占用空间&#xff1a; 每个 32 位整数占用…...

【C++】C++11新特性详解:可变参数模板与emplace系列的应用

C语法相关知识点可以通过点击以下链接进行学习一起加油&#xff01;命名空间缺省参数与函数重载C相关特性类和对象-上篇类和对象-中篇类和对象-下篇日期类C/C内存管理模板初阶String使用String模拟实现Vector使用及其模拟实现List使用及其模拟实现容器适配器Stack与QueuePriori…...

下载并安装Visual Studio 2017过程

一、下载 1、下载链接 下载链接&#xff1a;官方网址 先登录 往下滑找到较早的下载 2、进行搜索下载 或者直接点击&#x1f517;网站跳转 3、确认系统信息进行下载 二、安装 下载完成后右键使用管理员身份运行 1、点击同意后安装 2、若报错—设置失败 打开控制面板-&g…...

【消息序列】详解(6):深入探讨缓冲区管理与流量控制机制

目录 一、概述 1.1. 缓冲区管理的重要性 1.2. 实现方式 1.2.1. HCI_Read_Buffer_Size 命令 1.2.2. HCI_Number_Of_Completed_Packets 事件 1.2.3. HCI_Set_Controller_To_Host_Flow_Control 命令 1.2.4. HCI_Host_Buffer_Size 命令 1.2.5. HCI_Host_Number_Of_Complete…...

Java开发经验——Spring Test 常见错误

摘要 本文详细介绍了Java开发中Spring Test的常见错误和解决方案。文章首先概述了Spring中进行单元测试的多种方法&#xff0c;包括使用JUnit和Spring Boot Test进行集成测试&#xff0c;以及Mockito进行单元测试。接着&#xff0c;文章分析了Spring资源文件扫描不到的问题&am…...

麦肯锡报告 | 科技落地的真谛:超越技术本身的价值创造

科技创新正在以惊人的速度改变企业运作和客户体验&#xff0c;但实现其潜力的关键在于正确的策略、流程、文化和人才。麦肯锡强调了一个理念&#xff1a;Never just tech&#xff08;不仅仅是技术&#xff09;。这表明&#xff0c;成功的数字化转型不仅依赖于技术&#xff0c;还…...

React 常见问题解答:设置、安装、用户事件和最佳实践

在本文中&#xff0c;我们将回答您在开始使用 React 时可能会问的 9 个常见问题。 1、开始使用 React 需要哪些技能和知识&#xff1f; 在深入研究 React 之前&#xff0c;您应该对以下内容有深入的了解&#xff1a; HTML、CSS 和 JavaScript &#xff08;ES6&#xff09;&a…...

Mairadb 最大连接数、当前连接数 查询

目录 查询数据库 最大连接数 查询当前连接总数 环境 Mariadb 10.11.6 跳转mysql数据库&#xff1a; 查询数据库 最大连接数 show variables like max_connections; 注意; 这个版本不能使用 &#xff1a; show variables like ‘%max_connections%’; 会报错 &#xff…...

【R库包安装】R库包安装总结:conda、CRAN等

【R库包安装】R库包安装总结&#xff1a;conda、CRAN等 方法1&#xff1a;基于 R 的 CRAN 仓库安装CRAN库包查询从 CRAN 安装 方法2&#xff1a;使用conda安装库包确保已安装 R 和 Conda 环境使用 Conda 官网浏览是否存在相应库包Conda 安装 R 库 方法3&#xff1a;从 GitHub 安…...

php反序列化1_常见php序列化的CTF考题

声明&#xff1a; 以下多内容来自暗月师傅我是通过他的教程来学习记录的&#xff0c;如有侵权联系删除。 一道反序列化的CTF题分享_ctf反序列化题目_Mr.95的博客-CSDN博客 一些其他大佬的wp参考&#xff1a;php_反序列化_1 | dayu’s blog (killdayu.com) 序列化一个对象将…...

LabVIEW动态显示控件方案

在LabVIEW开发中&#xff0c;涉及到动态显示和控制界面的设计时&#xff0c;经常需要根据用户选择的不同参数来动态显示或隐藏相关控件。例如&#xff0c;某些能可能会根据“Type”控件的不同选择显示不同的参数&#xff0c;如“Target”、“Duration”和“EndType”等。在一个…...