vant表单校验

<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方法校验