微信小程序表单使用

微信小程序表单使用

话不多说，直接上代码。
1.wxml文件

<view class="container">
  <!-- 表单 -->
  <form class="form" catchsubmit="formSubmit">
    <view class="topic">注册</view>
  <!-- 姓名 -->
  <view class="uname form_view">
    用户名：
    <input class="ipt" placeholder="请输入用户名" name="uname" value="{{form.uname}}"></input>
  </view>
   <!-- 手机号码 -->
   <view class="phone form_view">
    手机号：
    <input class="ipt" placeholder="请输入手机号码" name="phone" value="{{form.phone}}" bindblur="phoneInputChange"></input>
  </view>
   <!-- 验证码 -->
   <view class="vcode form_view">
    <view class="left">
      <text>验证码：</text>
      <input class="ipt" placeholder="请输入验证码" name="vcode" value="{{form.vcode}}"></input>
    </view>
    <button class="btn" catchtap="sendVcode" disabled="{{vCodeShowFlag}}">{{text}}</button>
  </view>
   <!-- 密码 -->
   <view class="password form_view">
    密码：
    <input class="ipt" type="password" placeholder="请输入密码" name="password" value="{{form.password}}"></input>
  </view>
   <!--确认密码 -->
   <view class="passwordCheck form_view">
    确认密码：
    <input class="ipt" type="password" placeholder="请确认密码" name="passwordCheck" value="{{form.passwordCheck}}" ></input>
  </view>
  <!-- 提交按钮 -->
  <view class="btn-area">
    <button style="margin: 30rpx 0" type="primary" formType="submit">提交</button>
  </view>
</form>
</view>

2.js代码

formSubmit(e) {
 console.log(e.detail.value);
}

需要注意的点

1. form的catchsubmit=“formSubmit”
2. button的 formType=“submit”
3. 要在js文件中拿到表单的输入值，必须在input中有name这个属性

保证以上三点而后在js文件中定义formSubmit事件，就能保证表单的正常使用