uview 1 uni-app表单 number digit 的输入框有初始化赋值后，但是校验失败

 背景：

在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
      });
    }
  }

}