微信小程序表單的提交和表單控件的操作

效果展示

wxml

<form bindsubmit="submitForm" bindreset="resetForm">
    <input type="text" name="contant" placeholder="請輸入提交內容"></input>
    <!--input要有屬性，否則提交表單會忽略-->
    <button form-type="submit">提交</button>
    <button form-type="reset">重填</button>
</form>
<checkbox-group>
    <checkbox value="1">boy</checkbox>
    <checkbox value="2">girl</checkbox>
</checkbox-group>

<checkbox-group>
    <label wx:for="{{sex}}">
        <checkbox value="{{item.name}}">{{item.name}}</checkbox>  
    </label>
</checkbox-group>

<input type="digit" value="asd" placeholder="qwe" bindinput></input>
<!-- type為text時 手機默認鍵盤是標准鍵盤，number默認數字鍵盤，digit默認是帶小數點的數字鍵盤-->
<picker mode="selector" value="{{pickerValue}}" bindchange="pickerChange" range="{{picker}}">
<!--一定要有value屬性,"value"可以為除漢字外的任意字符，否則無法獲取選中了那個-->
    選項{{pickerValue}}
</picker>
<picker mode="multiSelector" value="{{multiPickerValue}}" bindchange="multiPickerChange" range="{{multiPicker}}">
    多選項{{multiPickerValue}}
</picker>

<radio-group>
    <radio value="boy">boy</radio>
    <radio value="girl">girl</radio>
</radio-group>
<!--進行操作還是bindchange-->

<slider min="0" max="100" step="10" value="50"></slider>
<!--當然也有bindchange-->

<switch bindchange="switchChange">開關</switch>

js

下面是js中data部分代碼和綁定事件

data: {
        sex:[
            {name:"man"},
            {name:"woman"}
        ],
        picker:[
            "選項1","選項2","選項3","選項1"     //不會去重
        ],
        pickerValue:"",
        multiPicker:[["left1","left2","left3"],["right1","right2"]],
        multiPickerValue:"",
    },
    submitForm:function(event){
        console.log(event.detail.value);
    },
    resetForm:function(){
        console.log("reset");
    },
    pickerChange:function(event){
        console.log(event.detail.value);
        console.log(this.data.picker[event.detail.value]);
        this.setData({
            pickerValue:this.data.picker[event.detail.value]
            //需要this和data，從外往里找
        })
    },
    multiPickerChange:function(event){
        console.log(event.detail.value[0]);
        console.log(event.detail.value[1]);
        //event.detail.value在多維數組中返回一個一維數組，存放每列的選擇
        console.log(this.data.multiPicker[0][event.detail.value[0]]);
        console.log(this.data.multiPicker[1][event.detail.value[1]]);
        this.setData({
            multiPickerValue:[this.data.multiPicker[0][event.detail.value[0]],this.data.multiPicker[1][event.detail.value[1]]]
        })
        //這里也注意是設置數組
    },
    switchChange:function(event){
        console.log(event.detail.value);
    },