vue3中簡單快速的做個表單輸入框驗證

<el-form ref="formRef" :model="processingProgressForm"><el-form-item label="服務商名稱:" :label-width="120" prop="rejectRemarks" :rules="[{ required: true, message: '服務商名稱不能為空' }]"><el-input v-model="processingProgressForm.rejectRemarks" placeholder="請輸入" /></el-form-item>
</el-form>
<div style="text-align: center;"><el-button type="primary" @click="addOption">確認</el-button>
</div>
const formRef = ref();//表單虛擬節點function addOption() {formEl.value.validate((val)=>{if(!val) return ElMessage.error("請輸入服務商名稱");})
};

說明:ref="formRef"是表單的虛擬節點

?:model="processingProgressForm"是綁定的對象

prop="rejectRemarks"要驗證的屬性

:rules是驗證規則,可以直接寫到標簽上也可以寫成變量

這4個屬性必須要有

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/37980.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/37980.shtml
英文地址,請注明出處:http://en.pswp.cn/news/37980.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

通過網關訪問微服務,一次正常,一次不正常 (nacos配置的永久實例卻未啟動導致)

微服務直接訪問沒問題&#xff0c;通過網關訪問&#xff0c;就一次正常訪問&#xff0c;一次401錯誤&#xff0c;交替正常和出錯 負載均衡試了 路由配置檢查了 最后發現nacos下竟然有2個order服務實例&#xff0c;我明明只開啟了一個呀 原來之前的8080端口微服務還殘留&…

基于架構的軟件開發方法

基于架構的軟件開發方法 基于架構的軟件開發方法是由架構驅動的&#xff0c;即指由構成體系結構的商業、質量和功能需求的組合驅動的。使用ABSD 方法&#xff0c;設計活動可以從項目總體功能框架明確就開始&#xff0c;這意味著需求抽取和分析還沒有完成(甚至遠遠沒有完成)&am…

純C#使用Visionpro工具2 操作斑點工具

結果圖 通過斑點工具中非圓性找取圓特征 代碼 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.For…

ApacheCon - 云原生大數據上的 Apache 項目實踐

Apache 軟件基金會的官方全球系列大會 CommunityOverCode Asia&#xff08;原 ApacheCon Asia&#xff09;首次中國線下峰會將于 2023 年 8 月 18-20 日在北京麗亭華苑酒店舉辦&#xff0c;大會含 17 個論壇方向、上百個前沿議題。 字節跳動云原生計算團隊在此次 CommunityOve…

OpenSSL 遠程升級到 3.2.1

OpenSSL 遠程升級到 3.2.1 文章目錄 OpenSSL 遠程升級到 3.2.1背景升級 OpenSSL1. 查看 OpenSSL版本2. 下載最新穩定版本 OpenSSL3. 解壓縮&#xff0c;安裝4. 配置 背景 最近的護網行動&#xff0c;被查出來了好幾個關于OpenSSH的漏洞。需要升級OpenSSH&#xff0c;升級OpenS…

冠達管理:價格破發是什么意思啊?

價格破發是股票商場中一個比較常見的術語&#xff0c;也是常常讓出資者感到困惑的現象之一。價格破發是指新股發行后&#xff0c;由于各種原因&#xff0c;股票價格低于發行價的現象。那么&#xff0c;價格破發的原因是什么呢&#xff1f;價格破發與出資者有哪些聯系呢&#xf…

C和指針(一)

C和指針&#xff08;一&#xff09; 預處理指令main 函數常量及變量整型字面值指針&#xff1a;基本聲明&#xff1a;隱式聲明&#xff1a;常量&#xff1a; 預處理指令 預處理器用庫函數頭文件的內容替換掉相對應的#include指令語句。 使用stdio.h頭文件可以使我們訪問標準I/…

企業直播MR虛擬直播(MR混合現實直播技術)視頻介紹

到底什么是企業直播MR虛擬直播&#xff08;MR混合現實直播技術&#xff09;&#xff1f; 企業直播MR虛擬直播新玩法&#xff08;MR混合現實直播技術&#xff09; 我的文章推薦&#xff1a; [視頻圖文] 線上研討會是什么&#xff0c;企業對內對外培訓可以用線上研討會嗎&#x…

24屆近5年南京工業大學自動化考研院校分析

今天給大家帶來的是南京工業大學控制考研分析 滿滿干貨&#xff5e;還不快快點贊收藏 一、南京工業大學 學校簡介 南京工業大學&#xff08;Nanjing Tech University&#xff09;&#xff0c;簡稱“南工”&#xff0c;位于江蘇省南京市&#xff0c;由國家國防科技工業局、住…

2023年之我拿起“java“

持續更新中………… 文章目錄 javajava基礎 了解 j a v a 的語法&#xff0c;從 H e l l o W o r l d 開始 \color{red}{了解java的語法&#xff0c;從HelloWorld開始} 了解java的語法&#xff0c;從HelloWorld開始 j a v a 語言的注釋 \color{red}{java語言的注釋} java語言的…

Vue3.2+TS的defineExpose的應用

defineExpose通俗來講&#xff0c;其實就是講子組件的方法或者數據&#xff0c;暴露給父組件進行使用&#xff0c;這樣對組件的封裝使用&#xff0c;有很大的幫助&#xff0c;那么defineExpose應該如何使用&#xff0c;下面我來用一些實際的代碼&#xff0c;帶大家快速學會defi…

VSCode 報錯 grep: /proc/version: 權限不夠

部分用戶在Linux上運行VSCode提示grep: /proc/version: 權限不夠 grep: /proc/version: 權限不夠 You are trying to start Visual Studio Code as a super user which isn’t recommended. If this was intended, please add the argument --no-sandbox and specify an alter…

GPT帶我學-設計模式-命令模式

1 你知道設計模式的命令模式嗎 是的&#xff0c;我知道設計模式中的命令模式。命令模式是一種行為型設計模式&#xff0c;它將請求封裝成一個對象&#xff0c;從而允許使用不同的請求、隊列或日志來參數化其他對象。命令模式還支持撤銷操作&#xff0c;并且可以提供事務的實現…

探討uniapp的網絡通信問題

uni-app 中有很多原生的 API&#xff0c;其中我們經常會用到的肯定有&#xff1a;uni.request(OBJECT) method 有效值 注意&#xff1a;method有效值必須大寫&#xff0c;每個平臺支持的method有效值不同&#xff0c;詳細見下表。 success 返回參數說明 data 數據說明 最終…

氣液固三相線識別—Langmuir部分復現

關注 M r . m a t e r i a l , \color{Violet} \rm Mr.material\ , Mr.material

c#和pdf.js實現分片預覽pdf

源碼如下&#xff1a; /// <summary>/// 文件處理/// </summary>[RoutePrefix("api/fs")]public class FileStoreController : ApiController{/// <summary>/// 文件預覽/// </summary>/// <param name"filepath">文件路徑…

【數據結構OJ題】移除鏈表元素

原題鏈接&#xff1a;https://leetcode.cn/problems/remove-linked-list-elements/description/ 1. 題目描述 2. 思路分析 我們可以定義一個結構體指針變量cur&#xff0c;讓cur一開始指向頭結點&#xff0c;同時定義一個結構體指針prev&#xff0c;令prev初始化為空指針NULL…

基于長短期神經網絡LSTM的碳排量預測,基于LSTM的碳排放量預測

目錄 背影 摘要 LSTM的基本定義 LSTM實現的步驟 基于長短期神經網絡LSTM的碳排放量預測 完整代碼: 基于長短期神經網絡LSTM的碳排放量預測,基于LSTM的碳排放量預測資源-CSDN文庫 https://download.csdn.net/download/abc991835105/88184632 效果圖 結果分析 展望 參考論文 背…

DIP:《Deep Image Prior》經典文獻閱讀總結與實現

文章目錄 Deep Image Prior1. 方法原理1.1 研究動機1.2 方法 2. 實驗驗證2.1 去噪2.2 超分辨率2.3 圖像修復2.4 消融實驗 3. 總結 Deep Image Prior 1. 方法原理 1.1 研究動機 動機 深度神經網絡在圖像復原和生成領域有非常好的表現一般歸功于神經網絡學習到了圖像的先驗信息…