微信小程序|设置表单界面

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

欢迎加入团队圈子！与作者面对面！直接点击！

问题描述

表单在小程序中非常常见，几乎每一个小程序都会有表单的界面。一些登录界面，身份验证界面，都是由表单来填写信息的。表单的内容有很多，提示性的输入框，手机号码短信验证的输入框以及错误提示输入框等。那么应该如何来设置一个完整的表单界面呢？

解决方案

不同的输入框类型构成了一个完整的表单，需要对不同的输入框进行设置。在json中对相关组件的引入，wxml中进行API的参数配置。

1.在json中调用van-field组件。

代码示例：

"usingComponents": {

"van-field": "/dist/field/index"

}

2.在wxml调用表单组件并对API参数的配置。

Value为当前输入的值，required设置表单必填星号，clearable设置是否启用清除控件，label输入框左侧的文本，placeholder输入框为空时的占位符，error将输入内容标红，border是否显示内边框。

代码示例：

<van-cell-group>

<van-field

value="{{ number }}"

required

clearable

label="学号"

icon="question-o"

placeholder="请输入学号"

bind:click-icon="onClickIcon"

</van-cell-group>

<van-cell-group>

<van-field

value="{{ username }}"

label="用户名"

placeholder="请输入用户名"

error

<van-field

value="{{ phone }}"

label="手机号"

placeholder="请输入手机号"

error-message="手机号格式错误"

border="{{ false }}"

</van-cell-group>

<van-cell-group>

<van-field

value="{{ sms }}"

center

clearable

label="短信验证码"

placeholder="请输入短信验证码"

border="{{ false }}"

use-button-slot

<button slot="button" size="mini" type="primary">发送验证码</button>

</van-field>

</van-cell-group>

微信小程序|设置表单界面

图 1 效果图

结语

设置表单的时候一定要根据不同的要求对API的参数进行配置。一个简单的输入框仅仅需要一个field标签就够了，但常见的输入框都是五花八门的，这些样式都是由表单的配置参数来设置的，这样就需要掌握熟悉这些参数的性质。

END

实习编辑 | 王文星

责编 | 江汪霖

where2go 团队

微信号：算法与编程之美

微信小程序|设置表单界面

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！

微信小程序|设置表单界面

相关推荐