小程序获取input的值,以及绑定输入事件

阿里云双12感恩回馈，云产品冰点价】云服务器89元/年，这里有专享低价

[链接] 云小站_专享特惠_云产品推荐-阿里云

表单提交在前端界面无处不在,我们需要获取值,监听输入的值,提交表单的数据

那么我们现在就试试

表单界面,css样式我就不贴出来了,我主要说明的是js部分的使用

<view class="container" wx:if="{{hasAuthority}}">
    <view class="title">
        绑定你的手机号
    </view>
    <view class="main">
        <view class="small-title">
            手机号
        </view>
        <input type="number" placeholder="请输入手机号" class="inp-holder" maxlength="11" bindinput="getPhone" />
         <view class="lineView"></view>
    </view>
    <view class="main">
        <view class="small-title">
            <text>验证码</text>
            <text class="code" bindtap="getMessage">{{getCode}}</text>
        </view>
        <input type="number" placeholder="请输入验证码" class="inp-holder" maxlength="6" bindinput="getCode" />
        <view class="lineView"></view>
    </view>
    <button class="login-btn" type="default" bindtap="defaultTap" hover-class="defaultTap">登录</button>
</view>bindinput="getPhone" />
         <view class="lineView"></view>
    </view>
    <view class="main">
        <view class="small-title">
            <text>验证码</text>
            <text class="code" bindtap="getMessage">{{getCode}}</text>
        </view>
        <input type="number" placeholder="请输入验证码" class="inp-holder" maxlength="6" bindinput="getCode" />
        <view class="lineView"></view>
    </view>
    <button class="login-btn" type="default" bindtap="defaultTap" hover-class="defaultTap">登录</button>
</view>

js代码

我们只给出获取手机号取值的方式,注意你每输入一个数字getPhone的事件就会执行一次,

e.detail.value 就是控件里面当前的值,然后每个控制都取到值,setData后,就可以提交数据给服务端了

    // 拿到手机号
    getPhone: function (e) {
        var val = e.detail.value;
        this.setData({
            telphone: val
        });
    },

大王卡每年360G流量,月费19元,免费申请,包邮 http://newunicom.279bq.cn/#/wangCard?selfChannelId=1361