vue 集成 sweetalert2 前端校验

文章目录

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 前端校验相关推荐

vue 集成 sweetalert2 提示组件
文章目录一.项目集成 1. 引入方式 2. 确认框封装 3. 提示框封装 4. 确认框使用 5. 消息提示框使用 6.项目效果一.项目集成官网链接:https://sweetalert2.git ...
vue验证整数_前端Vue中常用rules校验规则
前端Vue中常用rules校验规则 1.是否合法IP地址 export function validateIP(rule, value,callback) {if(value==''||value== ...
前端系列——Electron工程构建（普通工程，Vue集成）
前端系列--Electron工程构建(普通工程,Vue集成) Electron 前言创建Electron工程(npm) 1.创建项目文件夹 2.初始化 3.安装Electron环境遇到的错误完成 ...
尤雨溪携手字节前端专家，畅聊 Vue 3.0 前端技术新趋势
前端这个技术领域,在应用化以后,涵盖的内容越来越广--纯表现层.应用实现层.应用架构层.基础设施层到改进开发范式的理念层,都有太多可以去钻研的技术点,衍生出了无数前端开发的发展路线."别更新 ...
activeform表单中的旧数据怎么显示_三分钟为你细数 Vue el-form 表单校验的坑点
背景 Vue 的 el-form 提供了表单校验功能,通过 :rules 属性设置校验规则,并通过 el-form-item 的 prop 属性绑定校验规则.通过封装,让前端校验更方便.具体使用过程中 ...
vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
利用官方的vue-cli脚手架来搭建Vue集成开发环境
在利用vue-cli脚手架搭建vue集成环境之前,我们需要先安装nodejs的环境.如果在cmd中输入node --version和npm --version出现如下的版本信息,就说明安装已经成功了. ...
如何使用Vue集成其它UI组件？如何阅读UI官网？移动端组件Vant实例教程（熬夜干货）
如何使用Vue集成其它UI组件前言一.Vant是什么? 二.基础环境准备 1.1 了解是根本 1.2 安装 1.3 引入组件 3.1 步骤一 3.2 步骤二 3.3 步骤三二.事件绑定 2.1 ...
vue简易微前端项目搭建（二）：子项目模板及项目脚手架搭建
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...

vue 集成 sweetalert2 前端校验

文章目录

1. 集成 sweetalert2

2. 校验工具类抽象

3. 校验工具类

4. 使用

5. 效果图

6. 后端集成

vue 集成 sweetalert2 前端校验相关推荐

最新文章

热门文章