【微信技术-微信小程序】------- 获取Form表单数据信息

一，微信小程序：获取form表单数据

1.效果图：

2.前端HTML代码:

  （1）下面是主代码:

 <view class="form-view">
        <view class="form-content">
            <form bindsubmit="loginFormData">
                <view class="form-content-line">
                <block><text class="iconfont icon-account"></text></block>
                <block><input type="text" name='username' id="useraname" value="{{userNameVal}}" placeholder="请输入登录账号"/></block>
                </view>
                <view class="form-content-line">
                <block><text class="iconfont icon-password"></text></block>
                <block><input type="{{inputPwd}}" name='password' id="password" value="{{passWordVal}}" placeholder="请输入密码"/></block>
                <block><text class="iconfont {{classIconPwd}} inputPwd" bindtap="onShowClosePwd"></text></block>
                </view>
                <view class="form-content-line">
                <button type="primary" size="default" style="{{btnLoginCss}}" form-type="submit">
                <text class="cuIcon-loading2 iconfont-spin" wx:if="{{loginLoadIcon=='1'}}"></text>
                登录
                </button>
                </view>
                <view class="form-content-line">
                    <view>
                        <label class="checkbox">
                            <checkbox value="{{cbxRememberPwd}}" name='rememberPwd' checked="{{cbxRememberPwd=='1'?'checked':''}}" />记住密码
                        </label>
                    </view>
                    <view class="classForgetPwd" bindtap="onForgetPwd">忘记密码?</view>
                </view>
            </form>
        </view>
    </view>

 (2) 如何才能获取表单数据需要配置两个地方:

  2.1：在form标签添加这个事件:【bindsubmit="loginFormData"】；

     注释：bindsubmit：是提交事件；loginFormData：提交后表单数据传入的方法 ；

  2.2：在点击登录按钮标签添加属性：【form-type="submit"】；

     注释：form-type：提交的类型； submit:提交的submit参数；

 （在代码中查看如上）

 3.JavaScript代码:

Page({

    /**
     * 页面的初始数据
     */
    data: {
        userNameVal:"",//用户名
        passWordVal:"",//密码
        inputPwd:"password",//密码类型
        classIconPwd:"icon-Notvisible",//密码显示眼睛或关闭眼睛 默认关闭
        btnLoginCss:"width:100%",//登录按钮样式
        cbxRememberPwd:"0",//记住密码
        loginLoadIcon:"0",//登录加载提示
    },
    /**密码显示原文本或者加密 */
    onShowClosePwd:function(){
        var _this=this;
        var _inputPwd=(_this.data.inputPwd=="password"?"text":"password");
        var _classIconPwd=(_this.data.classIconPwd=="icon-Notvisible"?"icon-browse":"icon-Notvisible");
        this.setData({
          inputPwd:_inputPwd,
          classIconPwd:_classIconPwd
        })
    },
    /**登录按钮submit提交 */
    loginFormData:function(e){
        console.log(e);
        console.log(e.detail.value);//表单数据
        var formData=e.detail.value;//获取表单数据
        var userNameVal=formData.username;//账号
        var passWordVal=formData.password;//密码
        this.setData({
            passWordVal: passWordVal,
            userNameVal:userNameVal
        });
        //调转首页
        wx.switchTab({
            url: '../index/index'
        })
    },

})

  1.console.log(e)输出：(全部参数)

{type: "submit", timeStamp: 44779, target: {…}, currentTarget: {…}, mark: {…}, …}
currentTarget: {id: "", offsetLeft: 188, offsetTop: 251, dataset: {…}}
detail:
target: {id: "", dataset: {…}, offsetTop: 377, offsetLeft: 19}
value:
password: "pass11"
username: "username1"
__proto__: Object
__proto__: Object
mark: {}
mut: false
target: {id: "", offsetLeft: 188, offsetTop: 251, dataset: {…}}
timeStamp: 44779
type: "submit"
_userTap: true
__proto__: Object

  2.console.log(e.detail.value);//表单数据

{username: "username1", password: "pass11"}
password: "pass11"
username: "username1"

二，最后推荐其他文章：

1.【微信技术-微信小程序】-------微信小程序引用阿里巴巴iconfont图标库样式使用说明_皮皮冰要做大神-CSDN博客1.在阿里巴巴iconfont图标库中下载样式文件.[iconfont-阿里巴巴矢量图标库] 如下:（1）首先选择【unicode】编码方式 然后点击【下载至本地】；（2）下载完毕 进行解压 然后打开解压完成之后的文件找到【iconfont.ttf】如下:2.对文件进行转码【base64】让微信小程序支持此样式；如下：（1）点击【Add fonts】选择【iconfont.ttf】文件 在勾选其他配置；（2）点击【Convert】开始进行转换、出现【Download】然后..https://blog.csdn.net/qq_38366657/article/details/122543349
2.【微信技术-微信公众号】-------通过Java获取JS-SDK使用权限签名算法其中的“jsapi_ticket”信息实例代码_皮皮冰要做大神-CSDN博客1.什么是jsapi_ticket?2.通过JS-SDK获取使用权限签名算法“jsapi_ticket”的信息实例代码 private final static String ACCESS_TOKEN_URL_FULL = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=@appid&secret=@secret"; private final..https://blog.csdn.net/qq_38366657/article/details/122425748.3【微信技术-微信公众号】------- 通过Java和JavaScript实现获取地理位置接口:wx.getLocation的使用实例【JS-SDK】_皮皮冰要做大神-CSDN博客一，分为前端【Jquery】、后端[Java+SpringBoot]两部部分。1.前端:(1).引用Jq脚本文件.<script src="/libs/jquery/jquery-3.2.1.min.js"></script>(2).引用微信js-sdk的脚本文件.<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>(3).全部实例代码如..https://blog.csdn.net/qq_38366657/article/details/1224308424.【微信技术-微信公众号】-------通过Java获取Access token信息的代码实例_皮皮冰要做大神-CSDN博客1.什么是Access token？access_token是公众号的全局唯一接口调用凭据，公众号调用各接口时都需使用access_token。开发者需要进行妥善保存。access_token的存储至少要保留512个字符空间。access_token的有效期目前为2个小时，需定时刷新，重复获取将导致上次获取的access_token失效2.通过Java获取Access token信息【我的开发工具java+springboot 开发程序不一样一定不要照搬 一定要模仿 自己看明...https://blog.csdn.net/qq_38366657/article/details/122424697