背景：

在onReady初始化规则

onReady() {
            this.$refs.uForm.setRules(this.rules);
 },

同时：ref,model,rules,props都要配置好。

报错

当input框限定type为number，digit类型有初始值不做修改动作,直接提交会报错，验证失败：报空。

<u-form-item label="小时" label-width="150" right-icon="arrow-right" prop="hours"> <u-input placeholder="请选择" type="number" class="form-field-select" v-model="model.hours"/> </u-form-item>

验证规则

data():{

return {

model: {type: '年假', days: '0', reason: '-', hours: 0,
},
rules: {type: [{required: true,message: '请输入请假类型',trigger: ['change', 'blur'],}],days: [{required: true,message: '请输入请假类型',trigger: ['change', 'blur'],}],hours: [{required: true,message: '请输入小时',trigger: ['change', 'blur'],}],reason: [{required: true,message: '请输入租赁洗涤价',trigger: ['change', 'blur']}]// {min: 0,max:500, message: '不能小于0', trigger: ['change', 'blur'],}],
},

}}

解决：

方法1：hours：数字的字段加上数字正则匹配规则,限制只能0-999的数字，且只能有2个小数。

hours: [{required: true,message: '请输入小时',pattern:/^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/,trigger: ['change', 'blur'],}
]

方法2: hours: 先强制转成字符串再让其检验,如果不限制小数位数，这个方法简单点，

hours:[{required: true,
message: '请输入售价',
trigger: ['change', 'blur'],
// 正则检验前先将值转为字符串
transform(value) {return String(value);
},}]

源码：

<template><view class="wrap" style="padding-bottom: 60px;"><u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs><!-- 当前套餐 --><view v-if="current === 0"><u-form class="form" :model="model" :rules="rules" ref="uForm"><u-gap height="20" bg-color="#f5f5f5"></u-gap><u-form-item label="请假类型" label-width="150" right-icon="arrow-right" prop="type"><u-input placeholder="请选择" type="select" class="form-field-select" v-model="model.type"/></u-form-item><u-gap height="20" bg-color="#f5f5f5"></u-gap><u-form-item label="天数" label-width="150" right-icon="arrow-right" prop="days"><u-input placeholder="请选择" type="text" class="form-field-select" v-model="model.days"/></u-form-item><u-gap height="20" bg-color="#f5f5f5"></u-gap><u-form-item label="小时" label-width="150" right-icon="arrow-right" prop="hours"><u-input placeholder="请选择" type="number" class="form-field-select" v-model="model.hours"/></u-form-item><u-form-item label="结束时间" label-width="150" right-icon="arrow-right"><u-input placeholder="请选择" type="" class="form-field-select"/></u-form-item><u-gap height="20" bg-color="#f5f5f5"></u-gap><u-form-item label="请假事由" label-width="150" prop="reason"></u-form-item><u-form-item><u-input type="textarea" placeholder="请输入内容" v-model="model.reason"/></u-form-item><u-gap height="20" bg-color="#f5f5f5"></u-gap><u-form-item label="图片" label-width="150"><view solt="right" style="flex:1;text-align: right;align-items: center;"><i class="add-user iconfont icon-tupian"></i></view></u-form-item><u-gap height="20" bg-color="#f5f5f5"></u-gap><u-form-item label="选人处理人" label-width="150"><view solt="right" style="flex:1;text-align: right;align-items: center;"><i class="add-user iconfont icon-zengjia"></i></view></u-form-item></u-form><u-row gutter="32" class="bottom-box" justify="center"><u-col span="10"><view><u-button type="primary" shape="circle" @click="submitForm">确定</u-button></view></u-col></u-row></view></view>
</template>
<script>
export default {data() {return {show: false,model: {type: '年假', days: '0', reason: '-', hours: 1,},rules: {type: [{required: true,message: '请输入请假类型',trigger: ['change', 'blur'],}],days: [{required: true,message: '请输入请假类型',trigger: ['change', 'blur'],}],hours: [{required: true,message: '请输入请假类型',pattern:/^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/,trigger: ['change', 'blur'],}],reason: [{required: true,message: '请输入原由',trigger: ['change', 'blur']}]// {min: 0,max:500, message: '不能小于0', trigger: ['change', 'blur'],}],},list: [{name: '发起申请'}, {name: '查看数据',}],m2mSimflowList: [],m2mOrderFlowList: [],current: 0,status: 'loadmore',iconType: 'circle',isDot: false,loadText: {loadmore: '点击加载更多',loading: '正在加载...',nomore: '没有更多了'},}},onReady() {this.$refs.uForm.setRules(this.rules)},created() {},methods: {submitForm() {this.$refs.uForm.validate(valid => {if (valid) {this.$u.toast("验证通过")} else {this.$u.toast('验证失败')}})},change(index) {this.current = index;},navTo(url) {uni.navigateTo({url: url});}}}