表单验证 ---- 在Vue2中使用ElementUI进行表单验证

目录

前言

给表单绑定对应属性

在data中定义数据对象和表单的定义规则

与数据对象双向绑定

对整个表单进行验证


前言

在做项目时,对于表单进行验证是我们必不可少的

例如

搭建一个基本的登录界面

<div class="form"><h1>登录</h1><el-card shadow="never" class="login-card"><!--登录表单--><el-form><el-form-item><el-input placeholder="请输入手机号" /></el-form-item><el-form-item><el-input placeholder="请输入密码" /></el-form-item><el-form-item><el-checkbox>用户平台使用协议</el-checkbox></el-form-item><el-form-item><el-button style="width:350px" type="primary">登录</el-button></el-form-item>
</el-form>

表单嵌套一般都是

  el-form > el-form-item > el-input 

进行验证前,我们需要先

给表单绑定对应属性

对<el-form>标签,我们绑定三个属性

ref:该属性是为了能获取到表单组件

model:表单的数据对象

rules:表单的定义规则

 <el-form ref="form" :model="loginForm" :rules="loginRules"></el-form>

在data中定义数据对象和表单的定义规则

model数据对象loginForm:

rules规则对象loginRules:

如上代码

对于验证规则的制定中

required:true/false(是否必填)

message:提示信息

trigger:通过什么触发(一般都是blur,失去焦点时触发)

pattern:正则表达式

min:最少位数

max:最大位数

对于复选框的验证,required是无法进行验证的,required只能坚持null 和 undefine

对于复选框的验证使用

validator:()=>{}

回调函数三个参数

rule规则
value检查的数据 true/false(是否勾选)
callback 函数 执行这个函数

代码

data() {return {loginForm: {phoneNumber: '',password: '',isAgree: true},// 校验规则loginRules: {phoneNumber: [{required: true,message: '请输入手机号',trigger: 'blur'}, {pattern: /^1[3-9]\d{9}$/,message: '手机号格式不正确',trigger: 'blur'}],password: [{required: true,message: '请输入密码',trigger: 'blur'}, {min: 6,max: 12,message: '密码应在6-12位',trigger: 'blur'}],isAgree: [{validator: (rule, value, callback) => {value ? callback() : callback(new Error('必须要勾选用户平台协议'))}}]}}}

与数据对象双向绑定

 <el-form ref="form" :model="loginForm" :rules="loginRules"><el-form-item prop="phoneNumber"><el-input v-model="loginForm.phoneNumber" placeholder="请输入手机号" /></el-form-item><el-form-item prop="password"><el-input v-model="loginForm.password" show-password placeholder="请输入密码" /></el-form-item><el-form-item prop="isAgree"><el-checkbox v-model="loginForm.isAgree">用户平台使用协议</el-checkbox></el-form-item><el-form-item><el-button style="width:350px" type="primary" @click="login">登录</el-button></el-form-item>
</el-form>

<el-form-item></el-form-item>

表单验证,必须填写prop参数

使用v-model双向绑定data中的数据对象

对于密码框

加上

show-password

密码就不是明文

对整个表单进行验证

点击登录时,需要对整个表单进行验证

使用

validate

login() {this.$refs.form.validate((isOK) => {if (isOK) {alert('校验通过')}})}

点击登录时,调用该方法对表单进行验证

完整代码


<template>
<div class="form"><h1>登录</h1><el-card shadow="never" class="login-card"><!--登录表单--><el-form ref="form" :model="loginForm" :rules="loginRules"><el-form-item prop="phoneNumber"><el-input v-model="loginForm.phoneNumber" placeholder="请输入手机号" /></el-form-item><el-form-item prop="password"><el-input v-model="loginForm.password" show-password placeholder="请输入密码" /></el-form-item><el-form-item prop="isAgree"><el-checkbox v-model="loginForm.isAgree">平台用户协议</el-checkbox></el-form-item><el-form-item><el-button style="width: 350px;" type="primary" @click="login">登录</el-button></el-form-item></el-form></el-card></div></div>
</template>
<script>export default {name: 'Login',data() {return {isShow: false,loginForm: {phoneNumber: '',password: '',isAgree: true},// 校验规则loginRules: {phoneNumber: [{required: true,message: '请输入手机号',trigger: 'blur'}, {pattern: /^1[3-9]\d{9}$/,message: '手机号格式不正确',trigger: 'blur'}],password: [{required: true,message: '请输入密码',trigger: 'blur'}, {min: 6,max: 12,message: '密码应在6-12位',trigger: 'blur'}],isAgree: [{validator: (rule, value, callback) => {value ? callback() : callback(new Error('必须要勾选用户平台协议'))}}]}}},methods: {login() {this.$refs.form.validate((isOk) => {if (isOk) {alert("表单验证成功")}})}}
}
</script>

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

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

相关文章

电商物流查询:未来的发展方向

在电商日益繁荣的时代&#xff0c;物流信息查询不仅关乎消费者体验&#xff0c;更影响着电商运营的效率。快速、准确地追踪物流信息至关重要。本文将简述物流信息快速追踪的价值&#xff0c;并重点介绍固乔快递查询助手这一高效查询工具及其批量查询功能。 一、物流信息快速追踪…

一、docker的安装与踩坑

目录 一、安装docker&#xff08;centos7安装docker&#xff09;1.安装环境前期准备2.参考官网安装前准备3.参考官网安装步骤开始安装docker4.运行首个容器 二、安装一些软件的踩坑1.启动docker踩坑2.安装mysql踩坑3.罕见问题 三、关于我的虚拟机 一、安装docker&#xff08;ce…

鸿蒙开发(三)理解UIAbility

前文提到过&#xff0c;在使用DevEco创建鸿蒙项目的时候&#xff0c;会选择Empty Ability&#xff0c;那么这个Ability是什么呢&#xff1f;其实对比Android Studio创建Android羡慕时选择的Empty Activity&#xff0c;感觉Harmony的Ability更像是Android的Activity&#xff0c;…

持久双向通信网络协议-WebSocket-入门案例实现demo

1 介绍 WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手&#xff0c;两者之间就可以创建持久性的连接&#xff0c; 并进行双向数据传输。 HTTP协议和WebSocket协议对比&#xff1a; HTTP是短连接&#xff0…

利用人工智能和机器人技术实现复杂的自动化任务!

这篇mylangrobot项目由neka-nat创建&#xff0c;本文已获得作者Shirokuma授权进行编辑和转载。 https://twitter.com/neka_nat GitHub-mylangrobot &#xff1a;GitHub - neka-nat/mylangrobot: Language instructions to mycobot using GPT-4V 引言 本项目创建了一个使用GPT-4…

【K8S 云原生】Kurbernets集群的调度策略

目录 一、Kubernetes的list-watch机制 1、List-watch 2、创建pod的过程&#xff1a; 二、scheduler调度的过程和策略&#xff1a; 1、简介 2、预算策略&#xff1a;predicate 3、优先策略&#xff1a; 3.1、leastrequestedpriority&#xff1a; 3.2、balanceresourceal…

爬虫利器一览

前言 爬虫&#xff08;英文&#xff1a;spider&#xff09;&#xff0c;可以理解为简单的机器人&#xff0c;如此一个“不为名利而活&#xff0c;只为数据而生&#xff0c;目标单纯&#xff0c;能量充沛&#xff0c;不怕日晒雨淋&#xff0c;不惧寒冬酷暑”的家伙&#xff0c;…

含PEMFC的热电联供系统能量管理策略Simulink仿真

1.光伏发电系统 在直流微电网中&#xff0c;光伏电池系统经过升压DC/DC变换器接入直流微电网提供功率。在不同的系统运行条件下&#xff0c;光伏电池系统有三种工作模式&#xff1a;MPPT 模式、下垂模式和空闲模式。由于光伏阵列的输出特性随着环境条件影响&#xff0c;光伏电池…

【科技素养题】少儿编程 蓝桥杯青少组科技素养题真题及解析第22套

少儿编程 蓝桥杯青少组科技素养题真题及解析第22套 1、植物的叶子多为绿色,这主要是因为它们含有 A、绿色色素 B、叶绿素 C、花青素 D、细胞 答案:B 考点分析:主要考查小朋友们生物知识的储备;叶绿素是植物叶子中的一种色素,它可以吸收太阳光中的能量并转化为植物所…

数据库多表查询练习题

二、多表查询 1. 创建 student 和 score 表 CREATE TABLE student ( id INT ( 10 ) NOT NULL UNIQUE PRIMARY KEY , name VARCHAR ( 20 ) NOT NULL , sex VARCHAR ( 4 ) , birth YEAR , department VARCHAR ( 20 ) , address VARCHAR ( 50 ) ); 创建 s…

嵌入式软件工程师面试题——2025校招社招通用(十八)

说明&#xff1a; 面试群&#xff0c;群号&#xff1a; 228447240面试题来源于网络书籍&#xff0c;公司题目以及博主原创或修改&#xff08;题目大部分来源于各种公司&#xff09;&#xff1b;文中很多题目&#xff0c;或许大家直接编译器写完&#xff0c;1分钟就出结果了。但…

Android基于Matrix绘制PaintDrawable设置BitmapShader,以手指触点为中心显示原图的圆切图,Kotlin(4)

Android基于Matrix绘制PaintDrawable设置BitmapShader&#xff0c;以手指触点为中心显示原图的圆切图&#xff0c;Kotlin&#xff08;4&#xff09; 这篇 Android基于Matrix绘制PaintDrawable设置BitmapShader&#xff0c;以手指触点为中心显示原图像圆图&#xff0c;Kotlin&am…

电阻表示方法和电路应用

电阻 电阻的表示方法 直标法 直标法是将电阻器的类别及主要技术参数的数值直接标注在电阻器表面上 通常用3位阿拉伯数字来标注片状电阻的阻值&#xff0c;其中第1位数代表阻值的第1位有效数&#xff1b;第2位数代表阻值的第二位有效数字&#xff1b;第3位数代表阻值倍率&…

腾讯云服务器多少钱?2024年腾讯云服务器报价明细表

腾讯云服务器租用价格表&#xff1a;轻量应用服务器2核2G3M价格62元一年、2核2G4M价格118元一年&#xff0c;540元三年、2核4G5M带宽218元一年&#xff0c;2核4G5M带宽756元三年、轻量4核8G12M服务器446元一年、646元15个月&#xff0c;云服务器CVM S5实例2核2G配置280.8元一年…

小迪安全第二天

文章目录 一、Web应用&#xff0c;架构搭建二、web应用环境架构类三、web应用安全漏洞分类总结 一、Web应用&#xff0c;架构搭建 #网站搭建前置知识 域名&#xff0c;子域名&#xff0c;dns,http/https,证书等 二、web应用环境架构类 理解不同web应用组成角色功能架构 开发…

探索未来餐饮:构建创新连锁餐饮系统的技术之旅

随着数字化时代的发展&#xff0c;连锁餐饮系统的设计和开发不再仅仅关乎订单处理&#xff0c;更是一场充满技术创新的冒险。在本文中&#xff0c;我们将深入研究连锁餐饮系统的技术实现&#xff0c;带你探索未来餐饮业的数字化美食之旅。 1. 构建强大的后端服务 在设计连锁…

【网络取证篇】Windows终端无法使用ping命令解决方法

【网络取证篇】Windows终端无法使用ping命令解决方法 以Ping命令为例&#xff0c;最近遇到ping命令无法使用的情况&#xff0c;很多情况都是操作系统"环境变量"被改变或没有正确配置导致—【蘇小沐】 目录 1、实验环境&#xff08;一&#xff09;无法ping命令 &a…

中霖教育:2024年注册会计师报名缴费时间

注册会计师考试的报考人数逐年攀升&#xff0c;对于想要报考注会的考生来说&#xff0c;了解报名时间做好备考规划十分重要。 2024年注会报名时间已经确定 报名时间&#xff1a;4月8日8:00—4月30日20:00。 交费时间&#xff1a;6月13日—6月28日8:00-20:00。 温馨提示&…

stable diffusion使用相关

IP Adapter&#xff0c;我愿称之它为SD垫图 IP Adapter是腾讯lab发布的一个新的Stable Diffusion适配器&#xff0c;它的作用是将你输入的图像作为图像提示词&#xff0c;本质上就像MJ的垫图。 IP Adapter比reference的效果要好&#xff0c;而且会快很多&#xff0c;适配于各种…

gogs git创建仓库步骤

目录 引言创建仓库clone 仓库推送代码 引言 Gogs 是一款类似GitHub的开源文件/代码管理系统&#xff08;基于Git&#xff09;&#xff0c;Gogs 的目标是打造一个最简单、最快速和最轻松的方式搭建自助 Git 服务。 创建仓库 git中的组织可以把它看成是相关仓库的集合&#xff0c…