代码编织梦想

一,微信小程序:获取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

 

 

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_38366657/article/details/122975963

微信小程序中form 表单提交和取值实例详解-爱代码爱编程

我们知道,如果我们直接给 input 添加 bindinput,比如:<input bindinput="onUsernameInput" />,那么可以在 onUsernameInput 中直接使用 e.detail.value,即: onUsernameInput : function(e) { e.detail.value;

小程序提交form表单_xuexixuexien的博客-爱代码爱编程_小程序提交表单

需求:我需要给后台提交一个集合, 前端:一个搜索框,用的form表单,几个复选框,想要把选中的所有复选框和搜索框中输入的值一并提交到后台, 问题:可能是我不知道如何用form表单提交复选框,所以我不知道如何一并提交 办法;在js文件中定义一个集合,存放搜索框和选中的复选框。然后进行提交。 最后在js中定义了一个集合,然后把搜索框input中的值和复

微信小程序简单的form表单本地储存数据_田野的嘴好冰的博客-爱代码爱编程

效果图: 主要利用小程序的getStorage来实现异步本地储存。 小程序目录结构如下: 新建项目前,为了简化操作可直接右键新建目录,这样建出来的文件会直接写在app.json中,无需手动添加。 login.wxml代码: <!--pages/login/login.wxml--> <view class='container'>

微信小程序之获取表单数据_面壁思过程的博客-爱代码爱编程

前言:微信小程序中很多地方运用到了表单,很多时候我们需要把表单中的内容提取出来返回给后台,这里我随便写了一点 注意点: 1.所有的input  textarea button全部包含在form表单元素里 2.button  必须有formType="submit" 这个属性 3.form 必须有提交事件  即bindsubmit="back_houtai

微信小程序-form表单-获取用户输入文本框的值_掘金-我是哪吒的博客-爱代码爱编程

微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder="{{geren.nickname}}" v

微信小程序获取form表单数据-爱代码爱编程

初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群):757345416 form概述 表单,将组件内的用户输入的 提交。 当点击 表单中 form-type 为 submit 的

微信小程序防走弯路之:提交表单获取表单数据-爱代码爱编程

1.简历一个简单的表单,点击‘提交’按钮时,提交表单内容 2. 以姓名框为例   .wxml <form bindsubmit="formSubmit"> #调用formSubmit函数 <view class='page_row' > <view class="search"> <

微信小程序--获取form表单初始值提交数据_吴小傻0的博客-爱代码爱编程

–wxml– <form bindsubmit="formSubmit"> <view class="txt"> <view class="ima"></vie

微信小程序form表单登录_潘宸 .的博客-爱代码爱编程_微信小程序form登录

1.首先是wxml文件布局设计 <!--pages/login/login.wxml--> <view class='page'> <form bindsubmit='formSubm

微信小程序怎么获取动态创建的表单数据?vue怎么获取动态创建的表单数据_xyphf_和派孔明的博客-爱代码爱编程_小程序动态表单

业务场景:一串一组表单在微信小程序中由后端获取的json数据循环遍历生成的,我们填好表单后要给后端在传回去。 我们假设这段json是由后端传给我们在前端的遍历的 GoodArr: [ {name:"名称一"}, {name:"名称二"}, {name:"名称三"}, {name:"名称四"}

微信小程序-如何获取用户表单控件中的值-爱代码爱编程

虽互不曾谋面,但希望能和您成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 标星公众号(ID:itclanCoder) 如果不知道如何操作 点击这里,标星不迷路 背景 在小程序开发中,经常有用到表单,我们往往需要在小程序端获取用户表单输入框中的值(通常用户输入的有

微信公众号如何实现支付功能?-爱代码爱编程

随着移动支付下半场的开始,现在许多商家都在积极准备线上转型。使用微信公众号支付无疑是很多商家的首选,既可以设立商家自己的品牌,又可以让粉丝关注公众号,同时还可以借助微信流量增加曝光度。 而且对于消费者来说,打开微信就可以使用公众号购买商品,势必比其他方式更为方便和得心应手。 但许多商家和服务商由于不清楚公众号支付的特殊性,在开通时会踩很多“坑”,给大家

GitLab设置通知企业微信机器人-爱代码爱编程

将Gitlab的push、tag push、merge request和pipeline等等推送到企业微信的机器人。 应用部署运行 应用通过环境变量添加机器人webhook地址,WEBHOOK_URL_作为前缀,后面可接不同的推送组。 如环境变量WEBHOOK_URL_PROJ,PROJ则为推送组。推送组用于与Gitlab的集成时使用。 例如: 机

公众号开发——自动回复功能-爱代码爱编程

步骤 编写公众号接口程序–采用SpringBoot编写部署程序申请公众号和配置公众号参考资料编写公众号接口程序 公众号官方接口说明 验证服务器配置是否正确接口接受文本信息接口编写程序接口 验证服务器配置是否正确接口 @GetMapping("/gong") public void getGong(HttpServletRequest

uni-app 新版微信用户获取userInfo方法uni.getUserProfile-爱代码爱编程

uni-app 新版微信用户获取userInfo方法 uni.getUserProfile 微信更新了新的获取用户信息的方法,之前的getUserInfo方法获取不到用户的头像等信息,继续使用也会得到 灰色的头像 不是真正的用户头像 之前的获uniapp 中获取用户信息方法: <button open-type="getUserInfo" @g