小程序模板网

微信小程序问题汇总及详《一》form表单

发布时间:2018-04-17 09:43 所属栏目:小程序开发教程

作者:JoyJin,来自原文地址 
附上微信小程序开发文档链接: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){ }

 

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

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

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

 

  1. Page({
  2. data:{
  3. phone:''
  4. },
  5. phone:function(e){ //获取input值
  6. var that = this;
  7. that.setData({
  8. phone: e.detail.value
  9. })
  10. },
  11. phoneBtn: function (e) {
  12. var that = this;
  13. wx.request({
  14. url: 'https://....',
  15. method: 'GET',
  16. header: { 'content-type': 'application/json' },
  17. data: {
  18. 'phone': that.data.phone //请求的数据
  19. },
  20. success: function (res) {}
  21. })
  22. },
  23. })


本文地址:https://www.eyoucms.com/wxmini/doc/course/23513.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询