专栏首页算法与编程之美微信小程序|表单数据绑定及提示弹窗

微信小程序|表单数据绑定及提示弹窗

问题描述

一个表单如何进行数据绑定?

表单需要提交信息时弹出的提示弹窗是如何实现的?

一个小程序应用,总是会出现注册时填写个人界面的情况,这个界面就是一个双向数据绑定的表单,而如何实现一个表单的数据绑定以及如何在提交信息时跳出一个提示弹窗,则需要我们对制作表单的相关标签及属性以及样式的配置有深入的了解和掌握。

解决方案

(1)制作一个表单

制作表单时,先是用一个form标签对整体表单进行一个基础配置,然后给view标签不同的类名设置wxss样式。需要对表单填写时,通常运用<input> placeholder属性,来规定可描述输入字段预期值的简短的提示信息。如以下代码中,在填写“姓名”的文本框里面会出现提示信息“请输入你的姓名”。如果要改变聚焦时光标离软键盘的距离,可以用一个微信小程序特有的cursor-spacing属性。

“姓名”填写代码展示

<view class='input_w professional'> <text>姓名</text> <view class='input left'> <input placeholder='请输入你的真实姓名' cursor-spacing='20' name='name'></input> </view> </view>

(2)提交时的提示弹窗

信息填写完之后,提交时总是会跳出一个提示框,问你是否确定信息准确无误,这就需要一个button标签设置一个按钮用来开启提交事件,然后需要设置一个formType属性用于向服务器发送表单数据。

提交按钮配置

<button formType="submit" bindtap="modalcnt">提交</button>

js绑定数据

modalcnt: function () { wx.showModal({ title: '提示', content: '确定信息核实准确无误?', success: function (res) { if (res.confirm) { console.log('用户点击确定') } else if (res.cancel) { console.log('用户点击取消') } } }) }

(3)注册个人信息效果图

图 1表单效果图

图 2提示弹窗效果图

结语

(1)在添加一个form标签时,form必须有提交事件,如bindsubmit="back"。

(2)设置一个文本框时,如果填写内容需要输入多行,需要使用一个textarea标签。

END

实习编辑 | 王楠岚

责 编 | 吴怡辰

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:吴怡辰

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-02-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SpringBoot设置Filter过滤请求参数

    在使用springBoot进行项目开发时,遇到的需求是需要对用户上传的数据进行过滤,比如去除“< ' ^ %”等敏感字符。自己在做的时候想到了两个办法去实现。

    算法与编程之美
  • Python|平方怪圈

    如果把一个正整数的每一位都平方后再求和,得到一个新的正整数。对新产生的正整数再做同样的处理,如此一来,你会发现,不管开始取的是什么数字,最终如果不是落入1,就是...

    算法与编程之美
  • HTML|制作注册个人信息填写表

    在我们的日常工作和学习中,我们经常会需要使用某些网站的功能,这时就会面临需要注册该网站的账号。而在注册的时候,会让我们填写一个个人信息表,这样的一个网页就可以用...

    算法与编程之美
  • 基于Vue,ElementUI开发的一款表单设计器

    基于Vue,ElementUI开发的一款表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来

    程序源代码
  • 工作流引擎之activiti三种不同的表单及其应用

    这个恐怕是初次接触工作流最多的话题之一了,当然这个不是针对Activiti来说的,每个工作流引擎都会支持多种方式的表单。目前大家讨论到的大概有三种。

    lyb-geek
  • js之浏览器自动填充表单的危害(三)

    上一篇文章提到(点击即可访问) :在进行xss攻击时,如果cookie中被添加了httponly属性,我们可以尝试获取浏览器中由于记住密码而自动填充的表单里面的...

    Jumbo
  • jQuery插件 -- Form表单插件jquery.form.js

    jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法 -- aj...

    joshua317
  • ExtJs二(实现登录)

      在上一次http://www.cnblogs.com/aehyok/archive/2013/04/17/3025957.html主要是搭建Ext环境,本次...

    aehyok
  • ExtJs二(实现登录)

      在上一次http://www.cnblogs.com/aehyok/archive/2013/04/17/3025957.html主要是搭建Ext环境,本次...

    aehyok
  • jQuery validate 表单验证插件

    最近写了两个组表单提交的页面,好久没用jQuery,在写的时候总遇到一些莫名其妙的为难题,这里记录一下。

    libo1106

扫码关注云+社区

领取腾讯云代金券