Mint-UI组件 MessageBox为prompt 添加判断条件
这篇文章较早,参考时请优先查看官方文档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 添加判断条件的更多相关文章
- MYSQL如何在创建表时添加判断条件
大家好,我是小皓. 一.背景 今天在博主练习MYS创建表操作时遇到一个语法报错,就想着来和大家分享一下MYSQL如何在创建表时添加判断条件: ERROR 1064 (42000): You have ...
- 16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...
- [转载]前端——实用UI组件库
https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...
- 强烈推荐优秀的Vue UI组件库
Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...
- Vue UI组件库
1. iView UI组件库 iView官网:https://www.iviewui.com/ 2.Vux UI组件库 Vux官网:https://vux.li/ 3.Element UI组件库 ...
- ui组件库
基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarframework/quasar: Quasar Frameworkhttps:/ ...
- 【转】优秀的Vue UI组件库
原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司 ...
- 第27讲 UI组件之 ScrollView与底部动态添加数据
第27讲 UI组件之 ScrollView与底部动态添加数据 1. ScrollView(滚动视图) ScrollView(滚动视图)是实现滚动的一个控件,只需要将需要滚动的控件添加到ScrollVi ...
- Vue移动组件库Mint UI的安装与使用
一.什么是 Mint UI 1.Mint UI 包含丰富的 CSS 和 JS 组件,可以提升移动端开发效率 2.Mint UI 按需加载组件 3.Mint UI 轻量化 二.Mint UI 的安装 1 ...
随机推荐
- 表单数据验证方法(一)—— 使用validate.js实现表单数据验证
摘要:使用validate.js在前端实现表单数据提交前的验证 好久没写博客了,真的是罪过,以后不能这样了,只学习不思考,学的都是白搭,希望在博客园能记录下自己学习的点滴,虽然记录的都是些浅显的技术, ...
- Centos 7.6搭建Tomcat 环境,发布Java项目
安装 JDK Tomcat 的安装依赖 JDK,在安装 Tomcat 之前需要先安装 Java JDK.输入命令 java -version,如果显示 JDK 版本,证明已经安装了 JDK java ...
- 微信小程序 picker 中range-key的坑
<picker class='fr' bindchange="onChangeBuild" range-key="{{'num'}}" value=&qu ...
- 如何利用GitHub设计一个炫酷的个人网站(含代码)
1.在开始制作之前我们先预览一下我的网站吧! 1.方式一: 由于是手机版的所以用手机访问下面的链接体验比较好一点: https://tom-shushu.github.io/MyWeb.github. ...
- Web后端 JAVAWeb面试考查知识点
面试知识点:1:简单讲一下Java的跨平台原理答:由于非跨平台的情况下,对于不同的操作系统,那么就需要开发几套不同程序代码.为了解决这个问题,java通过不同系统,不同版本,不同位数的JVM来屏蔽不同 ...
- 碰到了通过Movie显示gif图片,有部分图片的duration为0导致gif只显示第一帧
解决办法,改为使用android-gif-drawable.jar来显示gif图片(需要配合com.android.support:support-v4:18.0.0使用) GifImageView ...
- Android探究之View的绘制流程
Android中Activity是作为应用程序的载体存在,代表着一个完整的用户界面,提供了一个窗口来绘制各种视图,当Activity启动时,我们会通过setContentView方法来设置一个内容视图 ...
- github在README.md中插入图片
例子 
- java:合并两个排序的链表(递归+非递归)
//采用不带头结点的链表 非递归实现 public static ListNode merge(ListNode list1,ListNode list2){ if(list1==null) retu ...
- python 验证码识别库pytesseract的使用
笔者环境 centos7 python3 pytesseract只是tesseract-ocr的一种实现接口.所以要先安装tesseract-ocr(大名鼎鼎的开源的OCR识别引擎). 依赖安装 yu ...