<template>
<div class="room_add">
<van-nav-bar :title="title" />
<van-form ref="form">
<van-cell-group>
<van-field
v-model="room.roomNum"
label="房号"
class="textClass"
**:rules="[
{ required: true, message: '请输入房号', trigger: 'onBlur' },
]"**
/>
<van-field
v-model="room.peopleNum"
label="人数"
type="digit"
class="textClass"
:rules="[
{ required: true, message: '请输入人数', trigger: 'onBlur' },
]"
/>
<van-field v-model="room.remark" label="备注" class="textClass" />
</van-cell-group>
<div>
<van-button type="primary" @click="submitForm">保存</van-button
><van-button
type="primary"
@click="cancelReturn()"
style="margin-left: 10px"
>取消</van-button
>
</div>
</van-form>
</div>
</template>
<script>
import globalData from "@/globalData";
import * as roomJs from "@/api/Room/room";
export default {
data() {
return {
title: globalData.title + "-添加房间",
pattern: /\d{6}/,
room: {
roomNum: "",
peopleNum: "",
remark: "",
},
};
},
methods: {
cancelReturn() {
this.$router.push("/back/room/index");
},
submitForm() {
this.$refs.form
.validate()
.then(() => {
roomJs.addRoom(this.room).then((r) => {
console.log("addRoom,r", r);
this.$router.push("/back/room/index");
});
})
.catch((err) => {
console.log(err);
});
},
},
};
</script>
<style>
.room_add {
line-height: 40px;
font-size: 16px;
}
.textClass {
font-size: 16px;
}
</style>
1、要用van-form括起来
2、要有rules校验规则
3、调用form的validate方法校验