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