element-ui - $prompt非空验证

<template>
  <div>
    <el-button type="primary" @click="click">查询</el-button>
  </div>
</template>
 
<script>
export default {
 
  data () {
    return {
 
    }
  },
  methods: {
    click () {
      // this.$prompt的message前面加必填标志 *
      const h = this.$createElement
      this.$prompt(
        h('p', null, [h('i', { style: 'color: red' }, '* '),
          h('span', null, '请输入文件夹名称:')]),
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: '文件名',
          // 非空验证方法1(函数)
          // inputValidator: (value) => { // 点击按钮时,对文本框里面的值进行验证
          //   if (!value) {
          //     return '输入不能为空'
          //   }
          // },
          // // 非空验证方法2(正则)
          inputPattern: /^.+$/,
          // inputPattern: /^(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*))$/,
          // inputPattern: /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/,    // 禁止输入1-1
          inputErrorMessage: '请输入内容'
          // callback:function(action, instance){
          //     if(action === 'confirm'){
          //         // do something...
          //         console.log(instance.inputValue);
          //     }
          // }
        }).then(({ value }) => {
        console.log(value)
        // TO DO DO ...
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>

posted @ 2023-07-28 09:06  seekHelp  阅读(841)  评论(0编辑  收藏  举报