Vue: el-form 自定义校验规则

Vue 的 el-form 组件可以使用自定义校验规则进行表单验证。自定义校验规则可以通过传递一个函数来实现,该函数接受要校验的字段的值作为参数,并返回一个布尔值或一个 Promise 对象。

下面是一个示例,演示如何在 el-form 中使用自定义校验规则:

<template><el-form ref="form" :model="form" :rules="rules" label-width="80px"><el-form-item label="用户名" prop="username" :rules="usernameRules"><el-input v-model="form.username"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">提交</el-button><el-button @click="resetForm">重置</el-button></el-form-item></el-form>
</template><script>
export default {data() {return {form: {username: ''},rules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' }]}};},methods: {submitForm() {this.$refs.form.validate(valid => {if (valid) {// 表单验证通过,提交表单console.log('提交表单');} else {// 表单验证失败,打印错误信息console.log('表单验证失败');return false;}});},resetForm() {this.$refs.form.resetFields();}},computed: {usernameRules() {return [{ required: true, message: '请输入用户名', trigger: 'blur' },{ validator: this.validateUsername, trigger: 'blur' }];}},methods: {validateUsername(rule, value, callback) {// 自定义校验规则if (value === 'admin') {callback(new Error('用户名已存在'));} else {callback();}}}
};
</script>

在上述例子中,我们定义了一个表单项 "用户名",并给它设置了两个校验规则,一个是必填规则,一个是自定义规则。自定义规则通过 `validator` 属性指向一个函数,该函数会在校验时调用。函数接受三个参数:`rule` 表示当前字段的验证规则,`value` 表示当前字段的值,`callback` 用来返回校验结果。当校验不通过时,通过调用 `callback` 函数并传递错误消息来报告校验失败。

这只是一个简单的例子,你可以根据你的具体需求来定义更复杂的自定义校验规则。

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

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

相关文章

Python“牵手”京东工业商城商品详情数据方法介绍

京东工业平台&#xff08;imall.jd.com&#xff09;是一个 B2B 电商平台&#xff0c;提供了丰富的工业品类商品&#xff0c;涵盖了机械、化工、建材、劳保用品等品类。如果您需要采集京东工业平台的商品详情数据&#xff0c;可以尝试以下步骤&#xff1a; 选定目标品类和 SKU …

433. 最小基因变化

基因序列可以表示为一条由 8 个字符组成的字符串&#xff0c;其中每个字符都是 A、C、G 和 T 之一。 假设我们需要调查从基因序列 start 变为 end 所发生的基因变化。一次基因变化就意味着这个基因序列中的一个字符发生了变化。 例如&#xff0c;"AACCGGTT" -->…

React组件实例的三大属性

React组件实例的三大属性分别是&#xff1a;state、props和refs。 State属性&#xff1a;用来存储组件内部的状态&#xff0c;只能在组件内部修改。当state被修改时&#xff0c;React会重新渲染组件。 Props属性&#xff1a;用来传递父组件的数据到子组件中&#xff0c;是组件…

Redis_哨兵模式

9. 哨兵模式 9.1 简介 当主库宕机&#xff0c;在从库中选择一个&#xff0c;切换为主库。 问题: 主库是否真正宕机?哪一个从库可以作为主库使用?如何实现将新的主库的信息通过给从库和客户端&#xff1f; 9.2 基本流程 哨兵主要任务&#xff1a; 监控选择主库通知 会有…

Win11中使用pip或者Cython报错 —— error: Microsoft Visual C++ 14.0 is required.

第一步&#xff1a;下载Visual Studio 2019 下载地址&#xff1a; https://learn.microsoft.com/zh-cn/visualstudio/releases/2019/release-notes 第二步&#xff1a;安装组件 选择单个组件&#xff0c;勾选以下两个组件 其他错误&#xff1a; 无法打开文件“python37.li…

AWS上传私有windows server2019镜像64位

一.制作自己的镜像 我使用的是esxi&#xff0c;建立一个windows虚拟机&#xff0c;开启。 根据aws官方文档&#xff0c;虚拟机里的系统重要需要注意以下几点&#xff1a; 1.只有一张网卡&#xff0c;ip获取配置成dhcp。 2.关闭系统防火墙。 3.开启windows rdp 远程功能。 …

iOS开发-WebRTC本地直播高分辨率不显示画面问题

iOS开发-WebRTC本地直播高分辨率不显示画面问题 在之前使用WebRTC结合ossrs进行推流时候&#xff0c;ossrs的播放端无法看到高分辨率画面问题。根据这个问题&#xff0c;找到了解决方案。 一、WebRTC是什么 WebRTC是什么呢&#xff1f; WebRTC (Web Real-Time Communicatio…

【ES】笔记-函数参数默认值

函数参数默认值 ES6 允许给函数参数赋值初始值 1. 形参初始值 具有默认值的参数&#xff0c;一般放到最后 function add(a,b,c10){return abc}let resultadd(1,2);console.log(result);2. 与解构赋值结合 function connect({host"127.0.0.1",username,password,port…

FlinkCDC能读取到快照,但是无法输出更新数据

FlinkCDC能读取到快照&#xff0c;但是无法输出更新数据 发现是并行度问题&#xff0c;当我的并行度超过1的时候就无法捕获更新。 public static void main(String[] args) throws Exception {System.setProperty("HADOOP_USER_NAME", "lcq");Configurati…

python selenium如何保存网站的cookie用于下次自动登录

## 一、python selenium如何保存网站的cookie 使用Selenium保存网站的Cookie非常简单。下面是一个示例&#xff0c;展示了如何使用Selenium打开网站&#xff0c;然后保存获取到的Cookie&#xff1a; from selenium import webdriver# 初始化浏览器 browser webdriver.Chrome…

数据结构与算法-数组(附阿里面试题)

一 面试经典&#xff1a; 给你一个文件里面包含全国人民&#xff08;14亿&#xff09;的年龄数据&#xff08;0~180&#xff09;&#xff0c;现在要你统计每一个年龄 有多少人&#xff1f; 给定机器为 单台2CPU2G内存。不得使用现成的容器&#xff0c;比如map等。&am…

多个 Github 账户访问 Github

文章目录 多个 Github 账户访问 Github背景步骤 参考 多个 Github 账户访问 Github 背景 如果我想在这台电脑上同时使用两个 Github 账号怎么办呢&#xff1f; 你主机上的 SSH 公钥只能标识出一个账号。如果需要使用另外一个git账号&#xff0c;访问仓库&#xff0c;你需要创…

Java基础篇--String 类

Java中的String类是用于处理字符串的核心类之一。它属于Java的标准库&#xff0c;并提供了许多操作字符串的方法。 String类是不可变的&#xff0c;这意味着一旦创建了一个String对象&#xff0c;它的值就不能被改变。当对字符串进行操作时&#xff0c;实际上是创建了一个新的…

【博客695】k8s subPathExpr作用

k8s subPathExpr作用 场景&#xff1a; 对于一个deployment或者job拉起的服务&#xff0c;所有pod都是一样的配置&#xff0c;如果都挂载了宿主机的同一个目录&#xff0c;那么就会互相干扰&#xff0c;我们希望挂载相同目录&#xff0c;且在这个目录下&#xff0c;每个pod建立…

“深入理解JVM:Java虚拟机的工作原理揭秘“

标题&#xff1a;深入理解JVM&#xff1a;Java虚拟机的工作原理揭秘 摘要&#xff1a;本文将深入解析Java虚拟机&#xff08;JVM&#xff09;的工作原理&#xff0c;包括JVM的组成部分、类加载过程、运行时数据区域、垃圾回收机制等。通过详细的代码示例&#xff0c;帮助读者更…

考虑分布式电源的配电网无功优化问题研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

React Router 6

1.概述 React Router 以三个不同的包发布到 npm 上&#xff0c;它们分别为&#xff1a; react-router: 路由的核心库&#xff0c;提供了很多的&#xff1a;组件、钩子。 react-router-dom: 包含react-router所有内容&#xff0c;并添加一些专门用于 DOM 的组件&#xff0c;例如…

算法练习Day43|● 518. 零钱兑换 II ● 377. 组合总和 Ⅳ

LeetCode:518. 零钱兑换 II 518. 零钱兑换 II - 力扣&#xff08;LeetCode&#xff09; 1.思路 求组合数&#xff0c;先遍历物品再遍历背包&#xff0c;dp[]数组累加即可。 2.代码实现 1class Solution {2 public int change(int amount, int[] coins) {34 int[…

Shell编程之条件测试、if语句、case语句

条件语句 一、条件测试1.1 测试命令1.1 文件测试1.2 整数比较1.3 字符串比较1.4 逻辑测试1.4.1 逻辑与 &&1.4.2 逻辑或 || 1.4.3 组合应用1.5 多个命令组合执行 ( ) { } 二、if语句2.1单分支结构2.2 多分支结构2.4 if语句练习2.4.1 单分支2.4.2 简单的交互式分数反馈 三…

Qt 编译程序打包依赖库

windows环境 使用windeployqt.exe 打包 # 进入exe目录&#xff0c;执行windeployqt命令&#xff0c;注意Qt的安装目录 D:\Qt\Qt5.9.6\5.9.6\mingw53_32\bin\windeployqt.exe my.exelinux环境 使用ldd命令打包 #!/bin/bash LibDir$PWD"/lib" Tag$1 lib_array($(ld…