今天在做后台管理系统时,遇到一个需求,就是在点击发货按钮时,需要输入发货的数量,为了简单我用了elementUi中的messageBox弹窗功能,里面有个可以输入内容的弹窗。

效果图如下:

elementUi中的组件如下:

这个组件是可以进行正则匹配输入的内容是否符合规则的:

对于发货而言,数量必须是一个大于0的才可以。因此现在的问题在于如何用正则匹配大于0的数字。

正则匹配大于0的数字——/^[1-9]*[1-9][0-9]*$/

上面弹窗的代码如下:

this.$prompt('请输入包裹数量', '确认发货', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /^[1-9]*[1-9][0-9]*$/,
    inputErrorMessage: '数量格式不正确'
}).then(({ value }) => {
    if (value) {
        //此处为发货的接口调用处理等
    }
}).catch(() => {
    this.$message({
        type: 'info',
        message: '取消输入'
    });
});

完成!!!

promote默认值的问题——没有好好看文档的挨打

this.$prompt('请输入包裹数量 ', '确认发货', {
   inputPlaceholder: '请输入数量', inputValue: 1, confirmButtonText: '确定',
   cancelButtonText: '取消',
   inputPattern: /^[1-9]*[1-9][0-9]*$/,
   inputErrorMessage: '数量格式不正确'
}).then(({ value }) => {
   if (value) {
       //发货接口
   }
}).catch(() => {
   this.$message({
       type: 'info',
       message: '取消输入'
   });
});

更多推荐

js 正则只能输入大于0的数字——正则表达式基础