小程序 表单按钮高亮

先看效果

 

其实就是监听每个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
    })
  },
// _____________按钮高亮_______________//

 

虽然这种方法比较啰嗦啦，但最终效果还是出来了的，如果你有好的方法，欢迎分享留言！！！！