微信小程序-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 相关文章推荐
jQuery MD5加密实现代码
Mar 15 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
vue自动化路由的实现代码
Sep 30 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
PHP5 安装方法
2007/01/15 PHP
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
python实现excel读写数据
2021/03/02 Python
Python 转换文本编码实现解析
2019/08/27 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
运动会通讯稿50字
2014/01/30 职场文书
房地产项目策划书
2014/02/05 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
民用住房租房协议书
2014/10/29 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
2019年思想汇报
2019/06/20 职场文书