# 数字验证
# 基本用法
- 年龄1没有使用.number修饰符
- 年龄2使用了.number修饰符
<template>
<form @submit.prevent="handleSubmit">
<div>
<label>
年龄1
<input type="number" v-model="form.age1" />
</label>
</div>
<div>
<label>
年龄2
<input type="number" v-model.number="form.age2" />
</label>
</div>
<button>Submit</button>
</form>
</template>
<script>
export default {
data () {
return {
form: {
age1: '0',
age2: 0,
},
rules: [
['number', 'age1,age2']
],
labels: {
age1: '年龄1',
age2: '年龄2',
}
}
},
methods: {
handleSubmit () {
this.validate(this.form, this.rules, this.labels)
}
}
}
</script># 关联比较
当业务场景里面需要做到某个字段不能大于或小于另一个字段的时候，可以直接将max/min指定为要对比的字段名称即可
- 单次数值不得大于每天数值
- 每天数值也不能小于单次数值
<template>
<form @submit.prevent="handleSubmit">
<div>
<label>
单次最少
<input type="number" v-model.number="form.once" />
公里
</label>
</div>
<div>
<label>
每天最多
<input type="number" v-model.number="form.allDay" />
公里
</label>
</div>
<button>Submit</button>
</form>
</template>
<script>
export default {
data () {
return {
form: {
once: 5,
allDay: 3,
},
rules: [
['number', 'once', {
max: 'allDay'
}],
['number', 'allDay', {
min: 'once'
}]
],
labels: {
once: '单次',
allDay: '每天',
}
}
},
methods: {
handleSubmit () {
this.validate(this.form, this.rules, this.labels)
}
}
}
</script>