【微信小程序】表单提交验证及获取表单输入的值

最新推荐文章于 2024-05-31 09:45:43 发布

原创

最新推荐文章于 2024-05-31 09:45:43 发布 · 2.1k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

本文介绍了在微信小程序中如何实现表单提交时的省市区选择器验证，通过条件判断显示提示或已选内容，并将选择值绑定到隐藏的input框，确保在表单提交时能获取到正确信息。

效果图：
在这里插入图片描述

说明：请选择房屋所在城市的效果是省市区选择器，刚开始我们可能直接在picker选择器中直接包含一个input输入框实现，但是这样的话点击选择的话可能聚焦在输入框中，我们想要的效果是点击的时候直接拉起省市区选择器。

解决办法：考虑到未选择前有文字提示，我们可以用判断city变量的方法条件显示提示和选择的内容，同时为了在表单提交中可以获取到内容，可以把选择的内容同时绑定到input输入框并且把input框隐藏。

<form catchsubmit="submitFn">
  <picker mode="region" bindchange="bindRegionChange" value="{
    
    {region}}">
    <view class="item">
      <text class="text">*</text>
      <view class="weui-input" wx:if="{
    
    {city.length > 0}}">
        {
  
  {city}}
      </view>
      <view class="input-placeholder" wx:else>
        请选择房屋所在城市
      </view>
      <input type="text" name="city" value="{
    
    {city}}" hidden="true"/>
    </view>
  </picker>

  <view class="item">
    <text class="text"></text>