el-form自定义校验规则

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

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

  1. <template>
  2. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  3. <el-form-item label="用户名" prop="username" :rules="usernameRules">
  4. <el-input v-model="form.username"></el-input>
  5. </el-form-item>
  6. <el-form-item>
  7. <el-button type="primary" @click="submitForm">提交</el-button>
  8. <el-button @click="resetForm">重置</el-button>
  9. </el-form-item>
  10. </el-form>
  11. </template>
  12. <script>
  13. export default {
  14. data() {
  15. return {
  16. form: {
  17. username: ''
  18. },
  19. rules: {
  20. username: [
  21. { required: true, message: '请输入用户名', trigger: 'blur' }
  22. ]
  23. }
  24. };
  25. },
  26. methods: {
  27. submitForm() {
  28. this.$refs.form.validate(valid => {
  29. if (valid) {
  30. // 表单验证通过,提交表单
  31. console.log('提交表单');
  32. } else {
  33. // 表单验证失败,打印错误信息
  34. console.log('表单验证失败');
  35. return false;
  36. }
  37. });
  38. },
  39. resetForm() {
  40. this.$refs.form.resetFields();
  41. }
  42. },
  43. computed: {
  44. usernameRules() {
  45. return [
  46. { required: true, message: '请输入用户名', trigger: 'blur' },
  47. { validator: this.validateUsername, trigger: 'blur' }
  48. ];
  49. }
  50. },
  51. methods: {
  52. validateUsername(rule, value, callback) {
  53. // 自定义校验规则
  54. if (value === 'admin') {
  55. callback(new Error('用户名已存在'));
  56. } else {
  57. callback();
  58. }
  59. }
  60. }
  61. };
  62. </script>

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

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

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

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

相关文章

若依前端npm run dev启动时报错

本文主要解决问题:若依前端npm run dev启动时报错,解决办法。 目录 1、第1种解决方案(亲测有效) 2、第2种解决方案(亲测有效) Error: error:0308010C:digital envelope routines::unsupportedat new Hash (node:internal/crypto/hash:67:19)at Object.createHash (node…

解决 adb install 错误INSTALL_FAILED_UPDATE_INCOMPATIBLE

最近给游戏出包&#xff0c;平台要求 v1 签名吧&#xff0c;AS 打包后&#xff0c;adb 执行安装到手机&#xff0c;我用的设备是google pixel6 , android 系统 13&#xff0c; 提示如下&#xff1a; adb install -r v5_android_202308161046.apk Performing Streamed Install a…

centos 安装.net 6 sdk

按照以下步骤在 CentOS 上安装 .NET 6 SDK&#xff1a; 更新系统&#xff1a; sudo yum update安装依赖项&#xff1a; sudo yum install -y curl libunwind libicu下载并添加 Microsoft 的软件包存储库密钥&#xff1a; sudo rpm -Uvh https://packages.microsoft.com/config/…

单片机第一季:零基础13——AD和DA转换

1&#xff0c;AD转换基本概念 51 单片机系统内部运算时用的全部是数字量&#xff0c;即0 和1&#xff0c;因此对单片机系统而言&#xff0c;无法直接操作模拟量&#xff0c;必须将模拟量转换成数字量。所谓数字量&#xff0c;就是用一系列0 和1 组成的二进制代码表示某个信号大…

Linux -- 进阶 Autofs自动挂载服务 实验详解

服务端创建共享目录&#xff0c; 客户端实现自动挂载 第一步 &#xff1a; 客户端&#xff0c;服务端 均关闭安全软件 [rootserver ~]# setenforce 0 [rootserver ~]# systemctl stop firewalld [rootnode1 ~]# setenforce 0 [rootnode1 ~]# systemctl stop firewalld 第二…

在K8s上处理nginx

基本说明 创建一个名为ssl的TLS类型的Secret对象&#xff0c;用于存储证书和密钥信息。 kubectl create secret tls ssl --certserver.crt --keyserver.key配置Nginx的events块&#xff0c;设置worker连接数为1024。 events {worker_connections 1024; }配置Nginx的http块&a…

MyBaits(单独使用,与整合无关)小白版

文章目录 概述比较配置写xml加载上面配置并执行加载配置的方法方式一 执行方法方式一方式二(MyBatis映射器) 写配置文件的映射文件设置对象的别名&#xff08;简写&#xff09;获取自动生成的主键 查询结果和java的映射规则基本类型映射&#xff1a;简单对象映射&#xff1a;嵌…

加盐加密算法

MD5加密加盐加密项目密码升级 MD5加密 MD5一系列公式进行复杂数学运算&#xff1b;特点&#xff1a;&#xff08;用途校验和、计算hash值方式、加密&#xff09; 1&#xff1a;定长&#xff1b;无论原始数据多长&#xff1b;算出的结果都是4或者8字节的版本。 2&#xff1a;冲…

Java多线程实战

Java多线程实战 java多线程&#xff08;超详细&#xff09; java自定义线程池总结 Java创建线程方式 方法1&#xff0c;继承Thread类 方法2&#xff0c;实现Runable接口 方法2-2&#xff0c;匿名内部类形式lambda表达式 方法3&#xff0c;实现Callable接口&#xff0c;允许…

【深入理解Linux内核锁】三、原子操作

我的圈子: 高级工程师聚集地 我是董哥,高级嵌入式软件开发工程师,从事嵌入式Linux驱动开发和系统开发,曾就职于世界500强企业! 创作理念:专注分享高质量嵌入式文章,让大家读有所得! 文章目录 1、原子操作思想2、整型变量原子操作2.1 API接口2.2 API实现2.2.1 原子变量结…

Shell 函数

Shell 函数 linux shell 可以用户定义函数&#xff0c;然后在shell脚本中可以随便调用。 shell中函数的定义格式如下&#xff1a; [ function ] funname [()] { action; [return int;] } 说明&#xff1a; 1、可以带function fun() 定义&#xff0c;也可以直接fun…

log4j:WARN No appenders could be found for logger问题

本文将idea场景下的使用。 IDEA中&#xff0c;将配置文件命名为log4j.properties&#xff08;该命名才会被自动加载&#xff09;&#xff0c; 并放到某个目录下&#xff08;通常放到resources目录&#xff09;&#xff0c;并在resources上右键&#xff0c;找到Mark Directory a…

微信程序 自定义遮罩层遮不住底部tabbar解决

一、先上效果 二 方法 1、自定义底部tabbar 实现&#xff1a; https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 官网去抄 简单写下&#xff1a;在代码根目录下添加入口文件 除了js 文件的list 需要调整 其他原封不动 代码&#xf…

Hadoop数据迁移distcp

Hadoop数据迁移distcp 准备工作 确认源集群&#xff08;a&#xff09;,目标集群&#xff08;b&#xff09;确认a集群的主节点和b集群的主节点确认两个集群的网络相通确认迁移模式&#xff08;全量迁移还是增量迁移&#xff09;&#xff0c;这里选择全量迁移 迁移文件 迁移t…

【路由协议】使用按需路由协议和数据包注入的即时网络模拟传递率(PDR)、总消耗能量和节点消耗能量以及延迟研究(Matlab代码实现)

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

斯坦福「小镇」开源AI智能体;小米应用商店将要求AI应用符合资质标准

&#x1f989; AI新闻 &#x1f680; 斯坦福「小镇」开源AI智能体 摘要:斯坦福研究人员开源了一个类似《西部世界》的数字化「小镇」,里面有25个AI智能体可以生活、工作、社交。这项研究被视为AGI的重要开端,可能会改变游戏、企业应用领域。网友期待这项技术改善游戏NPC的交互…

PyMuPDF`库实现PDF旋转功能

本文介绍了一个简单的Python应用程序&#xff0c;用于将PDF文件转换为旋转90度的PDF文件。主要用于csdn网站中导出的博客pdf是横向的&#xff0c;看起来不是很方便&#xff0c;才想到用python编制一个将pdf从横向转为纵向的功能。 功能 该PDF转换工具具有以下功能&#xff1a…

信息安全:防火墙技术原理与应用.

信息安全&#xff1a;防火墙技术原理与应用. 防火墙是网络安全区域边界保护的重要技术。为了应对网络威胁&#xff0c;联网的机构或公司将自己的网络与公共的不可信任的网络进行隔离&#xff0c;其方法是根据网络的安全信任程度和需要保护的对象&#xff0c;人为地划分若干安全…

C#工程建立后修改工程文件名与命名空间

使用之前的项目做二次开发&#xff0c;项目快结束的时候&#xff0c;需要把主项目的名称修改成我们想要的。 之前从来没有这么干过&#xff0c;记录一下。 步骤如下&#xff1a; 1&#xff1a;打开vs2010项目解决方案&#xff0c;重命名&#xff0c;如下图所示&#xff1a; …

SDP协议是什么,详解SDP协议

一、SDP协议简介 SDP&#xff08;Session Description Protocol&#xff09;是一种会话描述协议&#xff0c;用于描述多媒体会话的参数。它是一种文本协议&#xff0c;通常用于VoIP&#xff08;Voice over Internet Protocol&#xff09;和视频会议等应用中。SDP协议定义了一种…