el-input-tag标签怎么校验输入的内容只能是数字
时间: 2023-10-17 15:19:35 浏览: 182
你可以使用 el-form 中的 rules 属性来实现 el-input-tag 标签的输入内容校验,具体实现如下:
1. 在 el-form 中的 rules 属性中添加自定义校验规则:
``` javascript
<template>
<el-form :model="form" :rules="rules">
<el-form-item label="数字标签">
<el-input-tag v-model="form.tag" :type="tagType"></el-input-tag>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
tag: []
},
rules: {
tag: [
{ validator: this.checkTagIsNumber, trigger: 'blur' }
]
}
}
},
methods: {
checkTagIsNumber(rule, value, callback) {
const regex = /^[0-9]*$/
if (!value.every(tag => regex.test(tag))) {
callback(new Error('标签内容只能为数字'))
} else {
callback()
}
}
}
}
</script>
```
2. 在 checkTagIsNumber 方法中编写校验规则,使用正则表达式 /^[0-9]*$/ 来判断输入的标签内容是否都为数字,若不是则返回错误信息。
这样就可以实现 el-input-tag 标签的输入内容校验,确保输入的标签内容为数字。
阅读全文