在使用element ui的项目里,使用form表单,利用表单的自定义校验规则限制el-input只能数字,且8位整数位,2位小数位,不能以0开头,小数位不够自动补0
时间: 2024-05-05 12:21:08 浏览: 69
可以使用`el-input`的`validate`方法结合正则表达式实现。
首先,在`<el-form>`标签中的`rules`属性里定义一个`validator`方法,用于在提交表单时进行校验。具体代码如下:
```
<template>
<el-form :model="form" :rules="rules">
<el-form-item label="数字输入框">
<el-input v-model="form.input" ref="input" placeholder="请输入数字"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
input: ''
},
rules: {
input: [
{ validator: this.validateInput, trigger: 'blur' }
]
}
}
},
methods: {
validateInput(rule, value, callback) {
const reg = /^([1-9]\d{0,7}|0)(\.\d{1,2})?$/
if (value === '') {
callback(new Error('请输入数字'))
} else if (!reg.test(value)) {
callback(new Error('请输入正确的数字'))
} else {
if (value.indexOf('.') !== -1) {
const decimal = value.split('.')[1]
if (decimal.length === 1) {
value += '0'
}
} else {
value += '.00'
}
this.$refs.input.$refs.input.value = value
callback()
}
}
}
}
</script>
```
在`validateInput`方法中,首先定义了一个正则表达式`reg`,用于验证输入的值是否符合要求。然后进行判断,如果输入的值为空,则返回一个错误信息;如果输入的值不符合正则表达式,也返回一个错误信息;如果输入的值符合要求,则对小数部分进行处理,保证小数部分为两位。最后,将处理后的值赋值给`el-input`组件,并调用`callback`函数表示校验通过。
需要注意的是,由于`el-input`中的实际输入框是通过`$refs.input.$refs.input`获取到的,所以需要在`this.$refs.input.$refs.input.value`中进行赋值。
阅读全文