vant +vue +promise自定义表单校验

最新推荐文章于 2025-04-25 15:08:01 发布

zhangchangzhangchang

最新推荐文章于 2025-04-25 15:08:01 发布

阅读量4.8k

点赞数

文章标签： vue vant promise 表单校验

本文链接：https://blog.csdn.net/zhangchangzhangchang/article/details/99695773

版权

表单内容```

  <van-cell-group>
    <p class="tip">反馈内容（必填）</p>
    <van-field v-model="message" type="textarea" placeholder="请输入您要反馈的内容" rows="6" autosize />
    <p class="tip">联系方式（必填）</p>
    <van-field
      v-model="phone"
      placeholder="请选择填写手机号、微信号、QQ号"
      :error-message="errMessage"
      @blur="test"
    />
  </van-cell-group>
  <button @click="submit" :class="classObj">提交</button>

test()校验表单内容，然后返回不同的resolve（）值，在sumit()提交时根据返回值判断是否可以提交

test() {
  let p = new Promise((resolve, reject) => {
    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
    if (this.message == "") {
      this.$dialog.alert({
        title: "提示",
        message: "内容不能为空"
      });
      resolve(false);
    } else if (!reg.test(this.phone)) {
      this.$dialog.alert({
        title: "提示",
        message: "手机号格式不正确"
      });
      resolve(false);
    } else {
      resolve(true);
    }
  });
  return p;
},
submit() {
  this.test().then(function(data) {
    console.log(data);
  });
}