WeChat applet simply implements form form to obtain input data example sharing-Mini Program Development-php.cn

Home

WeChat Applet

Mini Program Development

WeChat applet simply implements form form to obtain input data example sharing

小云云

May 21, 2018 am 11:20 AM

form Applets form

This article mainly introduces the WeChat applet's simple implementation of the form form's function of obtaining input data, involving the WeChat applet's event binding and data acquisition and other related operation skills for the form form. Friends who need it can refer to it. I hope it can help everyone. .

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

Related recommendations:

Notes on jquery form form serialization

Detailed explanation of Ajax method to implement Form form submission and precautions

Detailed explanation of how to prevent the page from jumping when the Form form is submitted in html

The above is the detailed content of WeChat applet simply implements form form to obtain input data example sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn