【微信技术-微信小程序】------- 获取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