el-form动态表单动态验证(先验证不为空,再验证长度在20以内,最后向后台发送请求验证账号是否重复)

news2024/9/29 15:26:12
data(){
   var checkSno = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入账号"));
      } else if (value.length > 20) {
        callback(new Error("长度为1-20"));
      } else {
        if (this.form.id) {
          // 修改时检查账号是否重复
          selectLoginId({ sno: value, id: this.form.id })
            .then((res) => {
              if (res) {
                callback();
              } else {
                callback(new Error("账号重复,请选择其他账号"));
              }
            })
            .catch((error) => {
              callback(new Error("验证失败,请重试"));
            });
        } else {
          // 新增时检查账号是否重复
          selectLoginId({ sno: value })
            .then((res) => {
              if (res) {
                callback();
              } else {
                callback(new Error("账号重复,请选择其他账号"));
              }
            })
            .catch((error) => {
              callback(new Error("验证失败,请重试"));
            });
        }
      }
    };
   return{
    rules: {
        sno: [{ validator: checkSno, trigger: "blur" }],
    }
   }
}

html代码:

        <el-form-item
          label="账号"
          :label-width="formLabelWidth"
          required
          prop="sno"
        >
          <el-input v-model="form.sno" autocomplete="off"></el-input>
        </el-form-item>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

html2canvas快速使用

一、概述 html2canvas是一个HTML渲染器&#xff0c;是一个脚本&#xff0c;它允许你直接在用户浏览器截取页面或部分网页的“屏幕截屏”。底层是基于DOM的&#xff0c;根据页面上可用的信息构建屏幕截图&#xff0c;它没有制作实际的屏幕截图&#xff0c;因此生成的图片并不一定…

NTT 的各类优化

参考文献&#xff1a; [Har14] Harvey D. Faster arithmetic for number-theoretic transforms[J]. Journal of Symbolic Computation, 2014, 60: 113-119.[Sei18] Seiler G. Faster AVX2 optimized NTT multiplication for Ring-LWE lattice cryptography[J]. Cryptology ePr…

DSP介绍及CCS

文章目录 CCS版本编译器CCS使用注意严禁中文 CCS的基本操作新建工程导入现有工程调整字体的大小工程界面恢复标签的使用 仿真盒小虫子进入在线Debug 芯片TMS320F28355基本介绍特性 DSP中特殊指令dsp指令中的EALLOW EDIS CCS TI官网 版本 CCS版本&#xff1a; CCS8.3.1.0004_…

C语言的基础概念

1、编译和链接 C语⾔是⼀⻔编译型计算机语⾔&#xff0c;C语⾔源代码都是⽂本⽂件&#xff0c;⽂本⽂件本⾝⽆法执⾏&#xff0c;必须通过编译器翻译和链接器的链接&#xff0c;⽣成⼆进制的可执⾏⽂件&#xff0c;可执⾏⽂件才能执⾏。 C语⾔代码是放在 .c 为后缀的⽂件中的…

玩转大模型行业应用,且看盘古大模型全栈工程能力展身手【云驻共创】

AI技术在金融和工业领域的应用不断扩展&#xff0c;促进了金融行业的数字化转型和产业升级。AI提供了专属财富管家和工业范式的解决方案&#xff0c;在金融领域的应用包括风险评估和投资建议&#xff0c;而在工业领域的应用则涵盖了数据分析和机器人操作。与此同时&#xff0c;…

【代数学习题4.2】从零理解范数与迹 —— 求数域元素的范数与迹

从零理解范数与迹 —— 求数域元素的范数与迹 写在最前面题目解答 2. 范数 N N N思路求解过程python求解 3. 数域 K K K 的范数 N K N_K NK​思路求解过程Python求解分析解题步骤 4. 迹 T T T求解过程共轭元素计算迹 python求解分析解题步骤 5. 数域 K K K 的迹 T K T_K …

第三届VECCTF-2023 Web方向部分wp

拳拳组合 题目描述&#xff1a;明喜欢保存密钥在某个文件上。请找到秘钥并读取flag文件。 开题&#xff0c;点不完的。源码提示&#xff1a; <!--据说小明很喜欢10的幂次方--> 扫一下看看&#xff0c;应该是有git泄露。 其它一些路由没什么用 git泄露拿下一堆码 pytho…

【Seata源码学习 】篇三 TM开启全局事务的过程

【Seata源码学习 】篇三 TM开启全局事务的过程 TM发送 单个或批量 消息 以发送GlobalBeginRequest消息为例 TM在执行拦截器链路前将向TC发送GlobalBeginRequest 消息 io.seata.tm.api.DefaultGlobalTransaction#begin(int, java.lang.String) Overridepublic String begin(…

微信小程序开发学习——顺序、选择、循环、数学函数

1.条件语句 只需在js中写JavaScript的条件语句就行 math对象&#xff1a; 代码如下&#xff1a; <!--pages/tiaojian/tiaojian.wxml--> <view class"box"><view class"title">输入x&#xff0c;条件输出y</view><view><…

MT8735/MTK8735安卓核心板规格参数介绍

MT8735核心板是一款高性能的64位Cortex-A53四核处理器&#xff0c;设计用于在4G智能设备上运行安卓操作系统。这款多功能核心板支持LTE-FDD/LTE-TDD/WCDMA/TD-SCDMA/EVDO/CDMA/GSM等多种网络标准&#xff0c;同时还具备WiFi 802.11a/b/g/n和BT4.0LE等无线通信功能。此外&#x…

Windows + Syslog-ng 发送eventlog 到Splunk indexer

1: 背景: 装了window Splunk universal forwarder 的 window server 要把event log 送到linux 的splunk indexer 上,由于网络的原因,不能直接发送数据到splunk indexer的话,要利用跳板机来实现: 2:架构: 3: 先说明每个类型server 上的安装情况: Window server: 安装S…

前端css粘性布局,顶部吸附效果(position: sticky)

sticky属性设置 /* 设置粘性布局 */ position: sticky; /* 拖动滚动条&#xff0c;当前元素超出文档0的位置时&#xff0c;触发定位效果&#xff08;同级元素位置不会受影响&#xff09; */ top: 0;页面初始效果 设置前&#xff08;滚动页面时&#xff0c;标签栏随页面滚动&a…

人工智能时代:深入了解与学以致用的智能科技

目录 前言人工智能的领域1. 医疗健康2. 交通与智能驾驶3. 教育领域4. 金融与人工智能5. 制造业与自动化 人工智能的应用1. 智能手机与语音助手2. 智能家居系统3. 自动驾驶汽车4. 医疗诊断与治疗5. 金融风控与预测分析 对人工智能的看法1. 科技的利弊2. 伦理和隐私问题3. 人工智…

树与二叉树堆:二叉树

二叉树的概念&#xff1a; 二叉树是树的一种&#xff0c;二叉树是一个节点&#xff0c;最多只有两个子节点&#xff0c;二叉树是一个特殊的树二叉树的度最大为2 从上图可得一棵二叉树是结点的一个有限集合&#xff0c;该集合: 或者为空由一个根结点加上两棵别称为左子树和右子…

【软考】文件的组织结构

目录 一、说明二、逻辑结构2.1 说明2.2 记录式文件2.2.1 说明2.2.2 顺序文件2.2.3 索引文件2.2.4 索引文件 2.3 流式文件 三、物理结构3.1 说明3.2 链接方式之隐式链接3.3 链接方式之显式链接 一、说明 1.组织结构是文件的组织形式。 2.逻辑结构为用户可见的的文件结构。 3.物理…

8Base集团通过SmokeLoader部署新的Phobos勒索软件变种

最近&#xff0c;8Base集团的威胁行为者通过Phobos勒索软件的变种展开了一系列金融动机的攻击。这一发现来自于思科Talos的研究结果&#xff0c;他们记录了网络犯罪分子活动的增加。 安全研究员Guilherme Venere在周五发表的详尽的两部分分析中表示&#xff1a;“该组织的大多…

OpenGL_Learn14(光照贴图)

1. 漫反射贴图 在光照场景中&#xff0c;它通常叫做一个漫反射贴图(Diffuse Map)&#xff08;3D艺术家通常都这么叫它&#xff09;&#xff0c;它是一个表现了物体所有的漫反射颜色的纹理图像。 我们会将纹理储存为Material结构体中的一个sampler2D 。我们将之前定义的vec3漫反…

元素定位与选择器

元素定位与选择器 做元素定位时&#xff0c;你是否曾遇到过以下难题 元素 ID 或 class 是动态生成的你使用了 CSS选择器去定位&#xff0c;但开发把元素CSS样式改掉了 这种情况下通常会测试失败 Cypress 如何解决上述难题 提供了 data-* 属性&#xff0c;包含了下面三个定…

阿里8年经验之谈 —— 分享一次接口性能摸底测试过程!

接口性能测试是用于验证应用程序中的接口是否可以满足系统的性能要求的一种测试方法。确定应用程序在各种负载条件下的性能指标&#xff0c;例如响应时间、吞吐量、并发性能等&#xff0c;以便提高系统的性能和可靠性。本文主要讲述接口性能测试从前期准备、方案设计到环境搭建…

数字化转型导师坚鹏:数字化时代银行网点厅堂营销5大关键点分析

数字化时代银行网点厅堂营销需要抓住以下5大关键点&#xff1a; 1、精准识别客户&#xff1a;在数字化时代&#xff0c;银行网点厅堂营销的关键在于精准识别客户。通过利用大数据和人工智能技术&#xff0c;银行可以分析客户的行为和需求&#xff0c;从而更好地了解客户&#…