Vant组件库，表单校验时使用Toast组件弹出消息

 在使用Vat组件的表单时，校验规则会出现在表单的下面，造成样式紊乱而且不美观。通过Taost组件实现校验信息的轻提示，简约美观方便的使用函数校验和正则校验来实现多功能校验。

                    Toast组件原来样式：                                               改造后样式：        

1.  van-form标签绑定：提交拦截验证和ref实例；

<van-form
   @submit="onSubmit"
   validate-trigger="onSubmit"
   ref="loginForm"
   :show-error="false"
>

2.  van-field标签绑定字段名和自定义的校验规则；

<van-field
     v-model.trim="loginForm.mobile"
     name="mobile"
     label="手机号码："
     placeholder="请输入您的手机号码"
     autocomplete="off"
     :rules="[{ validator: loginValidator }]"
/>

3.  return里面定义校验字段和正则表达式：

return {
   loginForm: {
      mobile: "",
      password: "",
   },
   mobilePattern: /^1[3|4|5|7|8][0-9]{9}$/,
   passwordPattern: /^[0-9]{6,12}$/,
};

4.  methods方法里面写校验规则：（可以写多个校验规则也可以写到一个方法里面依次校验）

loginValidator(val) {
   return new Promise((resolve, reject) => {
      if (this.loginForm.mobile === "") {
        this.$toast("手机号不能为空");
        return resolve(false);
      } else if (!this.mobilePattern.test(this.loginForm.mobile)) {
        this.$toast("不是有效的手机号码");
        return resolve(false);
      } else if (this.loginForm.password === "") {
        this.$toast("密码不能为空");
        return resolve(false);
      } else if (!this.passwordPattern.test(this.loginForm.password)) {
        this.$toast("密码长度不能小于6位字符");
        return resolve(false);
      } else {
        return resolve(true);
      }
    });
},

5. 页面完整代码：

<template>
  <div>
    <div class="page">
      <van-nav-bar
        title="用户登录"
        right-text="注册"
        @click-right="onClickRight"
      />
      <van-form
        @submit="onSubmit"
        validate-trigger="onSubmit"
        ref="loginForm"
        :show-error="false"
      >
        <van-field
          v-model.trim="loginForm.mobile"
          name="mobile"
          label="手机号码："
          placeholder="请输入您的手机号码"
           autocomplete="off"
          :rules="[{ validator: loginValidator }]"
        />
        <van-field
          v-model.trim="loginForm.password"
          type="password"
          name="password"
          label="密码："
           autocomplete="off"
          placeholder="请输入您的密码"
          :rules="[{ validator: loginValidator }]"
        />
        <div class="btn">
          <van-button round block type="info" native-type="submit">
            登录
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      loginForm: {
        mobile: "",
        password: "",
      },
      mobilePattern: /^1[3|4|5|7|8][0-9]{9}$/,
      passwordPattern: /^[0-9]{6,12}$/,
    };
  },
  methods: {
    // 页面左上角注册按钮
    onClickRight() {
      this.$router.push({ name: "register" });
    },
    // 表单验证
    loginValidator(val) {
      return new Promise((resolve, reject) => {
        if (this.loginForm.mobile === "") {
          this.$toast("手机号不能为空");
          return resolve(false);
        } else if (!this.mobilePattern.test(this.loginForm.mobile)) {
          this.$toast("不是有效的手机号码");
          return resolve(false);
        } else if (this.loginForm.password === "") {
          this.$toast("密码不能为空");
          return resolve(false);
        } else if (!this.passwordPattern.test(this.loginForm.password)) {
          this.$toast("密码长度不能小于6位字符");
          return resolve(false);
        } else {
          // 再调接口判断是否注册：您还没有注册，请先注册！
          return resolve(true);
        }
      });
    },
    // 提交登录
    onSubmit(values) {
      console.log("submit", values);
    },
  },
};
</script>
<style scoped>
::v-deep .van-toast {
  height: 30px;
  border-radius: 50%;
}
::v-deep .van-cell {
  height: 90px;
}
::v-deep .van-field__label {
  font-weight: bold;
  font-size: 30px;
  display: flex;
  justify-content: end;
  align-items: center;
}
::v-deep .van-nav-bar {
  background-color: #1989fa;
}
::v-deep .van-nav-bar__title {
  color: #fff;
}
::v-deep .van-nav-bar__text {
  color: #fff;
}
</style>