这篇文章较早,参考时请优先查看官方文档API 和 源码

Mint-UI 的Message Box 是prompt类型时,可以添加正则判断或者function判断条件。具体可以查看Mint-UI源码。

添加正则判断条件:

MessageBox({
$type:'prompt',
title:'输入验证码',
message:'请填写您收到的验证码',
closeOnClickModal:false, //点击model背景层不关闭MessageBox
showCancelButton:false, //不显示取消按钮
inputPattern:/^[a-zA-Z0-9]{6}$/, //正则条件
inputErrorMessage:'请输入正确的验证码',
showInput:true
}).then(({ value, action }) => {
/* value 为填写的值,进行下一步操作*/
console.log(value);
});

添加function判断条件

MessageBox({
$type:'prompt',
title:'输入验证码',
message:'请填写您收到的验证码',
closeOnClickModal:false, //点击model背景层不关闭MessageBox
showCancelButton:false, //不显示取消按钮
inputValidator:function(v){return /^[a-zA-Z0-9]{6}$/.test(v);}, //function可以用来写更复杂的判断条件,返回布尔值
inputErrorMessage:'请输入正确的验证码',
showInput:true
}).then(({ value, action }) => {
/* value 为填写的值,进行下一步操作 */
console.log(value);
});

Mint-UI组件 MessageBox为prompt 添加判断条件的更多相关文章

  1. MYSQL如何在创建表时添加判断条件

    大家好,我是小皓. 一.背景 今天在博主练习MYS创建表操作时遇到一个语法报错,就想着来和大家分享一下MYSQL如何在创建表时添加判断条件: ERROR 1064 (42000): You have ...

  2. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

  3. [转载]前端——实用UI组件库

    https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...

  4. 强烈推荐优秀的Vue UI组件库

    Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...

  5. Vue UI组件库

    1. iView UI组件库  iView官网:https://www.iviewui.com/ 2.Vux UI组件库   Vux官网:https://vux.li/ 3.Element UI组件库 ...

  6. ui组件库

    基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarframework/quasar: Quasar Frameworkhttps:/ ...

  7. 【转】优秀的Vue UI组件库

    原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司 ...

  8. 第27讲 UI组件之 ScrollView与底部动态添加数据

    第27讲 UI组件之 ScrollView与底部动态添加数据 1. ScrollView(滚动视图) ScrollView(滚动视图)是实现滚动的一个控件,只需要将需要滚动的控件添加到ScrollVi ...

  9. Vue移动组件库Mint UI的安装与使用

    一.什么是 Mint UI 1.Mint UI 包含丰富的 CSS 和 JS 组件,可以提升移动端开发效率 2.Mint UI 按需加载组件 3.Mint UI 轻量化 二.Mint UI 的安装 1 ...

随机推荐

  1. Docker最全教程之使用Tencent Hub来完成CI(九)

    使用Tencent Hub来完成CI 关于Tencent Hub Tencent Hub是腾讯出品的DevOps服务.主要提供多存储格式的版本管理,支持Docker Image.Binary.Helm ...

  2. Spring Boot配置定时任务

    在项目开发过程中,经常需要定时任务来做一些内容,比如定时进行数据统计(阅读量统计),数据更新(生成每天的歌单推荐)等. Spring Boot默认已经实现了,我们只需要添加相应的注解就可以完成定时任务 ...

  3. kubernetes系列11—PV和PVC详解

    本文收录在容器技术学习系列文章总目录 1.认识PV/PVC/StorageClass 1.1 介绍 管理存储是管理计算的一个明显问题.该PersistentVolume子系统为用户和管理员提供了一个A ...

  4. 第三节:dingo/API 最新版 V2.0 之 Creating API Endpoints (连载)

    对于这篇文章的标题,其实,直译就是创建api端点.但是,真的很难懂,我还是写为API路由吧.每篇,文章,我都会全部去进行实践操作,力求写一个好点的教程. 本文英文地址——>https://git ...

  5. 【带着canvas去流浪】(2)绘制折线图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 3.1 一般折线图 3.2 用贝塞尔曲线绘制平滑折线图 四. 大数据量场景 示例代码托管在:https://github.com/dashnowo ...

  6. PostgreSql的Explain命令详解

    http://toplchx.iteye.com/blog/2091860 使用EXPLAIN PostgreSQL为每个收到的查询设计一个查询规划.选择正确的匹配查询结构和数据属性的规划对执行效率是 ...

  7. java类与对象(属性,方法)的使用

    ---恢复内容开始--- 类和对象是java编程中很重要的应该面向对象的一课,实际上可以将类看作对象的载体,它定义了对象所具有的功能.Java是面向对象的语言,因此掌握类与对象是学习Java语言的基础 ...

  8. C# xml序列化与反序列化 特性的使用

    以下为将被序列化的类Entity: [XmlRoot("Root")] public class Entity { [XmlAttribute(AttributeName = &q ...

  9. Servlet常用的接口和类

    使用接口和类的作用:Servlet也是依靠继承父类和实现接口来实现的.使用Servlet必须要引入两个包:javax.servlet和javax.servlet.http.所有的Servlet应用都是 ...

  10. Spring boot项目maven的profile多环境配置不自动替换变量的问题解决

    Spring boot项目maven的profile多环境配置不自动替换变量的问题解决   在网上找了好久,配置都很简单,可是我的程序就是不能自动替换变量,最终单独测试,发现原来是引用spring b ...