经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序-form表单-获取用户输入文本框的值
来源:cnblogs  作者:达叔小生  时间:2018/11/22 10:03:56  对本文有异议

微信小程序-form表单-获取用户输入文本框的值

  1. <input name='formnickname' class="textarea" placeholder="{{geren.nickname}}" value='{{geren.nickname}}' bindinput="nickname" maxlength='15' auto-height/>
  2. // 获取昵称
  3. nickname: function(e) {
  4. this.setData({
  5. nickname: e.detail.value,
  6. })
  7. console.log("昵称" + this.data.nickname);
  8. },
  9. // 获取姓名
  10. realName: function(e) {
  11. this.setData({
  12. realName: e.detail.value,
  13. })
  14. console.log("姓名" + this.data.realName);
  15. },
  16. // 获取详细地址
  17. detailAddress: function(e) {
  18. this.setData({
  19. detailAddress: e.detail.value,
  20. })
  21. console.log("详细地址" + this.data.detailAddress);
  22. this.setData({
  23. detailAddress: e.detail.value,
  24. })
  25. console.log("详细地址" + this.data.detailAddress);
  26. },
  27. 保存
  28. baocun: function(e) {
  29. console.log("昵称:" + this.data.nickname + " 真实姓名:" + this.data.realName + "性别:" + this.data.sex + "详细地址" + this.data.detailAddress);
  30. },
  1. <input class="input" name="userName" placeholder="请输入用户名"
  2. bindinput ="userNameInput"/>
  3. <input class="input" name="password" placeholder="请输入密码"
  4. bindinput="passWdInput" />
  5. <button class="loginBtn" bindtap="loginBtnClick">登录</button>
  1. data: {
  2. userName: '',
  3. userPwd:""
  4. },
  5. //获取用户输入的用户名
  6. userNameInput:function(e)
  7. {
  8. this.setData({
  9. userName: e.detail.value
  10. })
  11. },
  12. passWdInput:function(e)
  13. {
  14. this.setData({
  15. userPwd: e.detail.value
  16. })
  17. },
  18. //获取用户输入的密码
  19. loginBtnClick: function (e) {
  20. console.log("用户名:"+this.data.userName+" 密码:" +this.data.password);
  21. }

form表单

  1. <form bindsubmit="formSubmit" bindreset="formReset">
  2. <view class='item'>
  3. \r\n\r\n\r\n\r\n\r\n\r\n\r\n昵称:
  4. <view class='bk'>
  5. <!-- <textarea class="textarea" placeholder='昵称' auto-height value='{{geren.nickname}}' maxlength='15'></textarea> -->
  6. <input name='formnickname' class="textarea" placeholder="{{geren.nickname}}" value='{{geren.nickname}}' bindinput="nickname" maxlength='15' auto-height/>
  7. </view>
  8. </view>
  9. <view class='item'>
  10. 真实姓名:
  11. <view class='bk'>
  12. <!-- <textarea class="textarea" placeholder='真实姓名' auto-height value='{{geren.sysUserDetail.realName}}' maxlength='10'></textarea> -->
  13. <input name='formrealName' class="textarea" placeholder="{{detailgeren.realName}}" value='{{detailgeren.realName}}' bindinput="realName" maxlength='15' auto-height/>
  14. </view>
  15. </view>
  16. <view class='item'>
  17. \r\n\r\n\r\n\r\n\r\n\r\n\r\n性别:
  18. <radio-group class="radio-group" bindchange="radioChange" name='formsex'>
  19. <!-- <label class="radio" wx:for="{{items}}"> -->
  20. <label class='radio'>
  21. <!-- checked="{{item.checked}}" -->
  22. <radio value="{{items[0].name}}" checked='{{boy}}' /> {{items[0].value}}
  23. <radio value="{{items[1].name}}" checked='{{gril}}' /> {{items[1].value}}
  24. </label>
  25. </radio-group>
  26. </view>
  27. <view class='item'>
  28. \r\n\r\n\r\n\r\n\r\n\r\n\r\n生日:
  29. <view class='bk'>
  30. <view class='time'>
  31. <picker mode="date" value="{{date}}" start="1800-01-01" end="2222-01-01" bindchange="changeDate" name="formdate">
  32. <view>
  33. {{date}}
  34. </view>
  35. </picker>
  36. </view>
  37. </view>
  38. </view>
  39. <view class='item'>
  40. \r\n\r\n\r\n\r\n居住地:
  41. <view class='bk'>
  42. <!-- <textarea class="textarea" placeholder='居住地' auto-height value='{{geren.sysUserDetail.address}}' maxlength='10'></textarea> -->
  43. <view class="tui-picker-content">
  44. <picker name="formaddress" bindchange="changeRegin" mode="region" value="{{region}}">
  45. <!-- <view class="tui-picker-detail">{{region[0]}} - {{region[1]}} - {{region[2]}}</view> -->
  46. <view class="tui-picker-detail">{{region}}</view>
  47. </picker>
  48. </view>
  49. </view>
  50. </view>
  51. <view class='item'>
  52. 详细地址:
  53. <view class='bk'>
  54. <!-- <textarea class="textarea" placeholder='详细地址' auto-height value='{{geren.sysUserDetail.detailAddress}}' maxlength='100'></textarea> -->
  55. <input name="formdetailAddress" class="textarea" placeholder="{{detailgeren.detailAddress}}" value='{{detailgeren.detailAddress}}' bindinput="detailAddress" maxlength='100' auto-height/>
  56. </view>
  57. </view>
  58. <!-- <button class='btn' bindtap='baocun'>保存</button> -->
  59. <view class='anniu'>
  60. <button class='btn' formType="submit">保存</button>
  61. <button class='btn' formType="reset">重置</button>
  62. </view>
  63. </form>
  1. formSubmit: function (e) {
  2. console.log('form发生了submit事件,携带数据为:', e.detail.value);
  3. },
  4. let app = getApp();
  5. Page({
  6. data: {
  7. phone: "",
  8. pwd: "",
  9. sex: "男"
  10. },
  11. formSubmit: function (e) {
  12. console.log('form发生了submit事件,携带数据为:', e.detail.value);
  13. let { phone, pwd, isPub, sex } = e.detail.value;
  14. this.setData({
  15. warn: "",
  16. isSubmit: true,
  17. phone,
  18. pwd,
  19. isPub,
  20. sex
  21. })
  22. },
  23. formReset: function () {
  24. console.log('form发生了reset事件')
  25. }
  26. })
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号