<input class="input" name="userName" placeholder="请输入用户名"
    bindinput ="userNameInput"/>
 
<input class="input" name="password" placeholder="请输入密码"
     bindinput="passWdInput" />

<button class="loginBtn" bindtap="loginBtnClick">登录</button>
data: {
    userName: '',
    userPwd:""
  },
  //获取用户输入的用户名
  userNameInput:function(e)
  {
    this.setData({
      userName: e.detail.value
    })
  },
  passWdInput:function(e)
  {
    this.setData({
      userPwd: e.detail.value
    })
  },
  //获取用户输入的密码
  loginBtnClick: function (e) {
    console.log("用户名:" this.data.userName " 密码:"  this.data.password);
  }

form表单

<form bindsubmit="formSubmit" bindreset="formReset">
    <view class='item'>
      \r\n\r\n\r\n\r\n\r\n\r\n\r\n昵称:
      <view class='bk'>
        <!-- <textarea class="textarea" placeholder='昵称' auto-height value='{{geren.nickname}}' maxlength='15'></textarea> -->
        <input name='formnickname' class="textarea" placeholder="{{geren.nickname}}" value='{{geren.nickname}}' bindinput="nickname" maxlength='15' auto-height/>
      </view>
    </view>

    <view class='item'>
      真实姓名:
      <view class='bk'>
        <!-- <textarea class="textarea" placeholder='真实姓名' auto-height value='{{geren.sysUserDetail.realName}}' maxlength='10'></textarea> -->
        <input name='formrealName' class="textarea" placeholder="{{detailgeren.realName}}" value='{{detailgeren.realName}}' bindinput="realName" maxlength='15' auto-height/>

      </view>
    </view>

    <view class='item'>
      \r\n\r\n\r\n\r\n\r\n\r\n\r\n性别:
      <radio-group class="radio-group" bindchange="radioChange" name='formsex'>

        <!-- <label class="radio" wx:for="{{items}}"> -->
        <label class='radio'>
          <!-- checked="{{item.checked}}" -->
          <radio value="{{items[0].name}}" checked='{{boy}}' /> {{items[0].value}}
          <radio value="{{items[1].name}}" checked='{{gril}}' /> {{items[1].value}}
        </label>

      </radio-group>
    </view>

    <view class='item'>
      \r\n\r\n\r\n\r\n\r\n\r\n\r\n生日:
      <view class='bk'>
        <view class='time'>
          <picker mode="date" value="{{date}}" start="1800-01-01" end="2222-01-01" bindchange="changeDate" name="formdate">
            <view>
              {{date}}
            </view>
          </picker>
        </view>
      </view>
    </view>

    <view class='item'>
      \r\n\r\n\r\n\r\n居住地:
      <view class='bk'>
        <!-- <textarea class="textarea" placeholder='居住地' auto-height value='{{geren.sysUserDetail.address}}' maxlength='10'></textarea> -->
        <view class="tui-picker-content">
          <picker name="formaddress" bindchange="changeRegin" mode="region" value="{{region}}">
            <!-- <view class="tui-picker-detail">{{region[0]}} - {{region[1]}} - {{region[2]}}</view> -->
            <view class="tui-picker-detail">{{region}}</view>
          </picker>
        </view>

      </view>
    </view>

    <view class='item'>
      详细地址:
      <view class='bk'>
        <!-- <textarea class="textarea" placeholder='详细地址' auto-height value='{{geren.sysUserDetail.detailAddress}}' maxlength='100'></textarea> -->
        <input name="formdetailAddress" class="textarea" placeholder="{{detailgeren.detailAddress}}" value='{{detailgeren.detailAddress}}' bindinput="detailAddress" maxlength='100' auto-height/>

      </view>
    </view>

    <!-- <button class='btn' bindtap='baocun'>保存</button> -->
    <view class='anniu'>
      <button class='btn' formType="submit">保存</button>
      <button class='btn' formType="reset">重置</button>
    </view>

  </form>
formSubmit: function (e) {
    console.log('form发生了submit事件,携带数据为:', e.detail.value);
  },

let app = getApp();
Page({
  data: {
    phone: "",
    pwd: "",

    sex: "男"
  },
  formSubmit: function (e) {
    console.log('form发生了submit事件,携带数据为:', e.detail.value);
    let { phone, pwd, isPub, sex } = e.detail.value;

    this.setData({
      warn: "",
      isSubmit: true,
      phone,
      pwd,
      isPub,
      sex
    })
  },
  formReset: function () {
    console.log('form发生了reset事件')
  }
})

更多专业前端知识,请上【猿2048】www.mk2048.com
相关标签: 微信小程序

上一篇: css怎样清除浮动

下一篇: Go语言开发:在HTML模板中引入js及其他静态文件

推荐阅读