<think>我们正在使用iView（现在更名为View Design）的InputNumber组件，并希望设置校验规则，仅允许输入0或正整数。
思路：
1. 使用iView的表单验证机制，通常我们会结合async-validator库进行校验。
2. 自定义一个验证规则，该规则将检查输入的值是否为整数且大于等于0（因为正整数包括0，但注意：正整数通常不包括0，但题目要求包括0，所以是0和正整数，即非负整数，但注意0不是正整数，所以这里要求是非负整数，包括0和正整数）。
3. 注意InputNumber组件默认可以输入小数，所以我们需要通过设置属性`precision`为0来确保只能输入整数（因为小数位数为0），同时，我们可能还需要设置`min`属性为0，这样用户就不能输入负数了。但是，仅靠组件属性可能不够，因为用户可能通过键盘输入，所以还需要校验规则。
因此，我们可以：
- 在InputNumber组件上设置：`:min="0"` 和 `:precision="0"`，这样用户只能输入0及以上的整数。
- 同时，为了确保表单验证，我们还可以在表单规则中添加一个自定义验证器，用于检查输入是否为非负整数。
但是，考虑到可能存在的直接输入（比如用户通过键盘输入而不是通过增减按钮），我们最好在表单规则中也进行校验。
自定义校验规则示例：
我们可以写一个validator函数，检查值是否大于等于0，并且是整数。
然而，由于设置了precision=0，输入的小数会被四舍五入为整数，所以实际上输入的值总是整数。但是，如果用户输入负数，min=0会将其置为0，所以实际上输入的值都是非负整数。但是，如果我们想要在表单提交时进行验证，或者用户输入后离开输入框时进行验证，我们可以添加规则。
但是，如果设置了min=0，那么输入负数会自动变成0，所以我们可以认为输入的值都是非负整数。但是，如果用户输入了非数字呢？InputNumber组件会自动处理，只允许输入数字。
所以，如果我们已经设置了min=0和precision=0，那么实际上用户只能输入非负整数。但是，为了确保在表单验证时能够通过，我们可以设置一个简单的规则，比如要求必须大于等于0（因为已经是整数了，所以只需要验证范围）。
因此，规则可以这样写：
```js
rules: [
{ type: 'number', required: true, message: '请输入数值', trigger: 'change' },
{ validator: (rule, value, callback) => {
if (value < 0) {
callback(new Error('不能输入负数'));
} else if (!Number.isInteger(value)) {
callback(new Error('必须为整数'));
} else {
callback();
}
}, trigger: 'change' }
]
```
但是，由于我们设置了precision=0，所以输入的值一定是整数，而且min=0保证了不会出现负数，所以实际上这个验证器可能有些多余。但是，为了确保安全，我们可以只验证是否大于等于0。
然而，如果用户通过输入框直接输入了一个负数，然后离开，InputNumber组件会自动将其调整为0，所以表单的值会是0。因此，实际上我们不需要担心负数的问题。但是，如果用户输入了一个很大的负数，然后没有触发调整（比如在输入过程中），那么我们需要在提交表单时进行验证。
所以，我们可以简化验证规则，只验证是否大于等于0，因为整数已经由precision保证了。
因此，规则可以简化为：
```js
rules: [
{ type: 'number', required: true, message: '请输入数值', trigger: 'change' },
{ type: 'number', min: 0, message: '必须大于等于0', trigger: 'change' }
]
```
但是，注意：type为number时，async-validator会检查是否为数字，并且min检查是否大于等于最小值。这样就可以了。
但是，我们还需要注意，InputNumber组件允许输入空字符串（当清空输入框时），所以如果我们需要必填，就设置required；如果允许空，可以不设置required。
根据题目要求：仅允许输入0或正整数（即非负整数），并且包括0。
因此，我们可以这样设置组件：
```html
<InputNumber :min="0" :precision="0" v-model="value"></InputNumber>
```
然后在表单规则中：
```js
data() {
return {
value: 0,
formRules: {
value: [
{ required: true, type: 'number', min: 0, message: '请输入大于等于0的整数', trigger: 'change' }
]
}
}
}
```
但是，如果我们需要允许空值（即不输入），那么就不需要required。根据题目要求，题目没有说是否必填，所以我们可以根据实际情况选择是否添加required。
总结：
1. 设置InputNumber组件的min为0，precision为0，确保只能输入非负整数。
2. 在表单验证规则中，设置type为'number'，min为0，并可选是否required。
这样，当用户输入负数时，组件会自动调整到0；输入小数时，四舍五入为整数；输入非数字时，不允许输入。
但是，如果用户输入一个非数字字符，InputNumber组件会将其转换为数字，如果转换失败，可能会显示为NaN，但通常不会出现这种情况，因为InputNumber组件会限制输入。
因此，按照上述设置即可。
但是，如果用户输入一个很大的正数，超出JavaScript能表示的安全整数范围，可能会出现问题。不过，InputNumber组件有max属性可以设置最大值，如果需要可以设置。
所以，根据需求，我们只需要限制0和正整数，那么设置min=0和precision=0，以及表单规则中的min=0和type=number即可。
示例代码：
模板部分：
```html
<template>
<Form :model="form" :rules="formRules">
<FormItem prop="number">
<InputNumber :min="0" :precision="0" v-model="form.number"></InputNumber>
</FormItem>
</Form>
</template>
```
脚本部分：
```js
export default {
data() {
return {
form: {
number: 0
},
formRules: {
number: [
{ required: true, type: 'number', min: 0, message: '请输入0或正整数', trigger: 'change' }
]
}
}
}
}
```
注意：如果不需要必填，可以去掉required，但是当用户清空时，value会为null（或者undefined，具体看组件实现），这时我们需要在规则中处理空值。因为规则中的min只对数字有效，如果允许空，我们可以添加一个验证器来处理。
如果允许空，可以这样写规则：
```js
formRules: {
number: [
{ type: 'number', min: 0, message: '请输入0或正整数', trigger: 'change' },
{ validator: (rule, value, callback) => {
if (value === null || value === '') {
callback(); // 允许空
} else {
// 其他验证由上面的规则处理，这里可以不用写
callback();
}
}, trigger: 'change'
}
]
}
```
但是，实际上，如果允许空，我们可以不写validator，因为当值为空时，type: 'number'的规则不会通过（因为空值不是数字类型），所以我们需要另一种方式。
我们可以将规则改为：
```js
formRules: {
number: [
{ validator: (rule, value, callback) => {
if (value === null || value === '' || value === undefined) {
// 如果允许空，则直接通过
callback();
} else if (typeof value !== 'number') {
callback(new Error('必须为数字'));
} else if (value < 0) {
callback(new Error('不能小于0'));
} else if (!Number.isInteger(value)) {
callback(new Error('必须为整数'));
} else {
callback();
}
}, trigger: 'change'
}
]
}
```
但是，这样写比较繁琐。考虑到InputNumber组件在清空时，v-model的值可能是null（根据文档），所以我们可以用上面的自定义验证器。
但是，如果我们允许空，并且不要求必须输入，那么我们可以不验证这个字段（即允许空）。因此，我们可以这样写：
规则1：非必填，但如果是非空则必须是大于等于0的整数。
```js
formRules: {
number: [
{ type: 'number', min: 0, message: '请输入0或正整数', trigger: 'change', transform: value => {
// 如果value是null或者空字符串，我们将其转换为undefined，这样async-validator会跳过该规则（因为required:false）
if (value === null || value === '') return undefined;
return value;
}},
{ validator: (rule, value, callback) => {
// 允许空值
if (value === null || value === '' || value === undefined) {
callback();
} else {
// 检查是否为整数
if (Number.isInteger(value) && value >= 0) {
callback();
} else {
callback(new Error('请输入0或正整数'));
}
}
}, trigger: 'change'
}
]
}
```
这样写有些复杂，而且实际上InputNumber组件的值在清空时是null，我们可以在transform中将其转换为undefined，这样type: 'number'规则就不会对空值进行验证了。然后我们通过自定义验证器允许空值，并且对非空值进行整数和范围验证。
但是，更简单的方式是：只使用自定义验证器。
因此，我们推荐使用自定义验证器，如下：
```js
formRules: {
number: [
{ validator: (rule, value, callback) => {
// 如果允许空，则检查空值
if (value === null || value === '' || value === undefined) {
// 这里如果允许空，就通过；如果不允许空，就报错
// 根据需求，如果不允许空，那么这里应该报错
// 题目要求是仅允许输入0或正整数，没有说是否必填，所以我们假设允许空（非必填）的情况
// 如果必填，则不允许空
if (this.required) { // 假设required是一个prop，表示是否必填
callback(new Error('不能为空'));
} else {
callback();
}
} else if (typeof value !== 'number') {
callback(new Error('必须为数字'));
} else if (value < 0) {
callback(new Error('不能小于0'));
} else if (!Number.isInteger(value)) {
callback(new Error('必须为整数'));
} else {
callback();
}
}, trigger: 'change'
}
]
}
```
但是，如果我们的需求是：允许不输入（即非必填），但输入的话必须是0或正整数，那么可以这样写：
```js
formRules: {
number: [
{ validator: (rule, value, callback) => {
// 允许空
if (value === null || value === undefined || value === '') {
callback();
return;
}
// 检查是否为数字
if (typeof value !== 'number') {
callback(new Error('必须为数字'));
return;
}
// 检查是否为整数且非负
if (value < 0) {
callback(new Error('不能小于0'));
} else if (!Number.isInteger(value)) {
callback(new Error('必须为整数'));
} else {
callback();
}
}, trigger: 'change'
}
]
}
```
这样，无论是否必填，我们都可以通过这个验证器完成。如果是必填，我们需要在验证器中检查空值并报错，但上面代码中允许空，所以如果必填，我们需要修改。
因此，我们可以根据实际需求调整验证器。
考虑到题目要求“限制只能输入0或正整数”，并没有说是否必填，所以这里我们提供两种方案：
方案一（推荐）：
- 使用InputNumber组件的min=0和precision=0来限制输入。
- 在表单规则中，使用type: 'number'和min:0（如果必填，再加上required），这样简单有效。
方案二：
- 使用自定义验证器，这样可以更灵活地处理空值。
我们以方案一为例，因为更简洁，且利用了组件自身的限制。
但是，如果需求是允许空值（非必填），那么方案一中，我们设置required: false，并且当用户清空时，值为null，而null不是数字类型，所以规则`type:'number'`会报错。因此，方案一在非必填时无法通过验证。
所以，对于非必填的情况，我们需要自定义验证器。
因此，我们给出一个同时适应必填和非必填的自定义验证器：
```js
// 在data中定义规则
formRules: {
number: [
{ validator: (rule, value, callback) => {
// 非必填时，空值直接通过
if (!this.required && (value === null || value === undefined || value === '')) {
callback();
return;
}
// 必填时，空值报错
if (this.required && (value === null || value === undefined || value === '')) {
callback(new Error('请输入数值'));
return;
}
if (typeof value !== 'number') {
callback(new Error('必须为数字'));
return;
}
if (value < 0) {
callback(new Error('不能小于0'));
} else if (!Number.isInteger(value)) {
callback(new Error('必须为整数'));
} else {
callback();
}
}, trigger: 'change'
}
]
}
```
这样，我们通过一个变量`this.required`来控制是否必填。这个变量可以从props传入，或者在data中定义。
综上所述，根据实际需求选择方案。如果必填，使用方案一加上required；如果非必填，使用方案二的自定义验证器。
但是，为了通用性，我们这里给出一个自定义验证器的通用写法，不考虑必填非必填，而是由调用者决定是否必填（在规则中已经体现了必填与否）。
因此，我们可以这样写规则（不依赖外部变量）：
```js
formRules: {
number: [
{ required: true, message: '请输入数值', trigger: 'change' }, // 如果必填，就加上required规则
{ type: 'number', min: 0, message: '必须为0或正整数', trigger: 'change',
transform: value => {
// 如果value是null，我们将其转换为NaN，这样type:number规则会失败，但是min规则不会执行（因为NaN不会大于等于0）
// 但是这样不友好，所以我们可以转换一下，如果是空值，我们跳过，让required去处理
// 但是，如果非必填，我们就不需要这个required规则，所以这里我们只处理非空值
// 所以，这个规则只会在非空时执行，因此，我们可以直接转换，如果为空，则跳过（因为required已经处理了）
if (value === null || value === undefined || value === '') {
return undefined; // 跳过该规则
}
return value;
}
},
{ validator: (rule, value, callback) => {
// 这个验证器用于检查整数
if (value === null || value === undefined || value === '') {
// 由required规则处理，这里跳过
callback();
return;
}
if (!Number.isInteger(value)) {
callback(new Error('必须为整数'));
} else {
callback();
}
}, trigger: 'change'
}
]
}
```
这样写比较复杂，而且有重复验证。因此，我们推荐使用一个自定义验证器完成所有验证。
最终，我们决定使用一个自定义验证器，并在其中处理所有情况：
```js
formRules: {
number: [
{ validator: (rule, value, callback) => {
// 规则1：如果必填，则检查空值
if (rule.required) {
if (value === null || value === undefined || value === '') {
callback(new Error('请输入数值'));
return;
}
} else {
// 非必填，空值直接通过
if (value === null || value === undefined || value === '') {
callback();
return;
}
}
// 检查是否为数字
if (typeof value !== 'number') {
callback(new Error('必须为数字'));
return;
}
// 检查是否为整数且非负
if (value < 0) {
callback(new Error('不能小于0'));
} else if (!Number.isInteger(value)) {
callback(new Error('必须为整数'));
} else {
callback();
}
}, trigger: 'change',
// 注意：这里我们无法在rule中获取到该字段的required属性，所以我们需要在定义规则时知道是否必填
// 因此，我们可以将必填与否放在验证器内部通过闭包变量决定
// 所以，我们可以这样定义验证器：
// 在data中，我们根据是否必填来定义不同的规则数组
}
]
}
```
但是，这样验证器内部需要知道该字段是否必填，我们可以通过闭包传入：
例如，在组件的data中，我们可以这样定义：
```js
data() {
const checkNumber = (rule, value, callback) => {
// 这里我们假设rule中有一个required属性，但实际上rule对象是我们在定义规则时传入的对象，我们可以自定义属性
// 但是，通常我们不会在rule中放自定义属性，所以我们可以通过外部变量知道是否必填
// 由于这个验证器是在data中定义的，我们可以通过this知道是否必填，但这里this可能不是组件实例
// 所以，我们可以在定义规则时绑定this，或者使用箭头函数
// 使用箭头函数，并利用闭包中的this
if (this.required) {
if (value === null || value === undefined || value === '') {
callback(new Error('请输入数值'));
return;
}
} else {
if (value === null || value === undefined || value === '') {
callback();
return;
}
}
// ... 后续检查
};
return {
formRules: {
number: [{ validator: checkNumber, trigger: 'change' }]
}
}
}
```
这样，我们就可以在验证器中访问this.required（假设required是组件的一个data属性或prop）。
因此，根据实际项目中的必填与否，我们可以动态设置验证器。
综上所述，我们给出一个比较通用的自定义验证器，并在组件中根据必填与否来设置。
但是，为了简单起见，我们假设项目中使用的是必填，那么我们可以这样写：
必填情况下的规则：
```js
const checkNumber = (rule, value, callback) => {
if (value === null || value === undefined || value === '') {
callback(new Error('请输入数值'));
return;
}
if (typeof value !== 'number') {
callback(new Error('必须为数字'));
return;
}
if (value < 0) {
callback(new Error('不能小于0'));
} else if (!Number.isInteger(value)) {
callback(new Error('必须为整数'));
} else {
callback();
}
};
```
非必填：
```js
const checkNumber = (rule, value, callback) => {
if (value === null || value === undefined || value === '') {
callback();
return;
}
if (typeof value !== 'number') {
callback(new Error('必须为数字'));
return;
}
if (value < 0) {
callback(new Error('不能小于0'));
} else if (!Number.isInteger(value)) {
callback(new Error('必须为整数'));
} else {
callback();
}
};
```
因此，我们可以根据必填与否选择不同的验证器函数。
结论：
1. 在InputNumber组件上设置:min="0"和:precision="0"，以限制用户输入。
2. 在表单验证规则中，使用自定义验证器，根据必填与否进行相应的验证。
示例代码（必填情况）：
```html
<template>
<Form :model="form" :rules="formRules">
<FormItem label="数值" prop="number">
<InputNumber :min="0" :precision="0" v-model="form.number"></InputNumber>
</FormItem>
</Form>
</template>
<script>
export default {
data() {
const checkNumber = (rule, value, callback) => {
if (value === null || value === undefined || value === '') {
callback(new Error('请输入数值'));
return;
}
if (typeof value !== 'number') {
callback(new Error('必须为数字'));
return;
}
if (value < 0) {
callback(new Error('不能小于0'));
} else if (!Number.isInteger(value)) {
callback(new Error('必须为整数'));
} else {
callback();
}
};
return {
form: {
number: 0
},
formRules: {
number: [
{ validator: checkNumber, trigger: 'change' }
]
}
}
}
}
</script>
```
这样，我们就实现了对InputNumber组件的校验，限制只能输入0或正整数。
注意：在InputNumber组件中，precision=0会强制输入为整数，min=0会强制输入不能小于0，所以用户通过界面操作（增减按钮）不会输入不符合的值，但用户可能通过键盘输入，然后离开输入框时，组件会调整（比如输入负数会调整为0，输入小数会四舍五入），所以表单的值总是0或正整数。而我们的验证器是为了在用户输入过程中（比如还没来得及离开）以及表单提交时进行验证，确保万无一失。
因此，我们结合组件属性和验证器，实现了完整的校验。
相关问题：
1. 在iView中，如何设置InputNumber组件的步长？
2. 如何自定义InputNumber组件的增减按钮图标？
3. iView的InputNumber组件在表单验证时，如果输入超出范围会怎样？
4. 如何全局修改iView InputNumber组件的样式？</think>在 iView（View Design）中，为 `InputNumber` 组件设置仅允许输入 **0 或正整数** 的校验规则，可以通过以下步骤实现：
---
### 解决方案（代码示例）
```html
<template>
<Form :model="formData" :rules="formRules" ref="form">
<FormItem label="输入数值" prop="number">
<InputNumber
v-model="formData.number"
:min="0"
:precision="0"
placeholder="只能输入0或正整数"
></InputNumber>
</FormItem>
<Button @click="submit">提交</Button>
</Form>
</template>
<script>
export default {
data() {
return {
formData: { number: 0 }, // 初始值
formRules: {
number: [
{
required: true,
message: '不能为空',
trigger: 'blur'
},
{
validator: (rule, value, callback) => {
// 校验规则：必须是非负整数（0或正整数）
if (value < 0) {
callback(new Error('不能输入负数'));
} else if (!Number.isInteger(value)) {
callback(new Error('必须为整数'));
} else {
callback(); // 验证通过
}
},
trigger: 'change'
}
]
}
};
},
methods: {
submit() {
this.$refs.form.validate(valid => {
if (valid) {
console.log('提交成功:', this.formData.number);
}
});
}
}
};
</script>
```
---
### 关键配置说明
1. **组件属性限制**：
- `:min="0"`：禁止输入负数（输入负数会自动重置为 0）
- `:precision="0"`：禁止小数（输入小数会自动四舍五入取整）
2. **自定义校验规则**：
- 检查值是否为负数（`value < 0`）
- 检查值是否为整数（`Number.isInteger(value)`）
- 错误提示：负数 → `不能输入负数`，小数 → `必须为整数`
3. **触发时机**：
- `trigger: 'change'`：输入时实时校验
- `trigger: 'blur'`：失焦时校验（结合 `required` 检查空值）
---
### 注意事项
1. **空值处理**：
通过 `required: true` 防止用户留空，如需允许空值，移除该规则。
2. **大整数问题**：
JavaScript 最大安全整数为 `2^53 - 1`，若需更大范围，需额外校验：
```js
validator: (rule, value, callback) => {
if (value > Number.MAX_SAFE_INTEGER) {
callback(new Error('超过最大安全整数'));
}
// ...其他校验
}
```
3. **性能优化**：
若输入频繁，建议将 `trigger` 设为 `'blur'` 减少校验次数。
---
### 相关问题
1. **如何禁用键盘输入，只允许通过按钮增减？**
添加属性 `:editable="false"` 到 `InputNumber` 组件[^1]。
2. **如何限制最大输入值（如不超过 100）？**
添加 `:max="100"` 属性，并在校验规则中增加：
```js
if (value > 100) callback(new Error('不能超过100'));
```
3. **为什么输入小数会被自动四舍五入？**
`:precision="0"` 会强制将小数转为整数（例如 `1.5` → `2`），如需严格拦截小数，需在校验规则中强化逻辑：
```js
if (String(value).includes('.')) callback(new Error('禁止小数'));
```
4. **如何全局设置所有 InputNumber 的校验规则？**
可通过 Vue 的 **mixin** 统一注入校验逻辑：
```js
// mixin.js
export default {
methods: {
checkInteger(rule, value, callback) {
if (!Number.isInteger(value) || value < 0) {
callback(new Error('必须为0或正整数'));
} else callback();
}
}
}
```
[^1]: iView 官方文档: [InputNumber 组件](https://www.iviewui.com/components/input-number)
本文介绍了一个简单的前端输入验证逻辑，确保用户只能输入非零的正整数。通过Vue.js实现，使用了v-model双向绑定来实时监听输入框内容变化，并在用户输入非数字字符或0时进行过滤。
扫一扫
3845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
