这篇文章较早,参考时请优先查看官方文档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. 表单数据验证方法(一)—— 使用validate.js实现表单数据验证

    摘要:使用validate.js在前端实现表单数据提交前的验证 好久没写博客了,真的是罪过,以后不能这样了,只学习不思考,学的都是白搭,希望在博客园能记录下自己学习的点滴,虽然记录的都是些浅显的技术, ...

  2. Centos 7.6搭建Tomcat 环境,发布Java项目

    安装 JDK Tomcat 的安装依赖 JDK,在安装 Tomcat 之前需要先安装 Java JDK.输入命令 java -version,如果显示 JDK 版本,证明已经安装了 JDK java ...

  3. 微信小程序 picker 中range-key的坑

    <picker class='fr' bindchange="onChangeBuild" range-key="{{'num'}}" value=&qu ...

  4. 如何利用GitHub设计一个炫酷的个人网站(含代码)

    1.在开始制作之前我们先预览一下我的网站吧! 1.方式一: 由于是手机版的所以用手机访问下面的链接体验比较好一点: https://tom-shushu.github.io/MyWeb.github. ...

  5. Web后端 JAVAWeb面试考查知识点

    面试知识点:1:简单讲一下Java的跨平台原理答:由于非跨平台的情况下,对于不同的操作系统,那么就需要开发几套不同程序代码.为了解决这个问题,java通过不同系统,不同版本,不同位数的JVM来屏蔽不同 ...

  6. 碰到了通过Movie显示gif图片,有部分图片的duration为0导致gif只显示第一帧

    解决办法,改为使用android-gif-drawable.jar来显示gif图片(需要配合com.android.support:support-v4:18.0.0使用) GifImageView ...

  7. Android探究之View的绘制流程

    Android中Activity是作为应用程序的载体存在,代表着一个完整的用户界面,提供了一个窗口来绘制各种视图,当Activity启动时,我们会通过setContentView方法来设置一个内容视图 ...

  8. github在README.md中插入图片

    例子 ![image](https://raw.githubusercontent.com/sunday123/Pendant/master/1.PNG)

  9. java:合并两个排序的链表(递归+非递归)

    //采用不带头结点的链表 非递归实现 public static ListNode merge(ListNode list1,ListNode list2){ if(list1==null) retu ...

  10. python 验证码识别库pytesseract的使用

    笔者环境 centos7 python3 pytesseract只是tesseract-ocr的一种实现接口.所以要先安装tesseract-ocr(大名鼎鼎的开源的OCR识别引擎). 依赖安装 yu ...