如何在elementui的rules中添加只能为数字的判断
时间: 2024-04-12 11:30:56 浏览: 86
判断只能输入数字
在 Element UI 的表单验证规则(rules)中,可以通过自定义函数来添加只能为数字的判断。你可以使用正则表达式来判断输入的值是否为数字。以下是一个示例代码:
```javascript
<template>
<el-form :model="form" :rules="rules" ref="form" label-width="100px">
<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>
<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+$/;
if (!reg.test(value)) {
callback(new Error('请输入数字'));
} else {
callback();
}
},
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单验证通过,可以进行提交操作
console.log('提交表单');
} else {
// 表单验证不通过
console.log('表单验证失败');
}
});
}
}
};
</script>
```
在上述代码中,我们定义了一个名为 `validateNumber` 的自定义验证函数,使用正则表达式 `/^\d+$/` 来判断输入的值是否为数字。如果不是数字,则通过 `callback(new Error('请输入数字'))` 返回错误信息,否则调用 `callback()` 表示验证通过。
在 `rules` 对象中,我们为 `number` 字段添加了两个验证规则,一个是必填规则 `{ required: true, message: '请输入数字', trigger: 'blur' }`,另一个是调用自定义函数的规则 `{ validator: this.validateNumber, trigger: 'blur' }`。
当点击提交按钮时,我们通过 `this.$refs.form.validate` 方法来进行表单验证,如果验证通过,则可以进行提交操作。
希望以上代码对你有帮助!如有其他问题,请随时提问。
阅读全文