微信小程序-form表单提交代码实例


Posted in Javascript onApril 29, 2019

效果

微信小程序-form表单提交代码实例

html代码

<form bindsubmit="formSubmit" bindreset="formReset">
 <view class="section section_gap">
  <view class="section__title">是否公开信息</view>
  <switch name="isPub" />
 </view>
 
 <view class="section">
  <view class="section__title">手机号</view>
  <input name="phone" placeholder="手机号" />
 </view>
 <view class="section">
  <view class="section__title">密码</view>
  <input name="pwd" placeholder="密码" password/>
 </view>
 <view class="section section_gap">
  <view class="section__title">性别</view>
  <radio-group name="sex">
   <label>
    <radio value="男" checked/>男</label>
   <label>
    <radio value="女" />女</label>
  </radio-group>
 </view>
 <view class="btn-area">
  <button formType="submit">提交</button>
  <button formType="reset">重置</button>
 </view>
</form>
<view wx:if="{{isSubmit}}">
 {{warn ? warn : "是否公开信息:"+isPub+",手机号:"+phone+",密码:"+pwd+",性别:"+sex}}
</view>

css代码

.section{
 display: flex;
 flex-direction: row;
 margin: 20rpx;
}
.section view{
 margin-right: 20rpx;
}
.btn-area{
 margin: 20rpx;
}
button{
 margin: 10rpx 0;
}

js代码

let app = getApp();
Page({
 data: {
  isSubmit: false,
  warn: "",
  phone: "",
  pwd: "",
  isPub: false,
  sex: "男"
 },
 formSubmit: function (e) {
  console.log('form发生了submit事件,携带数据为:', e.detail.value);
  let { phone, pwd, isPub, sex } = e.detail.value;
  if (!phone || !pwd) {
   this.setData({
    warn: "手机号或密码为空!",
    isSubmit: true
   })
   return;
  }
  this.setData({
   warn: "",
   isSubmit: true,
   phone,
   pwd,
   isPub,
   sex
  })
 },
 formReset: function () {
  console.log('form发生了reset事件')
 }
})

以上所述是小编给大家介绍的微信小程序-form表单提交详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
Vue父子组件传值的一些坑
Sep 16 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 #Javascript
微信小程序传值以及获取值方法的详解
Apr 29 #Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 #Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 #Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 #Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 #Javascript
深入浅析Vue 中 ref 的使用
Apr 29 #Javascript
You might like
Cakephp 执行主要流程
2010/03/24 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
JavaScript中EventLoop介绍
2018/01/22 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
Python实现从URL地址提取文件名的方法
2015/05/15 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
创先争优活动方案
2014/02/12 职场文书
教师校本培训方案
2014/02/26 职场文书
学习演讲稿范文
2014/05/10 职场文书
学期个人工作总结
2015/02/13 职场文书
家长会开场白和结束语
2015/05/29 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
js判断两个数组相等的5种方法
2022/05/06 Javascript
nginx 配置缓存
2022/05/11 Servers