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。