微信小程序之表单(获取验证码/单选框/多选框/图片上传 )

最新推荐文章于 2025-07-04 15:19:03 发布

原创

最新推荐文章于 2025-07-04 15:19:03 发布 · 1.8k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5 #javascript #正则表达式

知识点：布局flex 单选框
获取验证码倒计时： setInterval （第二个例子）
单选：当前点击的index与该项的index相同则选中；点击多次会有取消的思路是当前点击的index与赋值的不相同，赋值点击index选中；当前点击的index与赋值的相同则取消
多选：把选中项的selected取反
单选多选若没有对应图片则不现实图片图片预览
效果图如下：

在这里插入图片描述

<!-- wxml -->
<view class="form_wrap">
  <form catchsubmit="formSubmit">
    <view class="form_item">
      <view class="item_left">
        <text class="xin">*</text>
      <text class="title">姓名</text>
      <input class="ipt" placeholder="请输入姓名"></input>
      </view>
      <view class="right">
      </view>
    </view>
    <view class="form_item">
      <view class="item_left">
        <text class="xin">*</text>
      <text class="title"手机号</text>
      <input class="ipt" placeholder="请输入手机号"></input>
      </view>
      <view class="item_right">
        <text class="btn">一键获取</text>
      </view>
    </view>
    <view class="form_item">
      <view class="item_left">
        <text class="xin">*</text>
      <text class="title">验证码</text>
      <input class="ipt" placeholder="请输入验证码"></input>
      </view>
      <view class="item_right">
        <text class="btn">获取验证码</text>
      </view>
    </view>
    <!-- 单选 -->
    <view class="form_item form_dis">
      <view class="item_left">
        <text class="xin">*</text>
        <text class="title">单选框(单选)</text>
      </view>
      <view class="item_select">
        <view class="select_wrap {
    
    {currentIndex === index ? 'active select' : ''}}" wx:for="{
    
    {radios}}" wx:key="index" data-index="{
    
    {index}}" bindtap="selectRadio">
          <image wx:if="{
    
    {item.imgurl}}" class="select_img" src="{
    
    {item.imgurl}}" mode="widthFix" style="width: 220rpx"></image>
          <view wx:if="{
    
    {item.imgurl}}" class="select_btn">{
  
  {item.title}}</view>
          <image wx:if="{
    
    {item.imgurl}}"  class="zoom" src="../../imgs/zoom.png"  data-imgurl