VUE3-Elementplus-form表单-笔记

 1. 结构相关

      el-row表示一行,一行分成24份

       el-col表示列  

       (1) :span="12"  代表在一行中,占12份 (50%)

       (2) :span="6"   表示在一行中,占6份  (25%)

       (3) :offset="3" 代表在一行中,左侧margin份数

       el-form 整个表单组件

       el-form-item 表单的一行 (一个表单域)

       el-input 表单元素(输入框)

    2. 校验相关

       (1) el-form => :model="ruleForm"      绑定的整个form的数据对象 { xxx, xxx, xxx }

       (2) el-form => :rules="rules"         绑定的整个rules规则对象  { xxx, xxx, xxx }

       (3) 表单元素 => v-model="ruleForm.xxx" 给表单元素,绑定form的子属性

       (4) el-form-item => prop配置生效的是哪个校验规则 (和rules中的字段要对应)

/ 整个表单的校验规则

// 1. 非空校验 required: true      message消息提示,  trigger触发校验的时机 blur change

// 2. 长度校验 min:xx, max: xx

// 3. 正则校验 pattern: 正则规则    \S 非空字符

// 4. 自定义校验 => 自己写逻辑校验 (校验函数)

//    validator: (rule, value, callback)

//    (1) rule  当前校验规则相关的信息

//    (2) value 所校验的表单元素目前的表单值

//    (3) callback 无论成功还是失败,都需要 callback 回调

//        - callback() 校验成功

//        - callback(new Error(错误信息)) 校验失败

相应代码:

vue3中,以按需引入了elementplus和icons 


<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import {ref} from 'vue'const isRegister = ref(false)
//用于提交整个form表单数据
const formModel=ref({username:'',password:'',repassword:''
})
//用于校验表单数据
const rules={username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 5, max: 10, message: '用户名必须是5-10位的字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ pattern: /^\S{6,15}$/, message: '密码必须是6-15位', trigger: 'blur' }],//自定义校验repassword:[{ required: true, message: '请输入密码', trigger: 'blur' },{ pattern: /^\S{6,15}$/, message: '密码必须是6-15位', trigger: 'blur' },{validate:(rule,value,callback)=>{if(value!==formModel.value.password){callback(new Error('两次输入的密码不一致'))}else{callback()//不成功也要callback }}}]
}
</script>                                           
<template><!-- el-row表示一行,一行表示24分 --><!-- :span表示一行中占几份 :offset在一行中左侧margin份数 --><el-row class="login-page"><el-col :span="12" class="bg"></el-col><el-col :span="6" :offset="3" class="form"><!-- 注册相关表单 --><el-form:model="formModel":rules="rules"ref="form"size="large"autocomplete="off"v-if="isRegister"><el-form-item><h1>注册</h1></el-form-item><el-form-item prop="username"><el-inputv-model="formModel.username":prefix-icon="User"placeholder="请输入用户名"></el-input></el-form-item><el-form-item prop="password"><el-inputv-model="formModel.password":prefix-icon="Lock"type="password"placeholder="请输入密码"></el-input></el-form-item><el-form-item prop="repassword"><el-inputv-model="formModel.repassword":prefix-icon="Lock"type="password"placeholder="请输入再次密码"></el-input></el-form-item><el-form-item><el-buttonclass="button"type="primary"auto-insert-space>注册</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = false">← 返回</el-link></el-form-item></el-form><!-- 登录相关表单 --><el-form:model="formModel":rules="rules"size="large"autocomplete="off"v-else><el-form-item><h1>登录</h1></el-form-item><el-form-item prop="username"><el-inputv-model="formModel.username":prefix-icon="User"placeholder="请输入用户名"></el-input></el-form-item><el-form-item prop="password"><el-inputv-model="formModel.password":prefix-icon="Lock"type="password"placeholder="请输入密码"></el-input></el-form-item><el-form-item class="flex"><div class="flex"><el-checkbox>记住我</el-checkbox><el-link type="primary" :underline="false">忘记密码?</el-link></div></el-form-item><el-form-item><el-buttonclass="button"type="primary"auto-insert-space>登录</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = true">注册 →</el-link></el-form-item></el-form></el-col></el-row>
</template><style lang="scss" scoped>
.login-page {height: 100vh;background-color: #fff;.bg {background: url('../../assets/logo2.png') no-repeat 60% center / 240px auto,url('../../assets/login_bg.jpg') no-repeat center / cover;border-radius: 0 20px 20px 0;}.form {display: flex;flex-direction: column;justify-content: center;user-select: none;.title {margin: 0 auto;}.button {width: 100%;}.flex {width: 100%;display: flex;justify-content: space-between;}}
}
</style>

代码中理解点:

实例代码:

const rules = {username: [{ required: true, message: '请输入用户名', trigger: 'blur' }, // 必填项,触发条件为失焦{ min: 5, max: 10, message: '用户名必须是5-10位的字符', trigger: 'blur' } // 字符长度限制,触发条件为失焦],password: [{ required: true, message: '请输入密码', trigger: 'blur' }, // 必填项,触发条件为失焦{ pattern: /^\S{6,15}$/, message: '密码必须是6-15位', trigger: 'blur' }, // 正则表达式,非空白字符,长度6-15,触发条件为失焦{ validator: validatePassword, trigger: 'blur' } // 自定义校验函数,触发条件为失焦],email: [{ required: true, message: '请输入邮箱地址', trigger: 'blur' }, // 必填项,触发条件为失焦{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' } // 类型为邮箱,触发条件为失焦],age: [{ type: 'number', min: 18, max: 60, message: '年龄必须在18到60岁之间', trigger: 'blur' } // 类型为数字,数值范围18-60,触发条件为失焦],website: [{ type: 'url', message: '请输入正确的网址', trigger: 'blur' } // 类型为网址,触发条件为失焦],agree: [{ type: 'boolean', required: true, message: '请同意协议', trigger: 'change' } // 类型为布尔值,必填项,触发条件为改变],colors: [{ type: 'array', required: true, message: '请选择至少一个颜色', trigger: 'change' } // 类型为数组,必填项,触发条件为改变],birthdate: [{ type: 'date', required: true, message: '请选择生日', trigger: 'change' } // 类型为日期,必填项,触发条件为改变],phone: [{ pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' } // 正则表达式,校验手机号码,触发条件为失焦],hexColor: [{ type: 'hex', message: '请输入正确的16进制颜色值', trigger: 'blur' } // 类型为16进制颜色值,触发条件为失焦],custom: [{ validator: customValidator, trigger: 'change' } // 自定义校验函数,触发条件为改变]
};// 自定义校验函数
const validatePassword = (rule, value, callback) => {if (value.length < 8) {callback(new Error('密码至少8位'));} else {callback();}
};const customValidator = (rule, value, callback) => {if (value !== 'customValue') {callback(new Error('自定义校验不通过'));} else {callback();}
};

解释

  • required: 必填项。
     javascript 

    复制代码

    { required: true, message: '请输入用户名', trigger: 'blur' }

  • minmax: 限制长度或数值范围。
     javascript 

    复制代码

    { min: 5, max: 10, message: '用户名必须是5-10位的字符', trigger: 'blur' }

  • pattern: 正则表达式校验。
     javascript 

    复制代码

    { pattern: /^\S{6,15}$/, message: '密码必须是6-15位', trigger: 'blur' }

  • type: 校验字段的类型。
     javascript 

    复制代码

    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }

    其他类型包括:string, number, boolean, method, regexp, integer, float, array, object, enum, date, url, hex
  • validator: 自定义校验函数。
     javascript 

    复制代码

    { validator: validatePassword, trigger: 'blur' }

  • len: 校验长度(适用于字符串和数组)。
     javascript 

    复制代码

    { len: 6, message: '长度必须为6位', trigger: 'blur' }

  • enum: 枚举类型校验。
     javascript 

    复制代码

    { type: 'enum', enum: ['option1', 'option2'], message: '请选择一个有效的选项', trigger: 'change' }

  • whitespace: 校验字段是否包含空白字符。
     javascript 

    复制代码

    { whitespace: true, message: '该字段不能包含空格', trigger: 'blur' }

  • trigger: 定义校验规则触发的条件。
     javascript 

    复制代码

    trigger: 'blur' // 或 'change'

  • transform: 在校验前对字段的值进行转换。
     javascript 

    复制代码

    { type: 'number', transform(value) { return Number(value); }, message: '请输入有效的数字', trigger: 'blur' }
     

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

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

相关文章

后劳动经济学(PLE):AI时代的工作未来

引言 随着人工智能&#xff08;AI&#xff09;和自动化技术的飞速发展&#xff0c;我们迎来了一个新的经济范式——后劳动经济学&#xff08;PLE&#xff09;。这一概念主要讨论在AI和自动化技术超越人类能力的关键领域后&#xff0c;机器将不可避免地在许多经济活动中取代人类…

如何玩单机版:QQ音速

前言 我是研究单机的老罗&#xff0c;今天教大家带来一款怀旧游戏QQ音速 的教程。根据我的文章&#xff0c;一步一步就可以玩了。 如今市面上的资源参差不齐&#xff0c;大部分的都不能运行&#xff0c;本人亲自测试&#xff0c;运行视频如下&#xff1a; QQ音速 搭建教程 此…

python之GIL锁详解

目录 1.GIL是什么以及影响 2.为什么会有GIL锁&#xff1f; 1.GIL是什么以及影响 在Python中&#xff0c;多线程的并发性受到全局解释器锁&#xff08;GIL&#xff0c;Global Interpreter Lock&#xff09;的影响。GIL是CPython&#xff08;Python的官方实现&#xff09;中的…

vscode下无法识别node、npm的问题

node : 无法将“node”项识别为 cmdlet、函数、脚本文件或可运行程序的名称 因为node是在cmd安装的&#xff0c;是全局安装的&#xff0c;并不是在这个项目里安装的。 解决方案&#xff1a; 1.在vscode的控制台&#xff0c;针对一个项目安装特定版本的node&#xff1b; 2.已经…

C++(Python)肥皂泡沫普拉托边界膜曲面模型算法

&#x1f3af;要点 &#x1f3af;肥皂泡二维流体模拟 | &#x1f3af;泡沫普拉托边界膜曲面模型算法演化厚度变化 | &#x1f3af;螺旋曲面三周期最小结构生成 &#x1f4dc;皂膜用例&#xff1a;Python计算物理粒子及拉格朗日和哈密顿动力学 | Python和MATLAB粘性力接触力动…

SAP系统中的应收账款(客户主数据,日常交易,催收,争议管理)

1. 客户主数据 Customer Accounts (客户账户&#xff09;:客户账户由两部分General Data&#xff08;通用数据&#xff09;和Company Code Data&#xff08;公司代码段数据&#xff09;组成。通用数据是在client级别独立于公司代码的数据&#xff0c;例如客户的地址&#xff0…

鸿蒙开发设备管理:【@ohos.multimodalInput.inputEventClient (注入按键)】

注入按键 InputEventClient模块提供了注入按键能力。 说明&#xff1a; 本模块首批接口从API version 8开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。本模块接口均为系统接口&#xff0c;三方应用不支持调用。 导入模块 import inputEventCli…

爱情再启:庄国栋笑谈“玫瑰人生”爱情觉悟

庄国栋&#xff0c;这位电视剧《玫瑰的故事》中的男主角&#xff0c; 最近在一次采访中坦言&#xff1a;“如果给我一次重来的机会&#xff0c; 我绝对会毫不犹豫地选择爱情&#xff01;” 听到这话&#xff0c; 我不禁想&#xff0c;庄先生&#xff0c;您是不是被剧里的玫瑰…

Solidworke学习(装配体3)

目录 本节学习内容&#xff1a; 一、高级配合 &#xff08;1&#xff09;对称配合 &#xff08;2&#xff09;宽度配合 &#xff08;3&#xff09;距离配合 二、机械配合 &#xff08;1&#xff09;凸轮配合 &#xff08;2&#xff09;槽口配合 三、快捷菜单 本节学习…

python工作目录与文件目录

工作目录 文件目录&#xff1a;文件所在的目录 工作目录&#xff1a;执行python命令所在的目录 D:. | main.py | ---data | data.txt | ---model | | model.py | | train.py | | __init__.py | | | ---nlp | | | bert.py | …

计算机网络期末复习(大题+小题)

计算机网络期末复习 一、计算机网络概述 Point 1 计算机网络就是以传输信息为基本目的&#xff0c;用通信线路和通信设备将多个计算机连接起来的计算机系统的集合。由自治的计算机互联起来的结合体。 Point 2 按网络的覆盖范围进行分类 &#xff08;1&#xff09;局域网*…

解锁Transformer的鲁棒性:深入分析与实践指南

&#x1f6e1;️ 解锁Transformer的鲁棒性&#xff1a;深入分析与实践指南 Transformer模型自从由Vaswani等人在2017年提出以来&#xff0c;已经成为自然语言处理&#xff08;NLP&#xff09;领域的明星模型。然而&#xff0c;模型的鲁棒性——即模型在面对异常、恶意或不寻常…

人机交互新维度|硕博电子发布双编码器操作面板、无线操作面板等新品

6月15日&#xff0c;硕博电子召开了一场新品发布会&#xff0c;向业界展示了多项前沿技术成果&#xff0c;其中备受瞩目的当属SPM-KEYP-D08双编码器操作面板、SPM-KEYP-D16W无线操作面板、SPR-HT-XK12A无线手持发射端以及SPQ-WT-B01洒水车专用控制面板。这些创新产品的亮相&…

文心一言 VS 讯飞星火 VS chatgpt (292)-- 算法导论21.3 5题

五、证明&#xff1a;任何具有 m 个 MAKE-SET、UNION 和 FIND-SET 操作的序列&#xff0c;这里所有的 LINK 操作都出现在 FIND-SET 操作之前&#xff0c;如果同时使用路径压缩和按秩合并启发式策略&#xff0c;则这些操作只需 O(m) 的时间。在同样情况下&#xff0c;如果只使用…

Class Constructors and Destructors (类的构造函数和析构函数)

Class Constructors and Destructors [类的构造函数和析构函数] 1. Declaring and Defining Constructors (声明和定义构造函数)2. Using Constructors (使用构造函数)3. Default Constructors (默认构造函数)4. Destructors (析构函数)5. Improving the Stock Class (改进 Sto…

MT1597 平行线

题目 用下面的数据类型表示线&#xff1a; struct POINT { //点 int x, y; //坐标值x和y } ; struct LINE { //线 POINT s, e; //线的两端 } ; 输入2个线段的端点的坐标值x和y&#xff0c;判断两条线段所在直线是否为平行线。如果两线段共线&#xff0c;判为不平行。 输入…

强强联合:Apache Kylin与Impala的集成之道

&#x1f517; 强强联合&#xff1a;Apache Kylin与Impala的集成之道 在大数据时代&#xff0c;Apache Kylin和Impala都是分析型数据库的佼佼者&#xff0c;分别以预计算的OLAP引擎和高性能的SQL on Hadoop解决方案而闻名。将两者集成&#xff0c;可以充分利用Kylin的预计算能…

C程序设计谭浩强第五版

第三章 程序习题 1、第2题2、第2题3、第3题4、第4题 1、第2题 假如我国国民生产总值的年增长率为7%&#xff0c; 计算10年后我国国民生产总值与现在相比增长多少百分比。计算公式为 p ( 1 r ) n p (1r)^n p(1r)n ,其中r为年增长率&#xff0c;n为年数&#xff0c;p为与现在…

thinkphp通过with查询,并通过关联表进行筛选

直接添加一个where条件,然后条件里面用表名.字段即可,非常方便 需要注意的一点是在fastadmin里面,$this->auth->getGroupIds()这样获取是会获取到缓存里面的值,必须重新登录之后才可以得到最新的用户组,这个问题导致困扰了我一晚上 $usage $this->model->with([us…

Oracle数据库教程

Oracle数据库教程 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入探讨Oracle数据库的基础知识、特性以及在Java中的应用。 什么是Oracle数据库&…