小程序表单

基础的小程序表单提交数据备份:

 

 

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="30%;" formType="submit" >登录</button>

  <button style="30%" formType="reset" >重置</button>

 </view>

</form>

<view>{{tip}}</view>

<view>{{userName}}</view>

<view>{{psw}}</view>

js

Page({

 data:{

  // text:"这是一个页面"

  tip:'',

  userName:'',

  psw:''

 },

 formBindsubmit:function(e){

  if(e.detail.value.userName.length==0||e.detail.value.psw.length==0){

   this.setData({

    tip:'提示：用户名和密码不能为空！',

    userName:'',

    psw:''

   })

  }else{

   this.setData({

    tip:'',

    userName:'用户名：'+e.detail.value.userName,

    psw:'密码：'+e.detail.value.psw

   })

  }

 },

 formReset:function(){

  this.setData({

   tip:'',

   userName:'',

   psw:''

  })

 }

})