el-form表单中将输入的数字当做字符串校验
时间: 2023-07-07 13:03:32 浏览: 103
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
在el-form表单中,可以使用自定义校验规则来将输入的数字当做字符串进行校验。具体实现步骤如下:
1. 在el-form组件中设置一个自定义校验规则,通过正则表达式判断输入的内容是否为数字字符串。
```
<el-form :model="form" :rules="rules">
<el-form-item label="输入数字">
<el-input v-model="form.number"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
form: {
number: ''
},
rules: {
number: [
{ required: true, message: '请输入数字', trigger: 'blur' },
{ validator: this.validateNumber, trigger: 'blur' }
]
}
}
},
methods: {
validateNumber(rule, value, callback) {
const reg = /^-?\d*\.?\d+$/
if (!reg.test(value)) {
callback(new Error('请输入数字'))
} else {
callback()
}
}
}
}
</script>
```
2. 在自定义校验规则的方法中,使用正则表达式判断输入的内容是否为数字字符串。如果不是,则调用callback函数返回校验错误信息;如果是,则调用callback函数返回空,表示校验成功。
这样就可以将输入的数字当做字符串进行校验了。
阅读全文