工作笔记二——mint-ui的MessageBox的prompt用户输入校验

我们知道,在mint-ui的组件中,有一个MessageBox,用于弹出对话框与用户进行交互的,它支持常见的三种对话框:简单的提示框alert,提示确认框confirm,用户输入对话框prompt,这三种的用法比较简单,只要参考官网的配置去设置对应的options就可以完成常用的需求了。但是我最近在使用prompt时,遇到了一个问题,就是用户输入时,当输入的内容不合法点击确认时,MessageBox仍会关闭,无法提供校验功能,在网上查找了若干资料无果,无奈只好自己看MessageBox的源码,并且找到了解决方法。

源码的两个文件名称叫message-box.js和message-box.vue,可以在node_modules的mint-ui中查看。下面主要介绍如何在MessageBox中提供校验功能。

上面是message-box的html部分的源码,我们可以看到,有一个class名称为mint-msgbox-errormsg的div,这里就是错误提示信息所在的位置。

默认样式在mint-ui的样式库中定义了,也可以自己在当前页面覆盖原有样式。这个div块的显示隐藏,是根据一个叫editorErrorMessage的变量决定的,那么这个变量具体是如何控制值的呢?我们看下面的js代码。

      validate() {
        if (this.$type === 'prompt') {
          var inputPattern = this.inputPattern;
          if (inputPattern && !inputPattern.test(this.inputValue || '')) {
            this.editorErrorMessage = this.inputErrorMessage || '输入的数据不合法!';
            this.$refs.input.classList.add('invalid');
            return false;
          }
          var inputValidator = this.inputValidator;
          if (typeof inputValidator === 'function') {
            var validateResult = inputValidator(this.inputValue);
            if (validateResult === false) {
              this.editorErrorMessage = this.inputErrorMessage || '输入的数据不合法!';
              this.$refs.input.classList.add('invalid');
              return false;
            }
            if (typeof validateResult === 'string') {
              this.editorErrorMessage = validateResult;
              return false;
            }
          }
        }
        this.editorErrorMessage = '';
        this.$refs.input.classList.remove('invalid');
        return true;
      },

1 : editorErrorMessage是由inputErrorMessage和‘输入数据不合法’这两个值取或得到的,即我们如果配置了inputErrorMessage的值,那么校验结果就应该是我们自己定义的值

2 : 从代码中我们看出,有两种校验方式,第一种的校验名称是inputPattern,是正则校验(inputPattern.test(val)),当校验失败时,输入框的样式会是‘invalid’的,也就是我们看到的border是红色的,并且这个时候点击确认按钮,MessageBox是不会消失的;第二种校验是函数校验,这种方式就比较灵活了,我们可以定义更明确的校验逻辑,两种方式都可以,具体看项目需求。

3.代码示例:

        MessageBox.prompt('请输入密码', {
          inputValidator: (val) => {
            if (val === null) {
              return true;//初始化的值为null,不做处理的话,刚打开MessageBox就会校验出错,影响用户体验
            }
            return !(val.length < 6 || val.length > 8)
          }, inputErrorMessage: '密码长度必须在6~8位'
        }).then((val) => {
          console.info('confirm,value is' + val.value)
        }, () => {
          console.info('cancel')
        })
4.结果预览:



上述代码请参考:https://github.com/JerryYuanJ/a-vue-app-template/blob/master/src/pages/tool/OtherTest.vue

如果你觉得对你有帮助,欢迎star ~ 

你可能感兴趣的:(前端,mint-ui,vue)