How to obtain input data in WeChat mini program-JS Tutorial-php.cn

How to obtain input data in WeChat mini program

亚连

Release： 2018-06-23 15:23:10

Original

3191 people have browsed it

This article mainly introduces the WeChat applet to simply implement the form form to obtain input data, involving the WeChat applet's event binding and data acquisition and other related operation skills for the form form. Friends in need can refer to the following

The example in this article describes the simple implementation of the WeChat applet to obtain input data in the form form. Share it with everyone for your reference, the details are as follows:

1. Effect display

2. Key code

index.wxml

<form bindsubmit="formBindsubmit" bindreset="formReset">
 <view style="display:flex;">
  <label>用户名：</label>
  <input name="userName" placeholder="请输入用户名！" />
 </view>
 <view style="display:flex;">
  <label>密码：</label>
  <input name="psw" placeholder="请输入密码！" password="true" />
 </view>
 <view style="display:flex;margin-top:30px;">
  <button style="width:30%;" formType="submit" >登录</button>
  <button style="width:30%" formType="reset" >重置</button>
 </view>
</form>
<view>{{tip}}</view>
<view>{{userName}}</view>
<view>{{psw}}</view>

Copy after login

index.js

Page({
 data:{
  // text:"这是一个页面"
  tip:&#39;&#39;,
  userName:&#39;&#39;,
  psw:&#39;&#39;
 },
 formBindsubmit:function(e){
  if(e.detail.value.userName.length==0||e.detail.value.psw.length==0){
   this.setData({
    tip:&#39;提示：用户名和密码不能为空！&#39;,
    userName:&#39;&#39;,
    psw:&#39;&#39;
   })
  }else{
   this.setData({
    tip:&#39;&#39;,
    userName:&#39;用户名：&#39;+e.detail.value.userName,
    psw:&#39;密码：&#39;+e.detail.value.psw
   })
  }
 },
 formReset:function(){
  this.setData({
   tip:&#39;&#39;,
   userName:&#39;&#39;,
   psw:&#39;&#39;
  })
 }
})

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to install nvm on Mac (detailed tutorial)

How to implement the time function in the WeChat applet

Exploring about generating code in webpack

How to display single options in WeChat applet

The above is the detailed content of How to obtain input data in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!