Element-ui弹框MessageBox 弹框

Element-ui弹框MessageBox 弹框
需求:弹框输入框可校验多种状态
新建分组
校验多种状态用到了MessageBox 的inputValidator的属性,可以返回布尔值或字符串,若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage;

this.$prompt('分组名称', '新建分组', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                // inputPattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
                inputValidator(value){
                    if (value == undefined) {
                        return '分组名不能为空'
                    } else if (value.length == 0) {
                        return '分组名不能为空'
                    } else if (!value.match('^[a-zA-Z0-9_\u4e00-\u9fa5]+$')) {
                        return '不支持特殊字符'
                    } else if (value.length > 20) {
                        return '请输入20个字符以内的分组名称'
                    }
                },
                inputErrorMessage: '不支持特殊字符'
                }).then(({ value }) => {
                //点击确定需要执行的方法
                }).catch(() => {
	                 this.$message({
	                    type: 'info',
	                    message: '取消新建'
	                });       
            });

上面之所以要判定一次value == undefined,是因为如果只判断了value.length==0,那么在弹框出现后直接点击确定是不会出现“分组名不能为空’的提示,因为此时的value值并不存在是undefined。

发布了15 篇原创文章 · 获赞 15 · 访问量 1379

猜你喜欢

转载自blog.csdn.net/qq_45074127/article/details/103458652