Background:
Initialize rules in onReady
onReady() {
this.$refs.uForm.setRules(this.rules);
},
At the same time: ref, model, rules, and props must be configured.
Error reporting
When the input box limits the type to number, and the digit type has an initial value and no modification is performed, an error will be reported if submitted directly, and verification fails: an empty value will be reported.
Validation rules
data():{
return {
model: { type: 'annual leave', days: '0', reason: '-', hours: 0, }, rules: { type: [ { required: true, message: 'Please enter the leave type', trigger: ['change', 'blur'], } ], days: [ { required: true, message: 'Please enter the leave type', trigger: ['change', 'blur'], } ], hours: [ { required: true, message: 'Please enter the hour', trigger: ['change', 'blur'], } ], reason: [ { required: true, message: 'Please enter the rental washing price', trigger: ['change', 'blur'] }] // {min: 0,max:500, message: 'cannot be less than 0', trigger: ['change', 'blur'],}], },}}
Solution:
Method 1: Hours: The number field is added with regular number matching rules, which limits the number to 0-999 and can only have 2 decimals.
hours: [
{
required: true,
message: 'Please enter the hour',
pattern:/^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/,
trigger: ['change', 'blur'],
}
]
Method 2: hours: First force it into a string and then let it be tested. If there is no limit to the number of decimal places, this method is simpler.
hours:[{required: true,
message: 'Please enter the selling price',
trigger: ['change', 'blur'],
//Convert the value to a string before regular check
transform(value) {
return String(value);
},}]
Source code:
<template>
<view class="wrap" style="padding-bottom: 60px;">
<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
<!-- Current package -->
<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="Leave type" label-width="150" right-icon="arrow-right" prop="type">
<u-input placeholder="Please select" 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="Days" label-width="150" right-icon="arrow-right" prop="days">
<u-input placeholder="Please select" 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="hours" label-width="150" right-icon="arrow-right" prop="hours">
<u-input placeholder="Please select" type="number" class="form-field-select" v-model="model.hours"/>
</u-form-item>
<u-form-item label="End time" label-width="150" right-icon="arrow-right">
<u-input placeholder="Please select" type="" class="form-field-select"/>
</u-form-item>
<u-gap height="20" bg-color="#f5f5f5"></u-gap>
<u-form-item label="Reason for leave" label-width="150" prop="reason"></u-form-item>
<u-form-item>
<u-input type="textarea" placeholder="Please enter content" v-model="model.reason"/>
</u-form-item>
<u-gap height="20" bg-color="#f5f5f5"></u-gap>
<u-form-item label="Picture" 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="Select people to handle" 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">OK</u-button>
</view>
</u-col>
</u-row>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
model: {
type: 'annual leave', days: '0', reason: '-', hours: 1,
},
rules: {
type: [
{
required: true,
message: 'Please enter the leave type',
trigger: ['change', 'blur'],
}
],
days: [
{
required: true,
message: 'Please enter the leave type',
trigger: ['change', 'blur'],
}
],
hours: [
{
required: true,
message: 'Please enter the leave type',
pattern:/^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/,
trigger: ['change', 'blur'],
}
],
reason: [
{
required: true,
message: 'Please enter the reason',
trigger: ['change', 'blur']
}]
// {min: 0,max:500, message: 'cannot be less than 0', trigger: ['change', 'blur'],}],
},
list: [{
name: 'Initiate application'
}, {
name: 'View data',
}],
m2mSimflowList: [],
m2mOrderFlowList: [],
current: 0,
status: 'loadmore',
iconType: 'circle',
isDot: false,
loadText: {
loadmore: 'Click to load more',
loading: 'Loading...',
nomore: 'No more'
},
}
},
onReady() {
this.$refs.uForm.setRules(this.rules)
},
created() {
},
methods: {
submitForm() {
this.$refs.uForm.validate(valid => {
if (valid) {
this.$u.toast("Verification passed")
} else {
this.$u.toast('Verification failed')
}
})
},
change(index) {
this.current = index;
},
navTo(url) {
uni.navigateTo({
url: url
});
}
}
}