表單提交在前端介面無處不在,我們需要獲取值,監聽輸入的值,提交表單的資料

那麼我們現在就試試

表單介面,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>
 

js程式碼

我們只給出獲取手機號取值的方式,注意你每輸入一個數字getPhone的事件就會執行一次,

e.detail.value 就是控制元件裡面當前的值,然後每個控制都取到值,setData後,就可以提交資料給服務端了

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