vue手写表单提交

手机号正则

邮箱正则

const telReg = /^(\+?0?86\-?)?1[3456789]\d{9}$/;

const emailReg = /^\w+([-\.]\w+)*@\w+([\.-]\w+)*\.\w{2,4}$/;

 

 

 

<div class="part_form">

          <div class="form_item">

            <span class="req">*</span> <span> 01 公司名称</span> <br />

            <br />

            <input

              class="labar"

              placeholder="请输入"

              type="text"

              maxlength="100"

              v-model="formData.company"

            />

          </div>

          <div class="form_item">

            <span> 02 公司地址</span>

            <br />

            <br />

            <input

              class="labar"

              placeholder="填写公司地址便于更快速指定区域担当联系"

              type="text"

              maxlength="100"

              v-model="formData.address"

            />

          </div>

          <div class="form_item">

            <span class="req">*</span>

            <span> 03 姓名</span>

            <br />

            <br />

            <input

              class="labar"

              placeholder="您的名字"

              maxlength="20"

              v-model="formData.firstName"

              type="text"

            />

          </div>

          <div class="form_item">

            <span class="req">*</span>

            <span> 04 联系电话</span>

            <br />

            <br />

            <input

              class="labar"

              placeholder="便于销售代表直接联系您。您的信息不会透露给第三方。"

              type="number"

              maxlength="50"

              v-model="formData.tel"

            />

          </div>

          <div class="form_item">

            <span> 05 电子邮件</span>

            <br />

            <br />

            <input

              class="labar"

              placeholder="您也可以留下邮箱地址,我们会及时为您提供服务您也可以留下邮箱地址。我们会及时为您提供服务。"

              type="text"

              maxlength="100"

              v-model="formData.email"

            />

          </div>

          <div class="form_item">

            <span class="req">*</span>

            <span> 06 咨询内容</span>

            <br />

            <br />

            <textarea

              class="labar_text"

              placeholder="填写咨询的内容"

              type="text"

              maxlength="1000"

              v-model="formData.content"

            ></textarea>

          </div>

          <div class="btn_submit" @click="goSubmit">提交</div>

        </div>

 

data(){

 formData: {

        company: "",

        address: "",

        firstName: "",

        tel: "",

        email: "",

        content: "",

      },

      submitFlag: false,

 

}

  methods: {

    goSubmit() {

      if (this.submitFlag) {

        this.$message.error("请勿重复提交");

      } else if (!this.formData.company) {

        this.$message.error("请输入公司名称");

      } else if (!this.formData.firstName) {

        this.$message.error("请输入您的名字");

      } else if (!this.formData.tel) {

        this.$message.error("请输入联系电话");

      } else if (!this.formData.content) {

        this.$message.error("请输入咨询内容");

      } else if (!this.formData.tel || !telReg.test(this.formData.tel)) {

        this.$message.error("请规范输入手机号");

      } else if (!this.formData.email || !emailReg.test(this.formData.email)) {

        this.$message.error("请规范输入邮箱");

      } else {

        let params = Object.assign({}, this.formData);

        api

          .***

          .then((data) => {

            if (data.status == 1) {

              this.$message.success("提交成功!");

              this.submitFlag = true;

            } else {

              this.$message.error("提交失败,请规范输入信息");

            }

          })

          .catch(() => {

            this.$message.error("提交失败,请规范输入信息");

          });

      }

    },

  },