Element UI的自訂表單驗證外掛程式的使用
這次帶給大家Element UI的自訂表單驗證外掛程式的使用，使用Element UI的自訂表單驗證外掛程式注意事項有哪些，以下就是實戰案例，一起來看一下。
外掛程式主要程式碼:
//vdt.jsconst VDT = { messages: { required: "这是必填字段", remote: "请修正此字段", email: "请输入有效的电子邮件地址", url: "请输入有效的网址", date: "请输入有效的日期", dateISO: "请输入有效的日期 (YYYY-MM-DD)", number: "请输入有效的数字", digits: "只能输入数字", creditcard: "请输入有效的信用卡号码", equalTo: "你的输入不相同", extension: "请输入有效的后缀", minlength: "输入字数过短", maxlength: "输入字数过长", mphone: "请输入正确的手机号格式", tphone: "请输入正确的电话格式", postal: "请输入正确的邮编格式"
}, required: function (value, param) { return value != undefined ? (value.toString().length > 0) : false;
}, email: function (value) { return /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value);
}, url: function (value) { return /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(value);
}, date: function (value) { return !/Invalid|NaN/.test(new Date(value).toString());
}, dateISO: function (value) { return /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value);
}, number: function (value) { return /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value);
}, digits: function (value) { return /^\d+$/.test(value);
}, isarr: function (o) { return Object.prototype.toString.call(o) == '[object Array]';
}, minlength: function (value, param) { return value.length >= param;
}, maxlength: function (value, param) { return value.length <= param;
}, rangelength: function (value, param) { var length = $.isArray(value) ? value.length : this.getLength(value); return (length >= param[0] && length <= param[1]);
}, min: function (value, param) { return value >= param;
}, max: function (value, param) { return value <= param;
}, range: function (value, param) { return (value >= param[0] && value <= param[1]);
}, equalTo: function (value, param) { return value === param;
}, mphone: function (value) { return /^1[3|4|5|8][0-9]\d{4,8}$/.test(value);
}, tphone: function (value) { return /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/.test(value);
}, postal: function (value) { return /^[a-zA-Z0-9 ]{3,12}$/g.test(value);
}, vdata: function (value, config) {//返回正确错误对象 提示 与结果
for (var fun in config) { if (typeof this[fun] == "function" && (!(config[fun].param == undefined ? this[fun](value) : this[fun](value, config[fun].param)))) { if (typeof config[fun] == "object") { return { msg: config[fun].msg ? config[fun].msg : this.messages[fun], result: false };
} else { return { msg: typeof config[fun] == "string" ? config[fun] : this.messages[fun], result: false };
}
} else if (typeof config[fun] == "function") { var tmpr = config[fun](value); if (tmpr != "" && tmpr != undefined && tmpr != false) { return { msg: tmpr, result: false }
}
}
} return { msg: "", result: true };
}
};使用(點擊查看效果):
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css"></head><body>
<div id="app">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="即时配送" prop="delivery">
<el-switch on-text="" off-text="" v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div></body><script src="./vdt.js"></script><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>
var app = new Vue({ el: '#app', data: { ruleForm: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: ''
}, rules: { name: (rule, value, callback) => { var vdt = VDT.vdata(value, { "required": { msg: "请输入活动名称" }, "maxlength": { param: "5", msg: "最大值不能超过5位" }, "minlength": { param: "3", msg: "最小值不能低于3位" } }); if (!vdt.result) {
callback(new Error(vdt.msg));
} else {
callback();
}
}, region: (rule, value, callback) => { var vdt = VDT.vdata(value, { "required":{}} ); if (!vdt.result) {
callback(new Error(vdt.msg));
} else {
callback();
}
}, date1:(rule, value, callback) => { var vdt = VDT.vdata(value, { "required": { msg: "请选择日期" } }); if (!vdt.result) {
callback(new Error(vdt.msg));
} else {
callback();
}
}, date2:(rule, value, callback) => { var vdt = VDT.vdata(value, { "required": { msg: "请选择日期" } }); if (!vdt.result) {
callback(new Error(vdt.msg));
} else {
callback();
}
},
type:(rule, value, callback) => { var vdt = VDT.vdata(value, { "required": { msg: "请至少选择一个活动性质" } }); if (!vdt.result) {
callback(new Error(vdt.msg));
} else {
callback();
}
}, resource: (rule, value, callback) => { var vdt = VDT.vdata(value, { "required": { msg: "请选择活动资源" } }); if (!vdt.result) {
callback(new Error(vdt.msg));
} else {
callback();
}
}, desc: (rule, value, callback) => { var vdt = VDT.vdata(value, { "required": { msg: "请填写活动形式" } }); if (!vdt.result) {
callback(new Error(vdt.msg));
} else {
callback();
}
}
}
}, methods: {
submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) {
alert('验证成功!');
} else {
alert('验证失败!!'); return false;
}
});
},
resetForm(formName) { this.$refs[formName].resetFields();
}
}
})</script></html>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：python3如何透過qq郵箱發送郵件
#以上是Element UI的自訂表單驗證外掛程式的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何在Netflix中快速設定自訂頭像
Feb 19, 2024 pm 06:33 PM
Netflix上的頭像是你串流媒體身分的視覺化代表。使用者可以超越預設的頭像來展現自己的個性。繼續閱讀這篇文章，了解如何在Netflix應用程式中設定自訂個人資料圖片。如何在Netflix中快速設定自訂頭像在Netflix中，沒有內建功能來設定個人資料圖片。不過，您可以透過在瀏覽器上安裝Netflix擴充功能來實現此目的。首先，在瀏覽器上安裝Netflix擴充功能的自訂個人資料圖片。你可以在Chrome商店買到它。安裝擴充功能後，在瀏覽器上開啟Netflix並登入您的帳戶。導航至右上角的個人資料，然後點擊
PyCharm新手指南：全面了解外掛程式安裝！
Feb 25, 2024 pm 11:57 PM
PyCharm是一款功能強大且受歡迎的Python整合開發環境（IDE），提供了豐富的功能和工具，讓開發者可以更有效率地編寫程式碼。而PyCharm的插件機制更是其功能擴充的利器，透過安裝不同的插件，可以為PyCharm增加各種功能和客製化的特性。因此，對於PyCharm新手來說，了解並熟練安裝插件是至關重要的。本文將為你詳細介紹PyCharm插件安裝的全
element.style怎麼修改
Nov 24, 2023 am 11:15 AM
element.style修改元素的方法：1、修改元素的背景顏色；2、修改元素的字體大小；3、修改元素的邊框樣式；4、修改元素的字體樣式；5、修改元素的水平對齊方式。詳細介紹：1、修改元素的背景顏色，其語法為「document.getElementById("myElement").style.backgroundColor = "red";」；2、修改元素的字體大小等等。
![在Illustrator中載入插件時出錯[修復]](https://img.php.cn/upload/article/000/465/014/170831522770626.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
在Illustrator中載入插件時出錯[修復]
Feb 19, 2024 pm 12:00 PM
啟動AdobeIllustrator時是否會彈出載入插件時出錯的訊息？一些Illustrator用戶在打開該應用程式時遇到了此錯誤。訊息後面緊跟著一系列有問題的插件。此錯誤提示表示已安裝的插件有問題，但也可能是由於VisualC++DLL檔案損壞或首選項檔案受損等其他原因所引起。如果遇到此錯誤，我們將在本文中指導您修復問題，請繼續閱讀以下內容。在Illustrator中載入外掛程式時出錯如果您在嘗試啟動AdobeIllustrator時收到「載入外掛程式時出錯」的錯誤訊息，您可以使用以下用途：以管理員身
如何在Python中建立和自訂Venn圖？
Sep 14, 2023 pm 02:37 PM
維恩圖是用來表示集合之間關係的圖。要建立維恩圖，我們將使用matplotlib。 Matplotlib是一個在Python中常用的資料視覺化函式庫，用於建立互動式的圖表和圖形。它也用於製作互動式的圖像和圖表。 Matplotlib提供了許多函數來自訂圖表和圖形。在本教程中，我們將舉例說明三個範例來自訂Venn圖。 Example的中文翻譯為：範例這是一個建立兩個維恩圖交集的簡單範例；首先，我們導入了必要的函式庫並導入了venns。然後我們將資料集建立為Python集，之後，我們使用「venn2()」函數創
分享Edge瀏覽器不支援此外掛程式的三種解決方法
Mar 13, 2024 pm 04:34 PM
用戶使用Edge瀏覽器的過程中可能會添加一些插件來滿足自己更多的使用需求。但是在添加插件時顯示不支援此插件，這該如何解決？今日小編就來給大家分享三種解決方法，快來試試看。 方法一：嘗試用其他的瀏覽器。 方法二：瀏覽器上的FlashPlayer可能過時或遺失，導致此外掛程式不受支援狀態，可在官網下載最新版本。 方法三：同時按下「Ctrl+Shift+Delete」鍵。 點選“清除資料”，重新開啟瀏覽器即可。
Eclipse中自訂快捷鍵設定的方法
Jan 28, 2024 am 10:01 AM
如何在Eclipse中自訂快捷鍵設定？身為開發人員，在使用Eclipse進行編碼時，熟練快捷鍵是提高效率的關鍵之一。 Eclipse作為一個強大的整合開發環境，不僅提供了許多預設的快捷鍵，還允許使用者根據自己的偏好進行個人化的客製化。本文將介紹如何在Eclipse中自訂快捷鍵設置，並給出具體的程式碼範例。打開Eclipse首先，打開Eclipse，並進入
Chrome的插件擴充功能安裝目錄是什麼
Mar 08, 2024 am 08:55 AM
Chrome的插件擴充功能安裝目錄是什麼？正常情況下，Chrome外掛程式擴充功能的預設安裝目錄如下：1、windowsxp中chrome外掛程式預設安裝目錄位置:C:\DocumentsandSettings\使用者名稱\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2、windows7中chrome插件預設安裝目錄位置:C:\Users\使用者名稱\AppData\Local\Google\Chrome\User
