微信小程序实现表单验证提交功能

本文实例为大家分享了微信小程序实现表单验证提交的具体代码，供大家参考，具体内容如下

效果图：

说明：点击一键预约提交表单时我们需要验证一些必填项以及它们的格式。微信小程序表单验证跟vue的input双向绑定不同，微信小程序只能通过button按钮提交form表单，然后通过监听表单提交方法去获取提交的数据。

  
    
    
      我家装修需要花多少钱？
      免费快速获取预算方案
    
    

      
        *
        
          
        
      
      
        
        
      
      
        
        
      
      
        *
        
      
      
        一键预约
        
      
      装企提供免费上门量房服务、出3套方案供您对比
    
  

.forms {
    padding: 0 30rpx;

    .container {
        position: relative;
        width: 100%;
        padding: 20rpx;
    }

    .bg {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .title {
        text-align: center;
        margin-bottom: 40rpx;

        .text {
            display: block;
            font-size: 48rpx;
            color: #000;
        }
    }

    .item {
        height: 65rpx;
        background-color: #fff;
        border: solid 1rpx #dddddd;
        border-radius: 10rpx;
        padding: 0 10rpx;
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;

        .text {
            color: #ff0000;
            display: inline-block;
            width: 30rpx;
            font-size: 24rpx;
        }

        .weui-input {
            font-size: 28rpx;
        }

        .input-placeholder {
            color: #999;
        }
    }

    .btn {
        width: 100%;
        height: 75rpx;
        background-color: #00a0e9;
        box-shadow: 3rpx 4prx 13rpx 0rpx rgba(93, 200, 249, 0.59);
        border-radius: 6rpx;
        text-align: center;
        line-height: 75rpx;
        margin: 30rpx 0;
        position: relative;

        text {
            color: #fff;
        }
    }

    .desc {
        text-align: center;
        color: #999;
        font-size: 26rpx;
    }    .img {
        position: absolute;
        width: 31rpx;
        height: 47rpx;
        right: 80rpx;
        top: 40rpx;
    }
}

data:{
    city:'',
    area: "",
    name: "",
    phone: "",
    region: ["广东省", "广州市", "海珠区"],
},
// 表单提交
submitFn: function (e) {
  console.log(e);
  let that = this;
  if (e.detail.value.city == "") {
    wx.showToast({
      title: "请选择房屋所在城市",
      icon: "none",
    });

    return false;
  }

  if (e.detail.value.phone == "") {
    wx.showToast({
      title: "请输入联系电话",
      icon: "none",
    });

    return false;
  }
  // 验证电话格式
  if (!/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(e.detail.value.phone)) {
    wx.showToast({
      title: "手机号码有误",
      duration: 2000,
      icon: "none",
    });

    return false;
  }
},
// 选择城市
bindRegionChange: function (e) {
  console.log("picker发送选择改变，携带值为", e.detail.value);
  this.setData({
    city: e.detail.value,
  });
},

官网：表单组件form

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。