小程序表单按钮高亮

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

先看效果

其实就是监听每个input获取的值，然后在做判断，看是否有获取到，最后在判断按钮的颜色（看不懂的，可以留言）

   <form bindsubmit='formSubmit'>
      <view class='fill_in'>
          <view>
              <text>收货人</text>  
              <input bindinput='highlightName' name='userName' value='' placeholder='请输入您的姓名' placeholder-style='color:#A0A0A0' /> 
          </view>
          <view>
              <text>手机号码</text>
              <input bindinput='highlightTell' type="number"  maxlength='11' name='tellPhone' value='' placeholder='121232435' placeholder-style='color:#A0A0A0'/>  
          </view>
          <view class='picker'>
            <text>省市区</text>
            <picker mode="region"  bindchange="bindRegionChange"  value="{{region}}"
            custom-item="{{customItem}}" >
                <input placeholder='广东省 广州市 海珠区' 
                       placeholder-style='color:#A0A0A0'
                       disabled
                       name='address'
                       value='{{region[0]}} {{region[1]}} {{region[2]}}'/>
            </picker>
            <image class='icon' src='http://192.168.3.20/images/imageTu/right.png'></image>
          </view>
          <view class='detailAddress'>
            <text>详细地址</text>
            <input bindinput='highlightDeatail' name='addressInfo' value='' placeholder='请输入您的详细地址' placeholder-style='color:#A0A0A0' />
            <view class='location'>
                <image src='http://192.168.3.20/images/imageTu/location.png'></image>
                <text>定位</text>
            </view>
          </view>
      </view>

      <button class="blueBg" hidden='{{lighter}}' form-type='submit'>保存收货地址</button>

      <button class="preservation" hidden='{{!lighter}}'>保存收货地址</button>
      
   </form>

 highlightName(e){
    let that = this;
    let userName = e.detail.value;

    if (userName == undefined || userName == '' || that.data.addressInfo == undefined || that.data.addressInfo == "" || that.data.region == undefined || that.data.tellPhone == undefined || that.data.tellPhone == "" ) {
          that.setData({
            lighter: true
          })
    }else{
      that.setData({
        lighter: false
      })
    }

    that.setData({
      userName: userName
    })
    },

  highlightTell(e) {
    let that = this;
    let tellPhone = e.detail.value;

    if (tellPhone == undefined || tellPhone == "" || that.data.addressInfo == undefined || that.data.addressInfo == "" || that.data.region == undefined || that.data.userName == undefined || that.data.userName == "") {
      that.setData({
        lighter: true
      })
    } else {
      that.setData({
        lighter: false
      })
    }

    that.setData({
      tellPhone: tellPhone
    })
  },

  highlightDeatail(e) {
    let that = this;
    let addressInfo = e.detail.value;

    if (addressInfo == undefined || addressInfo == "" || that.data.addressInfo == undefined || that.data.addressInfo == "" || that.data.region == undefined || that.data.userName == undefined || that.data.userName == "") {
      that.setData({
        lighter: true
      })
    } else {
      that.setData({
        lighter: false
      })
    }

    that.setData({
      addressInfo: addressInfo
    })
  },
// _____________按钮高亮_______________//