el-input校验,只能输入正整数
在Vue.js中使用Element UI库时,可以利用el-input
组件的自定义验证规则来实现只能输入正整数的功能。以下是一个简单的例子:
<template>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item prop="positiveInteger">
<el-input v-model.number="form.positiveInteger" placeholder="请输入正整数"></el-input>
</el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
positiveInteger: ''
},
rules: {
positiveInteger: [
{ required: true, message: '请输入正整数', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (!value) {
return callback(new Error('请输入正整数'));
}
if (value <= 0 || !Number.isInteger(value) || value % 1 !== 0) {
callback(new Error('请输入正整数'));
} else {
callback();
}
},
trigger: 'blur'
}
]
}
};
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
alert('提交成功: ' + this.form.positiveInteger);
} else {
console.log('验证失败');
return false;
}
});
}
}
};
</script>
在这个例子中,el-form
和el-form-item
用来包裹el-input
,并设置了一个自定义的验证规则rules
。validator
函数用来检查输入值是否为正整数。如果输入值不是正整数,则触发验证错误。
评论已关闭