在vue2.0中messagebox中实现input、el-input-number输入及正则表达验证功能,
时间: 2023-11-27 22:54:40 浏览: 44
可以使用以下方法来实现:
1. 使用MessageBox.prompt方法来实现输入框弹窗,代码如下:
```
this.$prompt('请输入内容', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /^[0-9]*$/, // 正则表达式验证,只允许输入数字
inputErrorMessage: '只允许输入数字' // 验证不通过时的提示信息
}).then(({ value }) => {
console.log(value)
}).catch(() => {
console.log('取消输入')
})
```
2. 使用el-input-number组件来实现数字输入框,代码如下:
```
<el-input-number v-model="num" :min="1" :max="10" :step="1" :precision="0" controls-position="right" />
```
其中,v-model绑定输入框的值,min和max分别为最小值和最大值,step为步长,precision表示精度,controls-position表示控制按钮的位置。
3. 在input或el-input-number组件上添加正则表达式验证,代码如下:
```
<el-input v-model="text" :maxlength="10" :show-word-limit="true" :clearable="true" placeholder="请输入内容" :pattern="/^[0-9]*$/" error-message="只允许输入数字" />
```
其中,:pattern表示正则表达式,error-message表示验证不通过时的提示信息。同样地,在el-input-number组件上也可以使用类似的方式来添加正则表达式验证。