elementui表单验证input只能输入正整数
时间: 2023-09-02 09:06:59 浏览: 235
你可以使用 `el-input` 组件的 `rules` 属性来进行表单验证。以下是一个验证输入框只能输入正整数的示例:
HTML 代码:
```html
<template>
<el-form :model="form" ref="form" :rules="rules">
<el-form-item label="正整数">
<el-input v-model="form.number"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
```
JavaScript 代码:
```js
export default {
data() {
return {
form: {
number: ''
},
rules: {
number: [
{ required: true, message: '请输入正整数', trigger: 'blur' },
{ pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
]
}
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单验证通过,执行提交操作
} else {
// 表单验证失败,提示错误信息
}
})
}
}
}
```
在上述代码中,我们使用 `rules` 属性来定义表单验证规则。`rules` 是一个对象,它的键是表单项的 `prop` 属性,值是一个数组,其中每个元素是一个验证规则对象。在这个例子中,我们为 `number` 表单项定义了两个验证规则:
- `{ required: true, message: '请输入正整数', trigger: 'blur' }`,表示该表单项必填,且在失去焦点时进行验证;
- `{ pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }`,表示该表单项的值必须符合正整数的正则表达式,且在失去焦点时进行验证。
这样,我们就实现了一个表单验证输入框只能输入正整数的功能。
阅读全文