【微信小程序】表单验证提交

最新推荐文章于 2024-08-15 10:38:16 发布

cdgogo

最新推荐文章于 2024-08-15 10:38:16 发布

阅读量2.9k

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.csdn.net/cdgogo/article/details/119800159

版权

本文介绍了微信小程序中实现表单验证的过程，特别是在点击提交时验证必填项及其格式。与Vue的input双向绑定不同，微信小程序需要通过button触发form提交，并通过监听表单提交事件获取数据。

摘要由CSDN通过智能技术生成

效果图：
在这里插入图片描述
说明：点击一键预约提交表单时我们需要验证一些必填项以及它们的格式。微信小程序表单验证跟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=