微信小程序--问题汇总及详解之form表单

附上微信小程序开发文档链接：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html

form表单：

当点击 <form/> 表单中 formType 为 submit 的 <button/> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

bindtap 用户点击时触发

bindchange 用户输入完成时触发（建议要输入中文的input采用这个点击事件）

判断两次密码不一致用 !== 相比较  例如：if(that.data.password !== that.data.password_confirmation){ }

 <form bindsubmit="loginTap">
    <view class="section">
      <input placeholder="输入手机号"  maxlength="11" placeholder-style="color:#fff" name="phone" bindtap="phone"/>    //placeholder-style 设置样式 
    </view>                                                                                           //hover-class="none" 设置按钮按下的样式及状态
    <button  hover-class="other-button-hover" form-type="submit" bindtap="phoneBtn"> 登录 </button>
  </form>

Page({
        data: loginData,
        loginTap: function (e) {
            var that = this    //这句很重要
            var loginData = e.detail.value  //获取表单里所有key的值
            wx.request({
                method: 'POST',
                url: 'https://....',   //小程序只能采用https
                data: loginData,   //请求的数据
                header: {'content-type': 'application/json'},
                success: function (res) {
                    var tokend = res.data.token;  //获取后台token
                    wx.setStorageSync('tokend', tokend)  //存储token
                    if (res.code == 200) {
                        wx.switchTab({   //跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面,路径后不能带参数（需在 app.json 的 tabBar 字段定义的页面）
                            url: '../index/index',
                        })
                    }if (res.code == 400) {
                        wx.showToast({   //消息提示框，默认只能success，loading两种形式，可引进图片方式
                            title: '手机号码不正确',
                            image: '../Image/error.png',
                            duration: 2000
                        })
                    }
                },
            })
        }
    })

也可以就单独获取每个input的值

Page({
        data:{
            phone:''
        },
        phone:function(e){         //获取input值
            var that = this;
            that.setData({
                phone: e.detail.value
            })
        },
       phoneBtn: function (e) {
            var that = this;
            wx.request({
                url: 'https://....',
                method: 'GET',
                header: { 'content-type': 'application/json' },
                data: {
                    'phone': that.data.phone   //请求的数据
                },
                success: function (res) {}
            })
        },
    })