elementui rules数字校验
时间: 2023-09-21 12:10:39 浏览: 98
Vue中常用rules校验规则(实例代码)
5星 · 资源好评率100%
ElementUI 的表单验证规则中可以使用 `type` 属性来指定校验的类型,其中包括数字类型的校验。以下是一个例子:
```html
<template>
<el-form :model="form" :rules="rules">
<el-form-item label="年龄" prop="age">
<el-input v-model.number="form.age"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
age: ''
},
rules: {
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须为数字值', trigger: 'blur' }
]
}
}
}
}
</script>
```
以上代码中,我们在 `rules` 中定义了 `age` 字段的校验规则,其中使用了 `type` 属性来指定校验类型为数字类型,这样用户在输入非数字时就会提示错误信息。同时,在 `el-input` 组件中使用了 `v-model.number` 来将用户输入的字符串类型的值转换为数字类型。
阅读全文