vant表单邮箱校验

      <!--新闻时讯订阅-->

      <div class="lxp_myfooter_news">

        <div class="lxp_myfooter_news_title">

          {{ $t(`footer.news`).toUpperCase() }}

        </div>

        <div class="lxp_myfooter_news_input">

          <van-form @submit="onSubmit" >

            <van-cell-group inset style="margin-bottom: 2%">

              <van-field

                :rules="telRules"

                name="value"

                v-model="inputvalue"

                :placeholder="$t(`footer.adr`)"

              />

            </van-cell-group>

           

            <van-button

              block

              native-type="submit"

              style="

                border-radius: 4px;

                height: 44px;

                background: #adadad;

                color: #fff;

                font-size: 14px;

              "

               @click="newsletterClick"

            >

              {{ $t(`footer.sub`).toUpperCase() }}

            </van-button>

          </van-form>

        </div>

        <div class="lxp_myfooter_news_button"></div>

      </div>

  data() {

    return {

      telRules: [

        {

          required: true,

          message: "E-mail is required",

          trigger: "onBlur",

        },

        {

          // 自定义校验规则

          validator: (value) => {

            return /.+@.+\..+/.test(value);

          },

          message: "E-mail must be valid",

          trigger: "onBlur",

        },

      ],

      inputvalue: "",

}

 methods: {

    onSubmit(data) {

      console.log(data);

    },

    //订阅

    newsletterClick() {

      if (this.telRules) {

        return submitSubscribe({ email: this.inputvalue }).then((res) => {

          console.log(

            "============订阅",

            res,

            "============输入值",

            this.inputvalue

          );

          if (res && res.code == 0) {

            Toast(res.message)

          } else {

            Toast(res.message)

          }

        });

      } else {

        Toast("The email field is required.");

      }

    },

  },