文章目錄

• • • • • • 1. 集成 sweetalert2
          • 2. 校驗工具類抽象
          • 3. 校驗工具類
          • 4. 使用
          • 5. 效果圖
          • 6. 后端集成

1. 集成 sweetalert2

官網：https://sweetalert2.github.io
在index.html引入

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

2. 校驗工具類抽象

Tool = {/*** 空校驗 null或""都返回true*/isEmpty: function (obj) {if ((typeof obj == 'string')) {return !obj || obj.replace(/\s+/g, "") == ""} else {return (!obj || JSON.stringify(obj) === "{}" || obj.length === 0);}},/*** 非空校驗*/isNotEmpty: function (obj) {return !this.isEmpty(obj);},/*** 長度校驗*/isLength: function (str, min, max) {return $.trim(str).length >= min && $.trim(str).length <= max;},/*** 時間格式化，date為空時取當前時間*/dateFormat: function (format, date) {let result;if (!date) {date = new Date();}const option = {"y+": date.getFullYear().toString(), // 年"M+": (date.getMonth() + 1).toString(), // 月"d+": date.getDate().toString(), // 日"h+": date.getHours().toString(), // 時"m+": date.getMinutes().toString(), // 分"s+": date.getSeconds().toString() // 秒};for (let i in option) {result = new RegExp("(" + i + ")").exec(format);if (result) {format = format.replace(result[1], (result[1].length == 1) ? (option[i]) : (option[i].padStart(result[1].length, "0")))}}return format;},/*** 移除對象數組中的對象* @param array* @param obj* @returns {number}*/removeObj: function (array, obj) {let index = -1;for (let i = 0; i < array.length; i++) {if (array[i] === obj) {array.splice(i, 1);index = i;break;}}return index;},/*** 10進制轉62進制* @param number* @returns {string}* @private*/_10to62: function (number) {let chars = '0123456789abcdefghigklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ';let radix = chars.length;let arr = [];do {let mod = number % radix;number = (number - mod) / radix;arr.unshift(chars[mod]);} while (number);return arr.join('');},/*** 保存登錄用戶信息*/setLoginUser: function (loginUser) {SessionStorage.set(SESSION_KEY_LOGIN_USER, loginUser);},/*** 獲取登錄用戶信息*/getLoginUser: function () {return SessionStorage.get(SESSION_KEY_LOGIN_USER) || {};},/*** 隨機生成[len]長度的[radix]進制數* @param len* @param radix 默認62* @returns {string}*/uuid: function (len, radix) {let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');let uuid = [];radix = radix || chars.length;for (let i = 0; i < len; i++) {uuid[i] = chars[0 | Math.random() * radix];}return uuid.join('');},/*** 查找是否有權限* @param id 資源id*/hasResource: function (id) {let _this = this;let resources = _this.getLoginUser().resources;if (_this.isEmpty(resources)) {return false;}for (let i = 0; i < resources.length; i++) {if (id === resources[i].id) {return true;}}return false;} };

3. 校驗工具類

校驗 和 sweetalert2 整合顯示 消息提示框

Validator = {require: function (value, text) {if (Tool.isEmpty(value)) {Toast.warning(text + "不能為空");return false;} else {return true}},length: function (value, text, min, max) {if (Tool.isEmpty(value)) {return true;}if (!Tool.isLength(value, min, max)) {Toast.warning(text + "長度" + min + "~" + max + "位");return false;} else {return true}} };

4. 使用

/*** 點擊【保存】*/save() {let _this = this// 保存校驗if (!Validator.require(_this.chapter.name, "名稱")|| !Validator.require(_this.chapter.courseId, "課程ID")|| !Validator.length(_this.chapter.courseId, "課程ID", 1, 8)) {return}Loading.show()_this.$api.post('http://127.0.0.1:9000/business/admin/chapter/save', _this.chapter).then((res) => {Loading.hide()console.log("保存大章列表結果:", res)let resp = res.dataif (resp.success) {$("#form-modal").modal("hide")_this.list(1)Toast.success("保存成功！")} else {Toast.warning(resp.message)}})},

5. 效果圖

前端校驗集成完畢！！！

6. 后端集成

SpringBoot/Cloud 統一返回優雅設計+自定義異常

總結

以上是生活随笔為你收集整理的vue 集成 sweetalert2 前端校验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。