微信小程序表单

最新推荐文章于 2024-07-10 19:16:05 发布
最新推荐文章于 2024-07-10 19:16:05 发布
阅读量79 收藏
点赞数 3
文章标签： 微信小程序 notepad++ 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shaojiashun/article/details/139839546
版权 
<view class="content">   
 <view class="discriminate">
      <view class="radio"></view>
      <view class="sfz"><text>身份证智能识别填写</text></view>
    </view>

    <view class="discriminatesingtitle">
      <text>点击自动识别身份证信息</text>
    </view>
   
    <view class="pybottomitem" style="margin-top:30rpx">
      <view> <text class="required">*</text><text class="pybottomitemtitle">身份证号</text></view>
      <view class="pybottomiteminput" style="width: 56%;">
        <input type="idcard" bindblur="rqpCard" maxlength="18" value="{{personalCard}}" name="personalCard" placeholder="请输入身份证号" />
      </view>
      <view class="pb center" bindtap="chooseImage" style="height: 55rpx;background-image: url('{{app.host.file.info}}/pb.png')"></view>
    </view>
    <view class="{{isshow?'':'isnum'}}" style="margin-left: 30%;margin-top: 10rpx;color: #FF0000;"><text>请输入正确格式的身份证号码</text></view>

    <view class="pybottomitem">
      <view> <text class="required">*</text><text class="pybottomitemtitle">姓名</text></view>
      <view class="pybottomiteminput">
        <input type="text" value="{{username}}" name="name" placeholder="请输入姓名" />
      </view>
    </view>

    <!-- <view class="{{personalCard?'':'isnum'}}" style="margin-left: 30%;margin-top: 10rpx;color: #FF0000;"><text>请输入正确格式的身份证号码</text></view> -->

    <view class="pybottomitem">
      <view> <text class="required">*</text><text class="pybottomitemtitle">性别</text></view>
      <view class="pybottomiteminput">
        <radio-group name="gender" bindchange="handleChange">
          <radio wx:for="{{gender}}" value="{{item.value}}" checked="{{item.checked ? true : false}}">{{item.text}}</radio>
        </radio-group>
      </view>
    </view>
    <view class="pybottomitem">
      <view> <text class="required">*</text><text class="pybottomitemtitle">民族</text></view>
      <picker bindchange="shoppick" range="{{nationdata}}" range-key="name">
        <view class="picker ">
          <!-- <text class='icon .icon-youjiantou placeholder-style' style="float: right;"></text> -->
          <van-icon name="arrow" size="32rpx" color="#888888" />
          <input placeholder="请选择民族" disabled="true" class="textomit" style="float: left;font-weight: 400;font-family: PingFang SC;" value="{{nationtitle}}" />
          <input type="text" style="display: none;" name="nationID" value="{{nationvalue}}" />
        </view>
      </picker>
    </view>
    <view class="pybottomitem">
      <view> <text class="required">*</text><text class="pybottomitemtitle">出生日期</text></view>
      <picker mode="date" value="{{date}}" start="1555-01-01" end="2099-01-01" bindchange="birthdayChange">
        <view class="picker ">
          <van-icon name="arrow" size="32rpx" color="#888888" />
          <input placeholder="请选择出生日期" disabled="true" value="{{date}}" class="textomit" style="float: left;font-weight: 400;font-family: PingFang SC;" />
          <input type="text" style="display: none;" name="birthday" value="{{date}}" />
        </view>
      </picker>
    </view>
    <view class="pybottomitem" style="border-bottom: 0px;">
      <view> <text class="required">*</text><text class="pybottomitemtitle">家庭地址</text></view>
      <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
        <view class="picker ">
          <van-icon name="arrow" size="32rpx" color="#888888" />
          <input placeholder="请选择家庭地址" disabled="true" value="{{region[0]}}{{region[1]}}{{region[2]}}" class="textomit" style="float: left;font-weight: 400;font-family: PingFang SC;" />
          <input type="text" style="display: none;" name="familyAddress" value="{{region[0]}}{{region[1]}}{{region[2]}}" />
        </view>
      </picker>
    </view>
    <view class="pybottomitem" style="height: 20rpx;">
      <view> <text class="pybottomitemtitle"></text></view>
      <view class="pybottomiteminput" style="margin-top: -30rpx;">
        <input type="text" value="{{adddress}}" name="adddress" placeholder="请输入详细地址" />
      </view>
    </view>
 </view>
@import '/lib/iconfont/iconfont.wxss';

.topbg {
  width: 100%;
  height: 520rpx;
  /* background: linear-gradient(180deg, #2E6EFF 56.99999999999999%, #F6F6F6 100%); */
  overflow: hidden;
  align-items: center;
  justify-content: center;
  /*图片路径*/
  background-size: 100% 100%;
  /*图片显示大小*/
  background-repeat: no-repeat;
  /*是否重复多个*/
  background-position: center;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  /*图片路径*/
  background-size: 100% 100%;
  /*图片显示大小*/
  background-repeat: no-repeat;
  /*是否重复多个*/
  background-position: center;
}

.toptitle {
  margin: auto;
  margin-top: 49rpx;
  height: 47rpx;
  font-size: 48rpx;
  font-family: DingTalk JinBuTi;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 47rpx;
  text-shadow: 0rpx 4rpx 6rpx rgba(0, 31, 96, 0.5);
  text-align: center;
}

.topsingletitle {
  margin: auto;
  margin-top: 40rpx;
  height: 32rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  color: #FFEC48;
  line-height: 32rpx;
  text-shadow: 0rpx 4rpx 6rpx rgba(0, 31, 96, 0.2);
  text-align: center;
}

.content {
  margin: auto;
  margin-top: -300rpx;
  width: 690rpx;
  background: #FFFFFF;
  border-radius: 10rpx;
  overflow: hidden;
  padding-bottom: 40rpx;
}

.contenttwo {
  margin: auto;
  margin-top: 50rpx;
  width: 690rpx;
  background: #FFFFFF;
  border-radius: 10rpx;
  overflow: hidden;
  padding-bottom: 40rpx;
}

.discriminate {
  margin-top: 40rpx;
  margin-left: 30rpx;
  display: flex;
}

.radio {
  width: 10rpx;
  height: 30rpx;
  background: #3D8FFF;
  border-radius: 5rpx;
}

.sfz {
  margin-left: 10rpx;
  width: 100%;
  height: 31rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #000000;
  line-height: 30rpx;
}

.discriminatesingtitle {
  margin-left: 30rpx;
  margin-top: 20rpx;
  width: 100%;
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #888888;
  line-height: 40rpx;
}

.upload {
  margin-top: 30rpx;
  margin-left: 30rpx;
  display: flex;
}

.uploadsfz {
  width: 300rpx;
  height: 200rpx;
  background: #F6F8FC;
  position: relative
}

.uploadhk {
  margin-left: 25rpx;
  width: 300rpx;
  height: 200rpx;
  background: #F6F8FC;
  position: relative
}

.a {
  width: 18rpx;
  height: 18rpx;
  position: absolute;
  top: 0;
  left: 0;
  border-left: 2px solid #9CA7BC;
  border-top: 2px solid #9CA7BC;
}

.b {
  width: 18rpx;
  height: 18rpx;
  position: absolute;
  top: 0;
  right: 0;
  border-right: 2px solid #9CA7BC;
  border-top: 2px solid #9CA7BC;
}

.c {
  width: 18rpx;
  height: 18rpx;
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 2px solid #9CA7BC;
  border-left: 2px solid #9CA7BC;
}

.d {
  width: 18rpx;
  height: 18rpx;
  position: absolute;
  bottom: 0;
  right: 0;
  border-right: 2px solid #9CA7BC;
  border-bottom: 2px solid #9CA7BC;
}

.pybottomitem {
  margin-left: 30rpx;
  width: 88%;
  padding: 23rpx 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
}

.pybottomitemtitle {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 40rpx;
}

.required {
  color: #fc5744;
}

.pybottomiteminput {
  width: 71%;
  text-align: left;
}
.pb{
  width: 55rpx;
}

radio {
  padding-left: 30rpx;
  width: 118rpx;
  height: 28rpx;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #555555;
  line-height: 40rpx;
}

radio:nth-child(1) {
  padding-left: 10rpx;
}

radio .wx-radio-input.wx-radio-input-checked {
  border-color: #0097FF !important;
  background: #0097FF !important;
}

.radiotwo {
  width: 10rpx;
  height: 30rpx;
  background: #16D1B0;
  border-radius: 5rpx;
}

.switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100px;
  height: 54rpx;
  border-radius: 54rpx;
  background: #f7f7fb;
}

.switchNums {
  width: 100rpx;
  height: 54rpx;
  line-height: 54rpx;
  border-radius: 54rpx;
  text-align: center;
  color: #C1C1C1;
  font-size: 28rpx;
  font-weight: bold;
}

.currentNum {
  background: #3D8FFF;
  color: #ffffff;
}

.bottom {
  width: 100%;
  margin-top: 25rpx;
  height: 112rpx;
  background: #FFFFFF;
  padding-top: 25rpx;
}

.subbtn {
  width: 96% !important;
  height: 80rpx;
  font-size: 30rpx;
  line-height: 76rpx;
  background-color: #0097FF;
  color: #FFFFFF;
  text-align: center;
  border-bottom: 10px;
  font-weight: 400px !important;
  letter-spacing: 10rpx;
  margin: auto;
}

.isnum {
  display: none;
}

.textomit {
  width: 400rpx !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.icon {
  width: 30rpx !important;
}
// 获取应用实例
const app = getApp()

Page({
    data: {
        app: app,
        gender: [{text: "男", value: 155}, {text: "女", value: 156}], //性别
        nationdata: [{value: 1, name: "汉"}, {value: 2, name: "壮"}, {value: 3, name: "满"}, {value: 4, name: "回"}], //民族
       
        isnum: false, //手机号格式,
        ismobilePhone: false,
        
    },
    onLoad() {
        var that = this;

        
       
    },
    onShow() {

    },
    // 上传身份证图片
    chooseImage() {
        const that = this;
        wx.chooseMedia({
            sourceType: ['album', 'camera'], //图片和视频选择的来源
            //sizeType: ['original', 'compressed'], //是否压缩所选文件
            count: 1,
            mediaType: ['image'],
            success(res) {
                wx.getFileSystemManager().readFile({
                    filePath: res.tempFiles[0].tempFilePath, //选择图片返回的相对路径
                    encoding: 'base64', //编码格式
                    success: res => { //成功的回调

                    }
                });

            },
            fail: function (err) { //请求失败
                if (err.errMsg == "chooseMedia:fail cancel") {
                    wx.showToast({
                        title: "取消上传",
                        icon: "none",
                        duration: 1000
                    });
                } else {
                    wx.showToast({
                        title: "图片上传失败",
                        icon: "none",
                        duration: 1000
                    });
                }
            }
        })
    },
    //上传户口本图片
    chooseImagehkb() {
        const that = this;
        wx.chooseMedia({
            sourceType: ['album', 'camera'], //图片和视频选择的来源
            //sizeType: ['original', 'compressed'], //是否压缩所选文件
            count: 1,
            mediaType: ['image'],
            success(res) {
                that.setData({
                    hkbimageList: res.tempFiles,
                    imgList: [],
                    ishavefile: true,
                    isshowhkb: false
                })
            },
            fail: function (err) { //请求失败
                if (err.errMsg == "chooseMedia:fail cancel") {
                    wx.showToast({
                        title: "取消上传",
                        icon: "none",
                        duration: 1000
                    });
                } else {
                    wx.showToast({
                        title: "图片上传失败",
                        icon: "none",
                        duration: 1000
                    });
                }
            }
        })
    },
    //民族
    shoppick: function (e) {
        this.setData({
            nationtitle: this.data.nationdata[e.detail.value].name,
            nationvalue: this.data.nationdata[e.detail.value].value
        });
    },
    //出生日期
    birthdayChange: function (e) {
        this.setData({
            date: e.detail.value
        })
    },
    //家庭住址
    bindRegionChange: function (e) {
        this.setData({
            region: e.detail.value
        })
    },
    
    

   
    //电话号码验证
    rqnum: function (e) {
        var num = e.detail.value
        if (num.length != 11) {
            this.setData({
                isnum: true
            })
        } else {
            this.setData({
                isnum: false
            })
        }
    },
    //
    rqmobilePhone: function (e) {
        var num = e.detail.value
        if (num.length != 11) {
            this.setData({
                ismobilePhone: true
            })
        } else {
            this.setData({
                ismobilePhone: false
            })
        }
    },
   
    
    //   提交方法
    submit() {

    }

})

滴滴答答哒
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
微信小程序表单验证，WxValidate的使用
弥拉i的博客
03-21 1436
微信小程序表单验证，WxValidate的使用，自定义验证方法的使用和讲解。
微信小程序表单框架01
m0_61349626的博客
04-12 816
简易表单wxml界面代码与界面效果 文本框样式： 点击多列选择器，代码与效果如下： 多列选择器js代码：
微信小程序表单控件
daisy211988的博客
07-25 498
【微信小程序代码】微信小程序表单控件
一个简单的微信小程序表单提交样式模板
m0_52244931的博客
03-10 1177
没什么东西，只是方便自己直接复制使用。
微信小程序表单验证错误提示效果
08-30
微信小程序表单验证错误提示效果 微信小程序表单验证错误提示效果是指在微信小程序中对用户输入的表单数据进行验证，并在验证不通过时提供错误提示，以确保用户输入的数据正确性。这种错误提示效果可以提高用户体验...
微信小程序表单验证功能完整实例
11-30
本文实例讲述了微信小程序表单验证功能。分享给大家供大家参考，具体如下： Wxml <form bindsubmit="formSubmit" bindreset="formReset"> <input name="name" class="{{whoClass=='name'?'...
微信小程序表单弹窗实例
10-18
主要为大家详细介绍了微信小程序表单弹窗实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序实现表单校验功能
08-29
"微信小程序实现表单校验功能" 微信小程序实现表单校验功能是小程序开发中最难实现的公共业务之一。表单校验的难点在于表单组件的多样性和校验规则的多样性，导致复杂度达到n³。解决这个问题的关键是组件化和非...
基于STM32设计的智能喂养系统(ESP8266+微信小程序)175
07-05 848
本设计采用了STM32控制芯片作为核心，结合了多种传感器和模块，以实现自动化的喂养功能。其中包括1.44寸LCD彩色显示屏和按键模块用于显示和操作参数，28BYJ-48步进电机用于实现定量投食，ESP8266-WIFI模块用于远程控制和监测，蜂鸣器模块用于报警提示，H711称重传感器用于检测食物余量，DHT11环境温湿度传感器用于监测环境条件，水位传感器用于检测水位。
微信小程序之使用上拉加载实现图片懒加载
07-10 273
微信小程序图片懒加载，基于自带事件触底事件实现，单列模式的图片懒加载，可以自己控制啥时候加载，通过对数据的调整可以做到无感知！ 如果要图片占位的话，需要调整对应的代码！
Java毕业设计 基于SSM vue图书管理系统小程序 微信小程序
最新发布
yinjl123的博客
07-10 472
管理员 登录 个人中心 修改密码 个人信息 用户管理 图书分类管理 图书信息管理 我的待还管理 图书归还管理 催还提醒管理 轮播图管理 系统公告管理 意见反馈管理 关于我们管理角色：用户 管理员大家可。
微信小程序连接阿里云IOT物联网平台：常见问题与解决方案
Actkeying的博客
07-07 215
通过解决上述关键问题，可以优化微信小程序连接阿里云IOT物联网平台的稳定性、安全性和性能，确保项目顺利运行并符合预期要求。如有其他问题，欢迎随时提问。
PHP智慧门店微信小程序系统源码
2401_84593753的博客
07-05 451
在这个快速变化的时代，智慧门店v3微信小程序以其前瞻性的设计理念、强大的功能支持以及卓越的用户体验，成为了未来零售的必然选择。它不仅能够提升商家的经营效率和服务质量，还能为顾客带来更加便捷、个性化的购物体验。线上浏览，线下体验，让购物变得更加便捷与个性化。它能够实时收集并分析顾客行为数据，包括浏览记录、购买偏好等，为商家提供精准的顾客画像。同时，小程序还支持顾客评价、留言反馈等互动方式，让商家及时了解顾客需求，提升服务质量。同时，小程序还能自动生成经营报表，让商家随时掌握门店运营状况，及时调整经营策略。
微信小程序：图片转icon
Z_Wonderful的博客
07-05 455
微信小程序：图片转icon
基于JavaSpringBoot+Vue+uniapp微信小程序校园宿舍管理系统设计与实现(论文7000字参考+源码+LW+部署讲解)
mr_lili_111的博客
07-10 745
本论文参考通过相应修改和内容添加，就可以实现降重处理，达到论文要求。每个学校每个老师对论文的格式要求不一样，故本论文只供参考，本论文页数达到60页以上，字数在6000及以上。
PHP红包拓客微信小程序系统源码
2401_84413757的博客
07-08 281
👥 它支持多种互动玩法，如邀请好友助力、分享赢红包等，让用户在参与活动的同时，也能感受到乐趣和成就感。而红包拓客微信小程序则不同，它利用大数据和智能算法，帮助你精准定位潜在顾客，实现个性化推送。🎯 这样一来，你的营销活动不仅能覆盖更广泛的人群，还能有效提高转化率，让客源滚滚而来。无论是节日促销、新品上市还是会员回馈，只需一键设置，就能生成各种吸引人的红包活动，轻松抓住顾客的眼球。营销效果好不好，数据说了算。红包拓客微信小程序采用简洁明了的操作界面，让你无需复杂的设置就能轻松创建和管理红包活动。
基于JavaSpringBoot+Vue+uniapp微信小程序校园宿舍管理系统设计与实现(7000字论文参考+源码+LW+部署讲解)
mr_lili_111的博客
07-10 562
本论文参考通过相应修改和内容添加，就可以实现降重处理，达到论文要求。每个学校每个老师对论文的格式要求不一样，故本论文只供参考，本论文页数达到60页以上，字数在6000及以上。
微信小程序表单学籍注册
05-23
微信小程序表单学籍注册可以通过以下步骤完成： 1. 在微信开发者工具中创建一个小程序，选择“表单”模板。 2. 在小程序中创建一个表单页面，包括所有必填项，如姓名、学号、班级等。 3. 将表单提交按钮添加到页面...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

滴滴答答哒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值