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

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

效果图:

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

<!-- 表单 -->
<view class="forms">
  <view class="container">
    <image class="bg" src="../../images/formBg.png" mode="aspectFill"></image>
    <view class="title">
      <text class="text">我家装修需要花多少钱?</text>
      <text class="text">免费快速获取预算方案</text>
    </view>
    <form class="" catchsubmit="submitFn">
      <view class="item">
        <text class="text">*</text>
        <picker class="" mode="region" bindchange="bindRegionChange" value="{{region}}">
          <input type="text" name="city" value="{{city}}" placeholder="请选择房屋所在城市" placeholder-class="input-placeholder" />
        </picker>
      </view>
      <view class="item">
        <text class="text"></text>
        <input type="text" name="area" value="{{area}}" class="weui-input" placeholder="请输入房屋面积" placeholder-class="input-placeholder" />
      </view>
      <view class="item">
        <text class="text"></text>
        <input type="text" name="name" value="{{name}}" class="weui-input" placeholder="请输入您的姓名" placeholder-class="input-placeholder" />
      </view>
      <view class="item">
        <text class="text">*</text>
        <input type="text" name="phone" value="{{phone}}" class="weui-input" placeholder="请输入联系电话" placeholder-class="input-placeholder" />
      </view>
      <button class="btn" formType="submit">
        <text>一键预约</text>
        <!-- <image class="img" src="../../images/headglobal.png" mode="aspectFill"></image> -->
      </button>
      <view class="desc">装企提供免费上门量房服务、出3套方案供您对比</view>
    </form>
  </view>
</view>
.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

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

(0)

相关推荐

  • 微信小程序表单验证插件WxValidate的二次封装功能(终极版)

    微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了:第二篇是一次性全部显示所有的错误,然后3秒后自动消失, 这种在极端情况下也不太好,例如我例子里的一页的表单个数非常多的情况下,可能后面的还没看到就消失了.所以最近又重新做了一版,最终版的效果如下图:错误信息一次性全部显示,可以通过点击信息框让其消失,将自动消失时间设置的稍微长点,例如10秒,这样就能比较好的兼顾效果和使用上的便捷. 先讲讲最终版与前面2

  • 微信小程序实现表单验证源码

    本文实例为大家分享了微信小程序实现表单验证的具体代码,供大家参考,具体内容如下 效果图 点击预约设计弹出表单 城市,面积不能输入,只能选择 点击位置获取当前定位 源码: Wxml <!--pages/designerList/designerDetail.wxml--> <view>     <view class='tc m_t20'>     <image src='{{urlhttp + designerDetail.thumb}}' class='imgl

  • 微信小程序表单验证功能完整实例

    本文实例讲述了微信小程序表单验证功能.分享给大家供大家参考,具体如下: Wxml <form bindsubmit="formSubmit" bindreset="formReset"> <input name="name" class="{{whoClass=='name'?'placeholderClass':'inputClass'}}" placeholder="请填写您的姓名"

  • 微信小程序表单验证form提交错误提示效果

    本文实例为大家分享了微信小程序表单验证提交错误提示的具体代码,供大家参考,具体内容如下 表单验证,点击确认发布不能为空错误提示. 以下是效果图: 代码如下: WXML: <view class="ad_popError" wx:if="{{popErrorMsg}}">{{popErrorMsg}}</view> <view class="ad_popFt"> <form bindsubmit="

  • 微信小程序表单验证WxValidate的使用

    效果图GIF git地址:WxValidate 使用 import WxValidate from '../../utils/WxValidate'; Page({ data: { basicInfo: { tel: '', post: '', weChat: '', specialPlane: '', email: '', intro: '' } }, onLoad() { this.initValidate(); }, initValidate() { const rules = { tel

  • 微信小程序表单验证错误提示效果

    微信小程序表单验证,点击确认发布不能为空错误提示,具体内容如下 以下是效果图: 代码如下: WXML: <view class="ad_popError" wx:if="{{popErrorMsg}}">{{popErrorMsg}}</view> <view class="ad_popFt"> <form bindsubmit="goDetail" > <textarea

  • 微信小程序开发之表单验证WxValidate使用

    微信小程序的开发框架个人感觉大体上跟VUE是差不多的,但是他的表单组件没有自带的验证功能,因此开发小程序的表单验证时候一般有两种方法,一是自己裸写验证规则,但是需要比较扎实的正则表达式基础,一种是利用官方社区开发的WxValidate插件进行表单验证. WxValidate插件是参考 jQuery Validate 封装的,为小程序表单提供了一套常用的验证规则,包括手机号码.电子邮件验证等等,同时提供了添加自定义校验方法,让表单验证变得更简单. 首先插件的下载地址和官方文档都在WxValidat

  • 微信小程序实现表单验证

    微信小程序的表单验证,供大家参考,具体内容如下 需要用到一个插件WxValidat.js 传送门 在需要使用的page js文件下导入 import WxValidate from '../../utils/WxValidate.js' 主要内容 WXML内容 <form bindsubmit="formSubmit"> <view class="weui-cells__title">用户名</view> <view cla

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

    本文实例为大家分享了微信小程序实现表单验证提交的具体代码,供大家参考,具体内容如下 效果图: 说明:点击一键预约提交表单时我们需要验证一些必填项以及它们的格式.微信小程序表单验证跟vue的input双向绑定不同,微信小程序只能通过button按钮提交form表单,然后通过监听表单提交方法去获取提交的数据. <!-- 表单 --> <view class="forms">   <view class="container">    

  • 微信小程序-form表单提交代码实例

    效果 html代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="section section_gap"> <view class="section__title">是否公开信息</view> <switch name="isPub" /> </view&

  • 微信小程序 input表单与redio及下拉列表的使用实例

    微信小程序 input表单与redio及下拉列表的使用实例 一个简单的预约类型的表单,效果 主要代码: <form bindsubmit="bindSave"> <view class="form-box"> <view class="row-wrap"> <view class="label">联系人</view> <view class="labe

  • 微信小程序实现表单校验功能

    小程序SDK版本 1.4 表单校验之难 如果要问微信小程序最难实现的公共业务是什么?应该是表单校验,没有之一.原因如下: 表单组件在数量上达到11个,居各类组件之首.当然幸运的是,并不是所有的都需要校验. 而这些组件操作方式多样,可分为滑动.(多行)输入.点击.点击+滑动. 即使是同一个组件,因为业务场景不同就会有不同的校验规则. 更麻烦的是,这些组件之间经常还会联动或者关联校验. - 但是,作为一个非简单静态页面,有着较多用户交互的小程序,表单校验又是一个非常常用的功能:登录.注册.新增.编辑

  • 微信小程序form表单组件示例代码

    表单,将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交. 当点击<form/>表单中 formType 为 submit 的<button/>组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key. 属性名 类型 说明 report-submit Boolean 是否返回fo

  • 微信小程序常用表单组件的使用详解

    目录 1.常用表单组件 1.1button 1.2checkbox 1.3input 1.4label 1.5form 1.6radio 1.7slider 1.8switch 1.9textarea 2.实训小案例–问卷调查 1.常用表单组件 1.1 button <button>为按钮组件,是常用的表单组件之一,用于事件的触发以及表单的提交.其属性表如下所示. 代码示例: <view class="demo-box"> <view class=&quo

  • Javascript的表单验证-提交表单

    推荐阅读:Javascript的表单验证长度 Javascript的表单验证-初识正则表达式 Javascript的表单验证-揭开正则表达式的面纱 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 坏数据不该抵达服务器:提交表单时的验证 表单域对象里有个form特性,它使用数组表示了整份表单的域 假如这里只有一个简单的信息文本框和一个邮政编码框,还有一个提交按钮 <form> <input id="message" name

  • layui插件表单验证提交触发提交的例子

    废话不多说,大家直接看代码吧! <!------HTML部分---------> <form class="layui-form" action="{:url('login/login')}" method="post"> <div class="logi_content"> <p class="tit">管理系统</p> <div clas

随机推荐