微信小程序 picker选择器 表单验证 源码

微信小程序表单验证（这是自己写的，比较low，下篇附上公司大佬的源码，嘿嘿）

所在城市带选择城市的功能

比较懒笨，附上的代码是完整的，把接口数据换成自己的就可以用了，样式需要自己调，请在评论区夸我 ！！！

 

附上要用的API的路径  https://developers.weixin.qq.com/miniprogram/dev/component/picker.html?search-key=picker

附上的源码功能比较多，比较混乱

 

功能:所在城市不能手写，要从后台服务器拿到数据选择城市，当选中城市时，选中的值替换掉input中的值

思路：这里主要使用picker选择器，

1.在js中定义index2，初始值为空，

/*** 页面的初始数据*/

data: { index2: '',//城市下标 },

2.当选中的城市改变时，触发bindPickerzone事件，value的值也随之变化，

   此时需要在bindPickerzone事件中把新的value值赋给index2，

//所在城市选择

bindPickerzone: function (e) {

     console.log('picker发送选择改变，携带值为', e.detail.value)

     this.setData({

         index2: e.detail.value

     })

},

3.返回前端input框，将拿到的下标对应的元素值显示出来即可

<picker bindchange="bindPickerzone" value="{ {index2}}" range="{ {userZoneList}}">

    <input class='fl' type='text' placeholder='所在城市' placeholder-class='place' name="city" disabled='disabled'                                value='{ {userZoneList[index2]}}'></input>

    <text class='fr m_t5 grayb'style='margin-right:20rpx;'>﹀</text>

    <view class='cl'></view>

</picker>

小程序前端布局

<!--pages/activity/signup/signup.wxml-->
<!-- banner图 -->
<view class='bg_white' style='padding-bottom:30rpx;'>
  <image src='/images/actbanner.jpg' style='width:100%;height:220rpx;'></image>
</view>
<!-- 表单主要内容 -->
<view class='p_b20' style='width:90%;margin:0 auto;'>
  <form bindsubmit="formSubmit">
    <view class='addview20' style='padding-bottom:90rpx;'>
      <view class='bg_white font14 gray5 p_all10 p_b20'style='width:95%;margin 0 auto;padding-top:20rpx;'>
        <view class='inputstyle'>
          <picker bindchange="bindPickerzone" value="{
  {index2}}" range="{
  {userZoneList}}">
            <input class='fl' type='text' placeholder='所在城市' placeholder-class='place' name="city" disabled='disabled' value='{
  {userZoneList[index2]}}'></input>
            <text class='fr m_t5 grayb'style='margin-right:20rpx;'>﹀</text>
            <view class='cl'></view>
          </picker>
        </view>
        <input type='number' class=&